ReactのuseContextについて学ぶ。

本記事ではReactのuseContextについて初心者向けに解説します。

「コンポーネント間でデータの受け渡しが大変...」
「propsのバケツリレーがつらい...」

そんな悩みを抱えているなら、useContextがおすすめです。
今回の記事では、以下のことが分かります。

• useContextの基本的な使い方
• いつuseContextを使うべきか
• 具体的なコード例

それでは見ていきましょう。

useContextとは？

useContextは「コンポーネント間でデータを共有するための機能」です。
分かりやすく言うと...

データを1箇所で管理して
必要な場所で自由に取り出せる

という便利な機能です。
たとえば、こんな状況で使えます。

• ユーザーの設定を画面全体で共有したい
• ログイン状態をどこでも参照したい
• 言語設定をアプリ全体で使いたい

useContextを使う前と後で何が変わるの？

まずは、useContextを使わない場合を見てみましょう。

// useContextを使わない場合
function App() {
  const userName = "太郎";
  return (
    <div>
      <Header userName={userName} />
      <Main userName={userName} />
      <Footer userName={userName} />
    </div>
  );
}

function Header({ userName }) {
  return <Nav userName={userName} />;
}

function Nav({ userName }) {
  return <div>ようこそ、{userName}さん</div>;
}

「あれ？何か面倒くさそう...」
そうです。データを使いたい場所まで、propsを次々と渡していく必要があります。

これが、useContextを使うとどう変わるかというと...

// useContextを使う場合
function App() {
  return (
    <UserContext.Provider value="太郎">
      <div>
        <Header />
        <Main />
        <Footer />
      </div>
    </UserContext.Provider>
  );
}

function Nav() {
  const userName = useContext(UserContext);
  return <div>ようこそ、{userName}さん</div>;
}

シンプルになりましたね。
useContextを使うと、必要な場所で直接データを取り出せます。

useContextの使い方：3ステップで解説

useContextは以下の3ステップで使えます。

ステップ1：コンテキストを作る

まずは、データを入れる箱を作ります。

// UserContext.js
import { createContext } from 'react';
export const UserContext = createContext();

ステップ2：データを準備する

次に、作った箱にデータを入れます。

// App.js
import { UserContext } from './UserContext';

function App() {
  const [user, setUser] = useState("太郎");

  return (
    <UserContext.Provider value={user}>
      {/* ここの中ならどこでもデータが使えます */}
      <div>
        <Header />
        <Main />
        <Footer />
      </div>
    </UserContext.Provider>
  );
}

ステップ3：データを使う

最後に、必要な場所でデータを取り出します。

// Nav.js
import { useContext } from 'react';
import { UserContext } from './UserContext';

function Nav() {
  const userName = useContext(UserContext);
  return <div>ようこそ、{userName}さん</div>;
}

これで完了です。

実践例：ダークモード切り替えを作ってみよう

では、実際にuseContextを使って、ダークモード切り替え機能を作ってみましょう。
まずはコンテキストを作ります

// ThemeContext.js
import { createContext } from 'react';
export const ThemeContext = createContext();

次に、テーマの切り替え機能を追加

// App.js
function App() {
  const [isDark, setIsDark] = useState(false);

  return (
    <ThemeContext.Provider value={{ isDark, setIsDark }}>
      <div className={isDark ? 'dark' : 'light'}>
        <Header />  {/* ThemeButtonをここに置くことが多い */}
        <Main />
        <Footer />
      </div>
    </ThemeContext.Provider>
  );
}

// Header.js
function Header() {
  return (
    <header>
      <h1>私のアプリ</h1>
      <ThemeButton />  {/* ここでThemeButtonを使用 */}
    </header>
  );
}

最後に、切り替えボタンを作る

// ThemeButton.js
function ThemeButton() {
  const { isDark, setIsDark } = useContext(ThemeContext);

  return (
    <button onClick={() => setIsDark(!isDark)}>
      {isDark ? '🌞 ライトモード' : '🌙 ダークモード'}
    </button>
  );
}

たったこれだけで、ダークモード切り替えができました！

useContextはいつ使うべき？

useContextは、以下の場合におすすめです。

• アプリ全体で使う設定がある
• 多くのコンポーネントで同じデータを使いたい
• propsのバケツリレーを避けたい

でも、すべてのデータ共有にuseContextを使う必要はありません。
小規模な状態管理なら、普通のpropsで十分です。

まとめ：useContextの使い方

今回の内容をまとめると：

• useContextは、データを共有するための便利な機能
• 使い方は3ステップ（作る・準備する・使う）
• アプリ全体の設定などを共有するのに最適

最初は難しく感じるかもしれません。
でも、基本的な使い方を理解してしまえば、とても便利な機能です。
ぜひ、実際のプロジェクトで試してみてください！

【よくある質問】

Q. 複数のコンテキストは使える？
A. はい、必要に応じて複数のコンテキストを使えます。ただし、使いすぎると管理が大変になるので注意！

Q. パフォーマンスは大丈夫？
A. コンテキストの値が変更されると、それを使用しているコンポーネントは再レンダリングされます。必要な場所でのみ使うようにしましょう。