useIdの接頭辞変更：アクセシビリティ向上のためのID生成フック
React 19.2では、useIdによる生成IDのデフォルト接頭辞が従来の:r:（19.0.0）、«r»（19.1.0）から_r_に変更されました。
useIdはコンポーネントごとに一意なIDを生成するためのフックです。従来、useIdで生成されるIDにはCSSセレクターとして無効な特殊文字が使われていましたが、View Transitionsをサポートするために、XML 1.0の名前として有効な形式に変更されたとのことです。
以下のサンプルコードは、useIdを使って3つの段落要素にIDを割り当てた例です。
// React のバージョンを切り替えるには package.jsonの react と react-dom バージョンを
// 19.0.0、19.1.0、19.2.0 に変更してから npm install を実行してください
import { useId } from 'react';
function MyComponent() {
const id = useId();
return <p id={id}>Test</p>;
}
function App() {
return (
<div>
<MyComponent />
<MyComponent />
<MyComponent />
</div>
);
}
実際に上記コードをReact 19.0.0、19.1.0、19.2.0で実行した場合の生成IDの違いを以下に示します。
// React 19.0.0 <div><p id=":r0:">Test</p><p id=":r1:">Test</p><p id=":r2:">Test</p></div> // React 19.1.0 <div><p id="«r0»">Test</p><p id="«r1»">Test</p><p id="«r2»">Test</p></div> // React 19.2.0 <div><p id="_r_0_">Test</p><p id="_r_1_">Test</p><p id="_r_2_">Test</p></div>
たしかにReact 19.2.0では、_r_という接頭辞が使われていることがわかります。
useIdのユースケース
useIdはWebアクセシビリティ向上のため、id属性とARIA（Accessible Rich Internet Applications）属性で利用するIDを生成する目的で設計されています。useId自体はReact 18で導入されたもので目新しいものではありませんが、ここでどういったユースケースがあるのかを改めて確認しておきましょう。
Reactの公式リファレンスのサンプルがシンプルでわかりやすいので、同じ例を紹介します。
import { useId } from 'react';
function PasswordField() {
const id = useId();
return (
<>
<label>
Password:
<input type="password" aria-describedby={id} />
</label>
<p id={id}>パスワードは18文字以上である必要があります。</p>
</>
);
}
export default function App() {
return (
<>
<h2>Choose password</h2>
<PasswordField />
<h2>Confirm password</h2>
<PasswordField />
</>
);
}
上記のサンプルコードを実行するとレンダリングされたHTMLは以下のようになります。_r_0_と_r_1_というIDが生成されていることがわかります。
<div id="root"> <h2>Choose password</h2><label>Password:<input aria-describedby="_r_0_" type="password"></label> <p id="_r_0_">パスワードは18文字以上である必要があります。</p> <h2>Confirm password</h2><label>Password:<input aria-describedby="_r_1_" type="password"></label> <p id="_r_1_">パスワードは18文字以上である必要があります。</p> </div>
Webアクセシビリティとは、すべてのユーザーがウェブコンテンツにアクセスできるようにするための設計や技術のことを指します。特に、視覚や聴覚に障害のあるユーザーが情報を得やすくするための工夫が求められます。ARIA属性は、スクリーンリーダーなどの支援技術がコンテンツの意味や構造を理解しやすくするために使用されます。
idが必要となるARIA属性のうちよく使われるのは、aria-describedby属性でしょう。これは、ある要素が説明される別の要素を指定するために使われます。上記の例では、パスワード入力フィールドに関連する説明テキストを提供するために使用されています。
そのほかにも、aria-labelledby属性（要素がラベル付けされる別の要素を指定）やaria-controls属性（要素が制御する別の要素を指定）などでもidが必要となります。
コンポーネント内の複数要素にIDを割り当てる場合
コンポーネント内で複数の要素にIDを割り当てたい場合は、生成されたIDをプリフィックス（接頭辞）にして一意なIDを作成して使用します。
import { useId } from 'react';
function MyComponent() {
const id = useId();
return (
<>
<input id={`${id}-field1`}>Test</input>
<input id={`${id}-field2`}>Test</input>
</>
);
}
function App() {
return (
<div>
<MyComponent /> // id => _r_0_-field1, _r_0_-field2
<MyComponent /> // id => _r_1_-field1, _r_1_-field2
</div>
);
}
useId利用時の注意点
useIdで生成されるIDをリスト要素のkeyとして使用しないようにしてください。useIdで生成されるIDは一意ですが、リスト要素のkeyとして使用することは推奨されていません。
これまでと同様、リストのkeyは必ずデータから一意な値を生成するようにしましょう。
React 19.2のその他の新機能や改善点
これまでに紹介した機能に加えて、React 19.2では以下の新機能や改善点も導入されています。
- Partial Pre-rendering（部分的な事前レンダリング）：アプリの静的部分を事前にレンダリングしてCDNから提供し、その後残りのレンダリングを再開して動的コンテンツを埋め込むことができます。
- Suspenseバッチング：従来、SSR（ストリーミングレンダリング）で複数のSuspense 境界が連続していた場合、それぞれが別々にレンダリング順序どおりに出されることがありましたが、これらをバッチ（一括）で表示する遅延制御が導入されました。
- Web Streams対応：Node.jsでSSRをストリーミングするためのWeb Streamsのサポートが追加されました。
まとめと導入アドバイス
React 19.2では、<Activity>やuseEffectEventなど、新しいコンポーネントやフックが導入され、さらにcacheSignalやuseIdの改善など、細かな変更が行われました。これらの新機能を活用することで、パフォーマンスの向上やアクセシビリティの強化が期待できます。
今回のマイナーバージョンアップでは破壊的な変更はありませんが、useIdの接頭辞変更など、既存コードに影響を与える可能性のある変更もあります。導入前には十分なテストを行い、互換性を確認することをお勧めします。
