ReactでuseStateを活用したUIテーマ切り替えガイド

Reactを使ったWebアプリケーション開発では、ユーザーエクスペリエンスを向上させるためにテーマ切り替え機能を実装することがよくあります。たとえば、ダークモードとライトモードの切り替えは、視覚的な快適さを提供するだけでなく、アクセシビリティを向上させる重要な要素です。本記事では、Reactの基本的な状態管理フックであるuseStateを利用し、テーマの状態を管理し、切り替え機能を簡単に構築する方法を詳しく解説します。この手法は初心者から中級者まで適しており、Reactの基礎を理解しながら実践的なスキルを習得できる内容となっています。

Reactにおけるテーマ管理の基本
1. テーマ管理の目的
2. Reactでの実現方法
useStateの役割と仕組み
実装手順：テーマ切り替えの基礎
テーマ設定を効率化するコツ
実装例：ダークモードとライトモードの切り替え
カスタムテーマの作成と拡張
LocalStorageでテーマ設定を保存
ユーザーインターフェースへの適用例
まとめ

Reactにおけるテーマ管理の基本

Reactでテーマ管理を行う場合、テーマとは、UIの外観やスタイルに関する設定の集合を指します。具体的には、背景色、フォントカラー、ボタンのデザインなどが含まれます。これらの設定を切り替えることで、ユーザーの好みに応じた柔軟なUIを提供できます。

テーマ管理の目的

テーマ管理の主な目的は次の通りです：

ユーザーエクスペリエンスの向上：例えば、ダークモードは夜間の目の疲れを軽減します。
ブランドの一貫性：異なるブランドテーマを切り替えることで、アプリケーションを複数のクライアントに対応させることができます。

Reactでの実現方法

Reactでは、テーマ管理を効率的に行うために、以下の方法が一般的です：

状態管理フックの利用：useStateやuseReducerを使い、テーマの状態を管理します。
コンテキストAPI：テーマの状態をアプリ全体で共有する場合に使用します。
CSS変数の活用：スタイルの動的切り替えを簡単に行うために役立ちます。

テーマ管理の基本的な概念を押さえることで、次の段階で具体的な実装に取り組む準備が整います。

useStateの役割と仕組み

ReactのuseStateフックは、コンポーネント内で状態を管理するための基本的な機能を提供します。テーマ切り替えでは、このフックを利用して現在のテーマ状態を保持し、ユーザーの操作によって動的に切り替えることが可能です。

useStateの基本構文

useStateはReactからインポートして使用し、以下のような構文で利用します。

const [state, setState] = useState(initialValue);

state：現在の状態を保持する変数です。テーマ管理では、現在のテーマ（例: “light” や “dark”）を格納します。
setState：状態を更新するための関数です。ユーザー操作に応じて新しいテーマをセットします。
initialValue：状態の初期値です。テーマ切り替えでは “light” などのデフォルトテーマを指定します。

テーマ切り替えでの活用

テーマ切り替えでは、useStateを以下のように使用します。

import React, { useState } from 'react';

function ThemeSwitcher() {
  const [theme, setTheme] = useState("light");

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
  };

  return (
    <div className={`app ${theme}`}>
      <button onClick={toggleTheme}>
        {theme === "light" ? "Switch to Dark Mode" : "Switch to Light Mode"}
      </button>
    </div>
  );
}

コード解説

useStateを使ってthemeという状態変数を定義しています。初期値は”light”です。
toggleTheme関数で状態を更新します。現在の状態に基づき、”light”と”dark”を切り替えます。
状態に応じて、divのクラス名やボタンの表示テキストを動的に変更します。

状態更新の仕組み

useStateで状態を更新すると、Reactは該当コンポーネントを再レンダリングします。その結果、テーマがリアルタイムで変更され、UIに反映されます。このシンプルな仕組みにより、柔軟な状態管理が可能になります。

useStateの理解は、テーマ切り替えだけでなく、React全般での状態管理の基盤となる重要なスキルです。

実装手順：テーマ切り替えの基礎

テーマ切り替えをReactで実装する際には、基本的な手順を理解することが重要です。このセクションでは、テーマ切り替えの基本的な流れを具体的なコード例を交えて解説します。

手順1: 必要なセットアップ

まず、Reactアプリを作成し、テーマ切り替えのための初期構造を用意します。

import React, { useState } from "react";
import "./App.css"; // スタイルの定義

function App() {
  const [theme, setTheme] = useState("light"); // 初期テーマを設定

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light")); // テーマを切り替える
  };

  return (
    <div className={`app ${theme}`}>
      <h1>React Theme Switcher</h1>
      <button onClick={toggleTheme}>
        {theme === "light" ? "Switch to Dark Mode" : "Switch to Light Mode"}
      </button>
    </div>
  );
}

export default App;

手順2: スタイルの準備

App.cssファイルでテーマごとのスタイルを定義します。lightとdarkのクラスを切り替えることでテーマを変更します。

.app {
  text-align: center;
  padding: 20px;
}

.app.light {
  background-color: white;
  color: black;
}

.app.dark {
  background-color: black;
  color: white;
}

button {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

手順3: 挙動を確認

アプリを起動し、ボタンをクリックすることでテーマが切り替わることを確認します。

初期状態ではlightテーマが適用されます。
ボタンをクリックすると、darkテーマが適用されます。
ボタンのテキストも現在のテーマに応じて変化します。

手順4: コードの最適化

テーマ切り替えロジックをシンプルに保つために、以下のようにリファクタリングも検討できます。

const toggleTheme = () => setTheme(theme === "light" ? "dark" : "light");

この基本構造がテーマ切り替えの実装の出発点です。この後、カスタムテーマの拡張や、LocalStorageを用いた永続化の方法など、さらなる発展を学ぶことができます。

テーマ設定を効率化するコツ

テーマ管理を行う際、アプリケーションの規模が大きくなるにつれて、コードの複雑性が増加する可能性があります。このセクションでは、テーマ設定を効率化し、保守性を向上させるためのコツを紹介します。

1. 状態管理を分離する

テーマの状態を個々のコンポーネントで直接管理するのではなく、状態を分離して管理すると効率が上がります。ReactのコンテキストAPIを使うことで、テーマ情報をアプリケーション全体で簡単に共有できます。

import React, { createContext, useState, useContext } from "react";

// コンテキストの作成
const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light");

  const toggleTheme = () => setTheme(theme === "light" ? "dark" : "light");

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// カスタムフック
export const useTheme = () => useContext(ThemeContext);

このコードにより、どのコンポーネントからも簡単にuseThemeを使ってテーマ状態を取得・操作できます。

2. カスタムフックでロジックを再利用する

カスタムフックを作成することで、テーマ切り替えのロジックを一元化し、コードの重複を削減できます。

export function useThemeManager() {
  const [theme, setTheme] = useState("light");

  const toggleTheme = () => setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));

  return { theme, toggleTheme };
}

これにより、複数のコンポーネント間で簡単にテーマ管理ロジックを共有できます。

3. テーマ定義を外部化する

テーマに関連するスタイルや設定値を外部ファイルに保存して、メンテナンスを簡単にします。

// theme.js
export const themes = {
  light: {
    backgroundColor: "white",
    color: "black",
  },
  dark: {
    backgroundColor: "black",
    color: "white",
  },
};

コンポーネントでは、このテーマ定義を動的に適用します。

import { themes } from "./theme";

function App() {
  const { theme, toggleTheme } = useTheme();
  const currentTheme = themes[theme];

  return (
    <div style={{ backgroundColor: currentTheme.backgroundColor, color: currentTheme.color }}>
      <h1>Dynamic Theme Switcher</h1>
      <button onClick={toggleTheme}>
        {theme === "light" ? "Switch to Dark Mode" : "Switch to Light Mode"}
      </button>
    </div>
  );
}

4. テストとデバッグのしやすさを考慮する

テーマ切り替え機能をテスト可能にするため、ユニットテストやスナップショットテストを導入します。テーマ定義を別ファイルにすることで、個別にテストを実行できます。

5. UIライブラリの活用

Material-UIやChakra UIのようなUIライブラリを利用すると、テーマ設定が簡単になります。これらのライブラリはテーマプロバイダーを標準で提供しており、カスタムテーマの適用も容易です。

テーマ管理の効率化は、開発者の作業負担を軽減し、アプリケーション全体の保守性を向上させます。これらのコツを活用して、堅牢かつ再利用可能なテーマ切り替え機能を構築しましょう。

実装例：ダークモードとライトモードの切り替え

Reactでダークモードとライトモードを切り替える基本的な実装例を紹介します。この例では、状態管理と動的なスタイル変更を組み合わせて、簡単にテーマを切り替える方法を説明します。

コード例

以下は、ダークモードとライトモードを切り替えるReactコンポーネントのコードです。

import React, { useState } from "react";
import "./App.css";

function App() {
  const [theme, setTheme] = useState("light"); // 初期テーマ

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
  };

  return (
    <div className={`app ${theme}`}>
      <h1>{theme === "light" ? "Light Mode" : "Dark Mode"}</h1>
      <button onClick={toggleTheme}>
        {theme === "light" ? "Switch to Dark Mode" : "Switch to Light Mode"}
      </button>
    </div>
  );
}

export default App;

CSSでのスタイリング

テーマごとのスタイルをCSSで定義し、クラス名を動的に変更することでテーマを切り替えます。

/* App.css */
.app {
  text-align: center;
  transition: background-color 0.5s, color 0.5s;
  padding: 20px;
}

.app.light {
  background-color: white;
  color: black;
}

.app.dark {
  background-color: black;
  color: white;
}

button {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

button:hover {
  background-color: grey;
  color: white;
}

動作説明

useStateでテーマの状態を管理しています。初期テーマはlightです。
toggleTheme関数で現在のテーマを確認し、lightとdarkを切り替えます。
div要素に適用するクラス名を状態に応じて変更することで、CSSのスタイルが動的に適用されます。
ボタンのテキストも現在のテーマに応じて変化します。

改良ポイント

この基本実装をさらに発展させるために、以下を検討できます：

LocalStorageの導入：テーマ状態を永続化し、ページリロード後も選択したテーマを保持する。
トランジションエフェクト：CSSアニメーションを追加して、テーマ切り替え時の視覚的な効果を向上。
アクセシビリティ：ボタンにキーボード操作やスクリーンリーダー対応のラベルを追加。

この実装例は、Reactアプリでテーマ切り替え機能を組み込む際の基礎として役立ちます。次のセクションでは、カスタムテーマを作成して拡張する方法を解説します。

カスタムテーマの作成と拡張

Reactアプリケーションでカスタムテーマを作成し、アプリケーションに適用する方法を紹介します。このセクションでは、カスタムテーマの作成手順から、テーマを拡張するための実践的な方法までを解説します。

1. カスタムテーマの定義

まず、テーマごとのスタイル設定を構造化します。テーマ設定をオブジェクトとして定義し、拡張可能な形式にします。

// theme.js
export const themes = {
  light: {
    background: "#ffffff",
    color: "#000000",
    buttonBackground: "#f0f0f0",
    buttonColor: "#000000",
  },
  dark: {
    background: "#000000",
    color: "#ffffff",
    buttonBackground: "#333333",
    buttonColor: "#ffffff",
  },
  custom: {
    background: "#282c34",
    color: "#61dafb",
    buttonBackground: "#20232a",
    buttonColor: "#61dafb",
  },
};

2. コンテキストAPIでテーマを管理

アプリケーション全体でテーマを共有するために、コンテキストAPIを使用します。

import React, { createContext, useContext, useState } from "react";
import { themes } from "./theme";

const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState("light");

  const toggleTheme = (selectedTheme) => setTheme(selectedTheme);

  return (
    <ThemeContext.Provider value={{ theme: themes[theme], toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => useContext(ThemeContext);

3. カスタムテーマの適用

カスタムテーマを適用し、ユーザーが複数のテーマから選択できるようにします。

import React from "react";
import { useTheme } from "./ThemeProvider";

function App() {
  const { theme, toggleTheme } = useTheme();

  return (
    <div style={{ background: theme.background, color: theme.color, padding: "20px" }}>
      <h1>Custom Theme Example</h1>
      <button
        style={{
          background: theme.buttonBackground,
          color: theme.buttonColor,
          padding: "10px 20px",
          border: "none",
          borderRadius: "5px",
          cursor: "pointer",
        }}
        onClick={() => toggleTheme("dark")}
      >
        Switch to Dark Mode
      </button>
      <button
        style={{
          background: theme.buttonBackground,
          color: theme.buttonColor,
          padding: "10px 20px",
          border: "none",
          borderRadius: "5px",
          cursor: "pointer",
          marginLeft: "10px",
        }}
        onClick={() => toggleTheme("custom")}
      >
        Switch to Custom Mode
      </button>
    </div>
  );
}

export default App;

4. テーマの拡張

カスタムテーマを拡張する際は、新しいスタイルやコンポーネントのデザインを追加します。

レスポンシブデザイン：テーマ設定にブレークポイントを追加してデバイスごとに適応。
アクセントカラー：ユーザーが選択できるアクセントカラーをテーマ設定に追加。
アニメーション：テーマ変更時のアニメーション効果を追加して視覚的な魅力を向上。

export const themes = {
  ...themes,
  customResponsive: {
    background: "#20232a",
    color: "#61dafb",
    buttonBackground: "#282c34",
    buttonColor: "#61dafb",
    breakpoints: {
      mobile: "480px",
      tablet: "768px",
      desktop: "1024px",
    },
  },
};

5. ユーザー設定の保存

テーマ選択をLocalStorageに保存して、次回の訪問時に選択したテーマを自動的に適用します。

const [theme, setTheme] = useState(() => {
  return localStorage.getItem("theme") || "light";
});

const toggleTheme = (selectedTheme) => {
  setTheme(selectedTheme);
  localStorage.setItem("theme", selectedTheme);
};

まとめ

この実装により、カスタムテーマを作成し、アプリ全体に統一感を持たせることができます。また、テーマの拡張性を持たせることで、ユーザーのニーズに応じた柔軟なUIを提供できます。次に、テーマ設定の永続化について詳しく説明します。

LocalStorageでテーマ設定を保存

テーマ切り替え機能において、ユーザーが選択したテーマをページリロード後も保持するためには、ブラウザのLocalStorageを活用するのが便利です。このセクションでは、LocalStorageを使ったテーマ状態の永続化方法を解説します。

1. LocalStorageの基本概念

LocalStorageは、ブラウザにデータを保存するための仕組みです。データは文字列として保存され、ページを閉じても保持されます。Reactでは、LocalStorageを使ってテーマの状態を簡単に保存および読み込むことができます。

2. LocalStorageを使ったテーマ管理

テーマ状態をLocalStorageに保存する基本的な実装例を以下に示します。

import React, { useState, useEffect } from "react";

function App() {
  // 初期状態をLocalStorageから取得
  const [theme, setTheme] = useState(() => {
    return localStorage.getItem("theme") || "light"; // デフォルトは"light"
  });

  // テーマの切り替え
  const toggleTheme = () => {
    const newTheme = theme === "light" ? "dark" : "light";
    setTheme(newTheme);
    localStorage.setItem("theme", newTheme); // 新しいテーマを保存
  };

  return (
    <div className={`app ${theme}`}>
      <h1>{theme === "light" ? "Light Mode" : "Dark Mode"}</h1>
      <button onClick={toggleTheme}>
        {theme === "light" ? "Switch to Dark Mode" : "Switch to Light Mode"}
      </button>
    </div>
  );
}

export default App;

3. 実装のポイント

テーマの初期化
useStateの初期値に関数を渡すことで、LocalStorageに保存されたテーマを効率よく読み込めます。

   const [theme, setTheme] = useState(() => localStorage.getItem("theme") || "light");

テーマの保存
localStorage.setItemを使い、テーマを切り替えるたびに新しいテーマを保存します。
クラス名の変更
テーマ状態に応じてdiv要素のクラス名を動的に変更し、適切なスタイルを適用します。

4. 初回ロード時のスタイル適用

ページがロードされる際に、一時的なテーマのちらつきを防ぐため、初期テーマを適用するCSSを用意します。

/* App.css */
body {
  transition: background-color 0.3s, color 0.3s;
}

body.light {
  background-color: white;
  color: black;
}

body.dark {
  background-color: black;
  color: white;
}

JavaScriptでbodyタグにテーマクラスを適用する方法も検討できます。

useEffect(() => {
  document.body.className = theme;
}, [theme]);

5. LocalStorageの拡張活用

カスタムテーマの保存
カスタムテーマも同様にLocalStorageに保存し、ページリロード後に反映させることができます。
他のデータの保存
LocalStorageを使って、アクセントカラーやフォントサイズなど、追加のテーマ設定も保存できます。

6. デバッグとテスト

ブラウザ開発者ツール
ブラウザの開発者ツールでlocalStorageを確認して、データが正しく保存されているか検証します。

  console.log(localStorage.getItem("theme")); // 現在のテーマを確認

リセット機能
テーマをリセットする機能を追加して、LocalStorageからテーマデータを削除できるようにします。

  const resetTheme = () => {
    setTheme("light");
    localStorage.removeItem("theme");
  };

まとめ

LocalStorageを使うことで、テーマ設定を永続化し、ユーザーの利便性を向上させることができます。この仕組みは、テーマ切り替え機能だけでなく、他の設定項目にも応用可能です。次のセクションでは、これをユーザーインターフェースに統合する具体例を示します。

ユーザーインターフェースへの適用例

テーマ切り替え機能をアプリケーションのユーザーインターフェース（UI）に統合する具体例を示します。UI要素全体にテーマ設定を反映させることで、一貫性のあるデザインを実現します。

1. 全体のレイアウトにテーマを適用

以下の例では、アプリケーション全体にテーマを適用し、各コンポーネントがテーマの影響を受けるようにします。

import React from "react";
import { ThemeProvider, useTheme } from "./ThemeProvider";
import "./App.css";

function Header() {
  const { theme } = useTheme();
  return (
    <header style={{ backgroundColor: theme.background, color: theme.color, padding: "10px" }}>
      <h1>React Theme Application</h1>
    </header>
  );
}

function Footer() {
  const { theme } = useTheme();
  return (
    <footer style={{ backgroundColor: theme.background, color: theme.color, padding: "10px" }}>
      <p>© 2024 Your Company</p>
    </footer>
  );
}

function App() {
  const { theme, toggleTheme } = useTheme();

  return (
    <div style={{ background: theme.background, color: theme.color, minHeight: "100vh" }}>
      <Header />
      <main style={{ padding: "20px" }}>
        <p>Welcome to the React Theme Switcher Example!</p>
        <button
          style={{
            background: theme.buttonBackground,
            color: theme.buttonColor,
            padding: "10px 20px",
            border: "none",
            borderRadius: "5px",
            cursor: "pointer",
          }}
          onClick={() => toggleTheme("dark")}
        >
          Switch to Dark Mode
        </button>
        <button
          style={{
            background: theme.buttonBackground,
            color: theme.buttonColor,
            padding: "10px 20px",
            border: "none",
            borderRadius: "5px",
            cursor: "pointer",
            marginLeft: "10px",
          }}
          onClick={() => toggleTheme("light")}
        >
          Switch to Light Mode
        </button>
      </main>
      <Footer />
    </div>
  );
}

export default function RootApp() {
  return (
    <ThemeProvider>
      <App />
    </ThemeProvider>
  );
}

2. 複数のコンポーネントへのテーマ適用

上記コードでは、HeaderとFooterのような複数のコンポーネントにテーマ設定を適用しています。これにより、アプリ全体が統一されたデザインを持つようになります。

3. 動的なスタイルの適用

テーマ設定に応じてスタイルを動的に適用することで、以下のようなデザインを実現します：

背景色とテキストカラー：各コンポーネントの背景とテキストのスタイルがテーマに連動。
ボタンスタイル：ボタンの背景色やテキスト色がテーマによって切り替わります。

4. アクセシビリティへの配慮

テーマ切り替えは見た目だけでなく、アクセシビリティの向上にも寄与します。以下を考慮します：

コントラスト比：テキストと背景のコントラスト比を保つことで、視認性を向上。
操作しやすいボタン：ボタンの大きさや間隔を適切に設定。

5. レスポンシブデザインの統合

テーマ設定をレスポンシブデザインに統合し、異なるデバイスで適切なUIを提供します。

const themes = {
  light: {
    background: "#ffffff",
    color: "#000000",
    buttonBackground: "#f0f0f0",
    buttonColor: "#000000",
  },
  dark: {
    background: "#000000",
    color: "#ffffff",
    buttonBackground: "#333333",
    buttonColor: "#ffffff",
  },
  breakpoints: {
    mobile: "480px",
    tablet: "768px",
    desktop: "1024px",
  },
};

6. テーマ切り替えのユーザー体験

ボタン操作一つでテーマが瞬時に切り替わるシンプルなUIを提供します。さらに、切り替え操作時にCSSのトランジション効果を追加することで、視覚的な魅力を高めます。

body {
  transition: background-color 0.3s, color 0.3s;
}

まとめ

テーマ切り替え機能をUI全体に統合することで、アプリケーションに統一感と高いユーザー体験を提供できます。次は、このテーマ管理を整理し、記事全体を振り返ります。

まとめ

本記事では、Reactを使ったテーマ切り替えの実装方法を解説しました。テーマ管理の基本から、useStateによる状態管理、LocalStorageを活用したテーマ設定の永続化、さらに複数のコンポーネントに適用する方法まで詳しく説明しました。

テーマ切り替えは、ユーザーエクスペリエンスを向上させる重要な機能です。今回紹介した手法を応用すれば、ダークモードやカスタムテーマを簡単に追加でき、アプリケーションの魅力を高めることができます。さらに、アクセシビリティやレスポンシブデザインを統合することで、より幅広いユーザーに対応したUIを構築することが可能です。

この知識を活かし、自分のReactプロジェクトにテーマ切り替え機能を実装してみてください！