DOMノードへのアクセス、計測とフォーカス
refsでDOMノードにアクセスし、レンダー後に入力欄へフォーカスを移し、初心者にも分かりやすい方法で要素のサイズを計測します。
「DOMノードへのアクセス、計測とフォーカス」はCoddyKit上の無料React Academyレッスンです。 これはレッスン2/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全3レッスンが含まれています。
DOMにアクセスする理由
目標：useRefを使って、レンダリング後にDOMノードへ安全にアクセスします。
- JSX要素にrefを設定する
- エフェクト内でref.currentを読み取る
- 要素にフォーカスしたり、サイズを測定したりする
レンダリング後の処理
DOMはレンダリングの後に利用可能になります。focus()やサイズの測定などの処理にはuseEffectを使用します。レンダリングは純粋に保ちます。
デモ：入力欄に自動フォーカス
入力欄にrefを設定し、最初のペイント後に実行されるよう、useEffect([])内でfocus()を呼び出します。
<div id="root"></div>
レンダリング後に測定
要素を測定するには、エフェクト内でref.currentからgetBoundingClientRect()を読み取ります。値を最新に保つため、リサイズ時に更新します。
デモ：幅を測定する
boxのrefを保持し、マウント時とwindowのリサイズ時に<strong>widthを読み取ります。クリーンアップでリスナーを削除します。
<div id="root"></div>
ヒントと注意点
ヒント：
- 実際のDOMノード（例：input、div）にrefを設定します。
- useEffect内（ペイント後）で読み取りや処理を行います。
- 追加したリスナーは必ずクリーンアップします。
レンダリング後のフォーカス確認
まとめ
まとめ：DOMノードにrefを設定し、レンダリング後にそれを使ってfocus()を呼び出したり、getBoundingClientRect()でサイズを読み取ったりします。追加したリスナーはクリーンアップします。
よくある質問
「DOMノードへのアクセス、計測とフォーカス」レッスンは無料ですか？
はい。「DOMノードへのアクセス、計測とフォーカス」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全3レッスンが含まれています。
「DOMノードへのアクセス、計測とフォーカス」で何を学びますか？
refsでDOMノードにアクセスし、レンダー後に入力欄へフォーカスを移し、初心者にも分かりやすい方法で要素のサイズを計測します。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
React Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/3です。
「DOMノードへのアクセス、計測とフォーカス」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このReact Academyレッスンでコードを書いて実行できますか？
はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 再レンダーせずに値を保持する
- DOMノードへのアクセス、計測とフォーカス
- タイマーとIDのための可変Ref