React における明るいモードと暗いモードの切り替え

はじめに

このプロジェクトでは、ユーザーが明るいモードと暗いモードの間で切り替えられる React アプリケーションを作成する方法を学びます。このプロジェクトでは、React Context API と useContext フックの使用方法を示し、グローバルなテーマ状態を管理します。

👀 プレビュー

project preview

🎯 タスク

このプロジェクトでは、以下を学びます。

React の Context API を使用して ThemeContext を作成する方法
App コンポーネントで ThemeContext を使用して、テーマに基づいてアプリ全体のスタイルを変更する方法
Card コンポーネントで ThemeContext を使用して、テーマに基づいてカードのスタイルを変更する方法
App コンポーネントを ThemeProvider でラップして、アプリケーション全体でテーマコンテキストを利用可能にする方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

React Context API を使用してグローバル状態を管理する方法を理解する
useContext フックを適用してコンテキスト値にアクセスする
現在のテーマに基づいて異なるスタイルを実装する
テーマを切り替えてグローバル状態を更新する

プロジェクトをセットアップする

このステップでは、プロジェクトをセットアップして必要な依存関係をインストールする方法を学びます。

コードエディタを開き、プロジェクトディレクトリに移動します。

├── components
│ └── Card.js
├── contexts
│ └── ThemeContext.js
├── App.css
├── App.js
├── index.css
├── index.js
├── reportWebVitals.js
└── setupTests.js

ファイルの説明：

components ディレクトリには、すべてのコンポーネントファイルが含まれています。
contexts ディレクトリには、完成させる必要のある ThemeContext.js ファイルが含まれています。

これは React プロジェクトなので、次のコマンドを実行して依存関係をインストールする必要があります。

npm install

依存関係をインストールした後、次の手順に従ってプロジェクトにアクセスします。

ターミナルで次のコマンドを実行して、ローカルサーバーを起動します。

npm start

コーディング環境の右側にあるウェブサーバーを開きます。次のような静的な表示が見えます。現在、「暗モード」ボタンをクリックしても何も変化しません。

incomplete dark mode button

ThemeContext を作成する

このステップでは、React の Context API を使用して ThemeContext を作成する方法を学びます。以下の手順に従ってこのステップを完了しましょう。

src/contexts ディレクトリにある ThemeContext.js ファイルを開きます。
React.createContext() を使用して ThemeContext を作成します。
```
export const ThemeContext = React.createContext();
```
App コンポーネントをラップし、テーマコンテキストを提供する ThemeProvider コンポーネントを作成します。
```
export const ThemeProvider = (props) => {
  const [theme, setTheme] = React.useState("light");
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {props.children}
    </ThemeContext.Provider>
  );
};
```
ThemeProvider コンポーネントは、theme 状態を "light" に初期化し、theme と setTheme の値をコンテキストに提供します。

App コンポーネントで ThemeContext を使用する

このステップでは、App コンポーネントで ThemeContext を使用して、テーマに基づいてアプリ全体のスタイルを変更する方法を学びます。

src/App.js ファイルを開きます。
useContext フックを使用して、ThemeContext から theme 値にアクセスします。
```
const { theme } = useContext(ThemeContext);
```
theme 値に基づいて異なるスタイルを適用するように、App コンポーネントの JSX を更新します。
```
return (
  <div className={theme === "light" ? "app app-light" : "app app-dark"}>
    <Card></Card>
  </div>
);
```
app-light と app-dark のクラスは、theme 値に基づいてメインの div 要素に適用されます。

Card コンポーネントで ThemeContext を使用する

このステップでは、Card コンポーネントで ThemeContext を使用して、テーマに基づいてカードのスタイルを変更する方法を学びます。

src/components/Card.js ファイルを開きます。
useContext フックを使用して、ThemeContext から theme と setTheme の値にアクセスします。
```
export const Card = () => {
  const { theme, setTheme } = useContext(ThemeContext);
  //...
};
```
テーマを切り替える handleThemeToggle 関数を実装します。
```
const handleThemeToggle = (e) => {
  setTheme(theme === "light" ? "dark" : "light");
};
```
この関数は、ボタンがクリックされたときに ThemeContext 内の theme 値を更新します。

App コンポーネントを ThemeProvider でラップする

この最後のステップでは、アプリケーション全体でテーマコンテキストを利用できるように、App コンポーネントを ThemeProvider でラップする方法を学びます。

src/index.js ファイルを開きます。
ThemeContext.js ファイルから ThemeProvider をインポートします。
```
import { ThemeProvider } from "./contexts/ThemeContext";
```

ReactDOM.render 関数内で App コンポーネントを ThemeProvider でラップします。

root.render(
  <React.StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

これで、App コンポーネントとその子コンポーネントは、useContext フックを使用して ThemeContext から theme と setTheme の値にアクセスできるようになります。

チャレンジを完了した後、効果は次のようになります。

theme switch demonstration gif

おめでとうございます！あなたはこのプロジェクトを完了しました。これで、カードコンポーネント内のボタンをクリックすることで、明るいモードと暗いモードを切り替えることができるようになりました。

まとめ

おめでとうございます！このプロジェクトを完了しました。あなたは実験技術を向上させるために、LabEx でさらに多くの実験を行うことができます。