テーマ状態のためのReact Context

まず、コンテキストの形に合ったデフォルト値を指定してcreateContext()を呼び出します: const ThemeContext = createContext({ theme: 'light', toggleTheme: () => {} })。デフォルト値が使われるのは、コンポーネントが親のProviderなしでコンテキストを読み取る場合だけです。これにより、コンポーネントを分離してテストしやすくなります。

ThemeProviderコンポーネントは、テーマに関するすべてのロジックを保持するラッパーです。マウント時にシステム設定を読み取り、themeの状態を管理し、toggleTheme関数を提供して、子要素をThemeContext.Provider value={{ theme, toggleTheme }}でラップします。コンポーネントツリーの上位に配置してください。

子孫コンポーネントであれば、useContext(ThemeContext)を呼び出してテーマにアクセスできます。これにより、themeとtoggleThemeを含む現在のコンテキスト値が返されます。テーマが変わるとコンポーネントは自動的に再レンダリングされるため、propsを何階層も渡さなくても常に最新の状態と同期されます。

CSS変数は、ルート要素に設定されたdata-theme属性に依存します。ThemeProviderに、themeが変わるたびに実行されるuseEffectを追加します: document.documentElement.setAttribute('data-theme', theme)。これにより、Reactの状態とCSSレイヤーをシームレスに連携できます。

ページを再読み込みしてもユーザーの選択を保持するには、テーマが変わるたびにlocalStorageへ書き込みます: localStorage.setItem('theme', theme)。このロジックをuseLocalStorageカスタムフックにまとめれば、stateのようなペアを返し、更新のたびに自動的に保存できます。

テーマの状態を初期化する際は、まずlocalStorageから読み取ります: localStorage.getItem('theme')。保存された値がない場合は、window.matchMedia('(prefers-color-scheme: dark)').matchesを使ってシステム設定にフォールバックします。この初期化はマウント時に一度だけ実行されます。

優先順位は、高い順にlocalStorageに保存されたユーザー設定、システムOSの設定、ハードコードされたデフォルト値（通常はライトテーマ）です。この順序により、ユーザーが最終的な決定権を持ちながら、アプリで明示的に選択していない場合はOSの設定も尊重できます。

すべてのコンポーネントで直接useContext(ThemeContext)を呼び出すと、実装の詳細が外部に露出します。代わりにuseThemeフックをエクスポートします: function useTheme() { return useContext(ThemeContext); }。これでコンポーネントはuseThemeをインポートして呼び出すだけで、内部のコンテキストを意識せずに済みます。

toggleTheme関数はlightとdarkを切り替えます: setTheme(prev => prev === 'light' ? 'dark' : 'light')。コンテキストを通じてこの関数を公開すれば、ツリー内のどの場所にあるボタンからでも実行できます。状態は一か所で管理し、切り替えロジックを全体で共有できます。

コンテキスト値のオブジェクトは、ThemeProviderがレンダリングされるたびに再作成されます。useMemoでラップすると、すべてのコンテキスト利用側で発生する不要な再レンダリングを防げます: const value = useMemo(() => ({ theme, toggleTheme }), [theme])。これはコンテキストプロバイダーでよく使われるパフォーマンス最適化です。

テストでは、ThemeProviderをラッパーとして使うカスタムrenderWithThemeユーティリティでレンダリングをラップします。分離したテスト用に、簡易的なモックコンテキストを作成することもできます: ThemeContext.Provider value={{ theme: 'dark', toggleTheme: jest.fn() }}。これにより、特定のテーマ状態でコンポーネントをテストできます。

アプリのテーマを初期化する際、優先順位が最も高いものから低いものへ並ぶ正しい順序はどれですか？

ThemeContextと、テーマの状態を管理してlocalStorageと同期し、ドキュメントにdata-themeを設定するThemeProviderを作成します。利用側ではuseTheme便利フックを使うと、すっきり記述できます。優先順位は、保存された設定、システム設定、デフォルト値の順です。