ブラウザAPIの購読
useSyncExternalStoreを使ってmatchMedia、navigator.onLine、windowの履歴、localStorageを購読するフックを構築します。
「ブラウザAPIの購読」はCoddyKit上の無料React Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。
matchMediaをサブスクライブする
ブラウザーのメディアクエリは、外部ストアの好例です。matchMediaのクエリを使ってダークモードやブレークポイントを監視し、一致状態が切り替わるたびに再レンダーできます。
subscribe関数はMediaQueryListに変更リスナーを追加し、getSnapshotは現在のmatchesブール値を返します。これにより、レスポンシブな条件をリアクティブに扱えます。
useMediaQueryフック
この処理をuseMediaQueryフックにまとめると、コンポーネントは1回の呼び出しでクエリに一致しているかどうかを確認できます。このフックは、指定されたクエリ文字列を基に、安定したsubscribeとgetSnapshotを構成します。
これにより、並行レンダリング中もuseSyncExternalStoreによって一貫性が保たれる、レスポンシブな動作のための簡潔で再利用可能なプリミティブを作れます。
navigator.onLineの状態
ブラウザーはオンライン・オフラインイベントとnavigator.onLineを提供しています。これらのイベントをサブスクライブし、プロパティを読み取ることで、React内で接続状態をリアルタイムに取得できます。
getSnapshotはnavigator.onLineを返し、subscribeはonlineイベントとofflineイベントのリスナーを登録します。これにより、接続状態が変わるたびにコンポーネントが更新されます。
useOnlineStatusフック
この処理をuseOnlineStatusフックにまとめると、どのコンポーネントでも、オフラインバナーを表示したり、ネットワーク切断時に操作を無効にしたりできます。Reactの公式ドキュメントでも、このフックを説明するためにまさに同じ例が使われています。
これは小さな例ですが、ブラウザーの外部シグナルをリアクティブな状態に自然に対応付けられることを示しています。
window.locationをサブスクライブする
popstateイベントを監視し、getSnapshotでwindow.locationを読み取ることで、ナビゲーションの変更をサブスクライブできます。これはHistory APIを基盤とするシンプルなカスタムルーターの土台になります。
pushStateはpopstateを発生させないため、カスタムルーターでは、プログラムによるナビゲーションでもスナップショットが更新されるように独自のイベントを発行することがよくあります。
storageイベントによるlocalStorageのタブ間同期
localStorageが変更されると、他のタブでstorageイベントが発生します。そのため、サブスクライブ可能な外部ストアとして扱えます。getSnapshotは現在の値を読み取り、subscribeはstorageイベントを監視します。
これによりタブ間の同期が可能になり、1つのタブで値を更新すると、別のタブのコンポーネントもリアクティブに更新されます。
deviceorientation
deviceorientationイベントは、デバイスの物理的な傾きを通知します。このイベントをサブスクライブし、getSnapshotで最新の角度を読み取ると、モーションデータをリアクティブな状態に変換できます。
これは、スマートフォンの持ち方に応じて反応する視差効果やインタラクティブなビジュアライゼーションに役立ちます。
IntersectionObserverのラッパー
IntersectionObserverを使うと、要素がビューポートに入ったか、そこから出たかを検知できます。これをラップして、subscribeでオブザーバーを作成し、getSnapshotで最新のisIntersecting値を返せます。
これにより、画像の遅延読み込み、アニメーションの開始、無限スクロールの監視要素に使えるリアクティブなisVisibleフラグを作れます。
要素のサイズにResizeObserverを使う
ResizeObserverは要素のサイズ変更を通知します。これをラップすると、subscribeで要素を監視し、getSnapshotで現在の寸法を返せるため、コンポーネントはレイアウトの変更に正確に反応できます。
ビューポート全体ではなく特定の要素を対象にする場合、windowのresizeを監視するよりも効率的で正確です。
useWindowSizeに組み込む
resizeイベントとこのフックを組み合わせて、現在の幅と高さを返すuseWindowSizeを作れます。subscribeはresizeリスナーを登録し、getSnapshotはwindowの寸法を読み取ります。
安定したスナップショットを返すことを忘れないでください。サイズのオブジェクトをキャッシュし、寸法が変わっていないときに再レンダーが発生しないようにすると、組み合わせた処理を効率的に保てます。
クイックチェック：useMediaQueryの実装
useMediaQueryフックがストアフックをどのように使うか考えてみてください。
復習：ブラウザーAPIをサブスクライブする
多くのブラウザーAPIは、useSyncExternalStoreで橋渡しできる外部ストアです。ブレークポイントにはmatchMedia、接続状態にはnavigator.onLine、ナビゲーションとタブ間同期にはlocationとstorage、さらにorientation、intersection、resizeの各オブザーバーを利用できます。
どれも、リスナーを登録・削除するsubscribeと、安定したgetSnapshotという同じ形に従います。これらをuseMediaQuery、useOnlineStatus、useWindowSizeなどのフックに組み込んでください。
よくある質問
「ブラウザAPIの購読」レッスンは無料ですか？
はい。「ブラウザAPIの購読」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。
「ブラウザAPIの購読」で何を学びますか？
useSyncExternalStoreを使ってmatchMedia、navigator.onLine、windowの履歴、localStorageを購読するフックを構築します。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
React Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「ブラウザAPIの購読」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このReact Academyレッスンでコードを書いて実行できますか？
はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。