RefsとuseEffectでフォーカスを管理する
コンポーネントベースの環境でフォーカスを制御します。
「RefsとuseEffectでフォーカスを管理する」はCoddyKit上の無料Web Accessibility Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWeb Accessibility Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Accessibility Academyコースには全4レッスンが含まれています。
フォーカスの管理が必要な理由
UIが表示されたり、消えたり、更新されたりすると、キーボードのフォーカスが誤った場所に移動したり、失われたりすることがあります。Reactでは、refsとエフェクトを使って意図的にフォーカスを制御します。
refはDOMノードを指します
useRefを使うと、実際の要素への安定した参照を取得できます。描画後、ref.currentには、.focus()を呼び出せる実際のDOMノードが入ります。
const inputRef = useRef(null);
<input ref={inputRef} />useEffectは描画後に実行されます
フォーカスを移動するには、要素がDOMに存在していなければなりません。useEffectはブラウザーが描画した後に実行されるため、フォーカスを移動する安全な場所です。
useEffect(() => {
inputRef.current.focus();
}, []);マウント時にフォーカスする
空の依存配列を指定すると、エフェクトはコンポーネントのマウント時に1回だけ実行されます。フォームやステップの最初のフィールドにフォーカスを移動する場合に使います。
何かが開いたときにフォーカスする
isOpenのような依存値を追加すると、状態が切り替わったときにエフェクトが再実行されます。パネルが開いたら、そこへフォーカスを直接移動できます。
useEffect(() => {
if (isOpen) panelRef.current.focus();
}, [isOpen]);nullに備える
ノードがまだ描画されていない場合、refはnullになることがあります。要素が存在しないことによるクラッシュを避けるため、.focus()を呼び出す前にref.currentの存在を確認してください。
ref.current?.focus();入力要素以外もフォーカス可能にする
見出しやdivは、デフォルトではフォーカスできません。tabindexに-1を指定すると、通常のタブ移動順に追加せず、スクリプトからフォーカスできるようになります。
<div tabindex="-1" ref={regionRef}>...</div>クリーンアップでフォーカスを戻す
エフェクトはクリーンアップ関数を返せます。レイヤーのアンマウント時にフォーカスをトリガーへ戻すために使うと、ユーザーがページの先頭に取り残されるのを防げます。
useEffect(() => {
const prev = document.activeElement;
return () => prev.focus();
}, []);古いクロージャに注意する
エフェクトは、その描画時点の値を取り込みます。データに基づいてフォーカスする場合は、エフェクトが古い値ではなく最新の値を使うよう、依存配列にそのデータを指定してください。
子要素にはforwardRefを使う
子コンポーネント内の要素にフォーカスするには、forwardRefでラップします。すると親が内部ノードへのrefを保持し、そこにフォーカスできます。
const Field = forwardRef((props, ref) =>
<input ref={ref} {...props} />);フォーカスしすぎない
ダイアログを開いたときやエラーを表示したときなど、本当にユーザーの助けになる場合だけフォーカスを移動してください。描画のたびにフォーカスを奪うと、誰にとっても使いにくくなります。
簡単な確認
Reactが要素を描画した直後に、キーボードフォーカスをその要素へ移動したいとします。どこに記述すべきでしょうか。
まとめ：refsとエフェクトを組み合わせる
useRefとuseEffectを組み合わせて、描画後にフォーカスを移動します。nullに備え、クリーンアップでフォーカスを戻し、役立つ場合だけフォーカスを制御してください。🎯
よくある質問
「RefsとuseEffectでフォーカスを管理する」レッスンは無料ですか？
はい。「RefsとuseEffectでフォーカスを管理する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Web Accessibility Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Accessibility Academyコースには全4レッスンが含まれています。
「RefsとuseEffectでフォーカスを管理する」で何を学びますか？
コンポーネントベースの環境でフォーカスを制御します。 ブラウザで直接実行するハンズオンコードでWeb Accessibility Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Web Accessibility Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのWeb Accessibility Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「RefsとuseEffectでフォーカスを管理する」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このWeb Accessibility Academyレッスンでコードを書いて実行できますか？
はい。すべてのWeb Accessibility Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- ページを再読み込みせずにルートを変更する
- RefsとuseEffectでフォーカスを管理する
- Fragment、Portal、そしてDOM順序の落とし穴
- jsx-a11yとコンポーネントレベルのガードレール