useId() 安定した一意の ID を生成する

最終更新：2026-10-22

useId() はコンポーネントインスタンスごとに安定した一意の ID 文字列を返します。label/for や aria の関連付けなどのアクセシビリティ属性に使い、SSR とクライアントの一致を保証します。

📝 構文

const id = useId()
// <label :for="id">名前</label><input :id="id">

戻り値：一意の ID 文字列（同じインスタンス内では安定）

以下のコードを編集して結果を確認しましょう：

出力：

Each instance gets a distinct ID; clicking a label focuses its input.

💡 ヒント アクセシビリティに配慮したフォームやモーダルのコンポーネントで使い、手書きのランダム ID による SSR の不一致を避けましょう。

⚠️ 注意 同じコンポーネント内で複数回呼ぶと異なる値が返ります（呼び出しごとに独立）。1 つの値を使い回したい場合は変数に保存してください。

ℹ️ 補足 3.5 で追加されました。低いバージョンでは「プレフィックス + 連番」を自前で生成して代用できます。

Q Math.random() ではだめなのですか？

A ランダムな値は SSR とクライアントで一致せず、注水の不一致を起こします。useId は両側で同じ値を保証します。

Q ID は再レンダリングで変わりますか？

A 変わりません。同じインスタンス内では安定しています。

Q プレフィックスをカスタマイズできますか？

A この関数自体にプレフィックスのオプションはありません。特定の書式が必要なら自分で連結してください。

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。