Global Overlay Manager（Context + Reducer）
Context + Reducerでoverlayを一元管理します。どこからでも呼び出せるシンプルなactionを使い、modal/toast用の単一storeを作ります。
「Global Overlay Manager（Context + Reducer）」はCoddyKit上の無料React Academyレッスンです。 これはレッスン2/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全3レッスンが含まれています。
グローバルマネージャーを使う理由
目標：すべてのオーバーレイを1か所から制御します。
- Context でアクションを公開します
- Reducer で状態を管理します
- モーダルはスタックし、トーストはキューに入れます
設計ルール
- オーバーレイ用の単一ストアを保持します
- openModal/closeTop/showToast を公開します
- Portal 経由でレイヤーをレンダーします
- role="dialog"、Escape、バックドロップなど、アクセシビリティの基本を維持します
ストア：context + reducer
小さなストアを作成します。モーダルとトーストのスタック、およびシンプルなアクションを用意します。
<div id="root"></div>コンポーネントからマネージャーを使う
どのコンポーネントからでもopenModal／showToastを呼び出せるため、propsのバケツリレーは不要です。
<div id="root"></div>スタックとEscapeで最上位を閉じる
スタックをサポートします。内部から別のモーダルを開き、Escapeで最上位のモーダルを閉じます。
<div id="root"></div>ヒントとチェックリスト
- オーバーレイの状態をグローバルに保ちます
- 小さなアクションを公開します
- Portalでレイヤーを描画します
- Escape／背景クリックで最上位のレイヤーを閉じます
オーバーレイマネージャーの概念チェック
振り返り
振り返り：グローバルなオーバーレイストア（context + reducer）によって、モーダルとトーストを一元管理できます。コンポーネントはアクションをdispatchし、レイヤーはPortal経由で描画されます。Escapeや背景クリックで最上位のレイヤーを閉じます。
よくある質問
「Global Overlay Manager（Context + Reducer）」レッスンは無料ですか？
はい。「Global Overlay Manager（Context + Reducer）」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全3レッスンが含まれています。
「Global Overlay Manager（Context + Reducer）」で何を学びますか？
Context + Reducerでoverlayを一元管理します。どこからでも呼び出せるシンプルなactionを使い、modal/toast用の単一storeを作ります。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
React Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/3です。
「Global Overlay Manager（Context + Reducer）」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このReact Academyレッスンでコードを書いて実行できますか？
はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Portal、Focus Trap、Escapeで閉じる操作
- Global Overlay Manager（Context + Reducer）
- アクセシビリティのためのAnnouncements（aria-live）