先生と生徒の会話形式で理解しよう

生徒

「Reactでコンポーネント同士がデータをやり取りするにはどうすればいいんですか？」

先生

「コンポーネント間でのデータ共有には、Context（コンテキスト）という仕組みを使うのが便利です。」

生徒

「それってどういう仕組みなんですか？難しそう…」

先生

「大丈夫ですよ！Contextの考え方や書き方を一緒にゆっくり見ていきましょう。」

1. Reactでコンポーネント間のデータ共有にContextを使う理由

Reactでは、コンポーネントという部品をたくさん組み合わせてアプリを作ります。その中で「親コンポーネントから子コンポーネントへデータを渡す」といったケースがよく出てきます。これは「props（プロップス）」という仕組みで実現できます。

しかし、複数の階層をまたいでデータを渡す必要があるとき、毎回すべてのコンポーネントにpropsを通すのはとても大変です。たとえば「一番上の親から、4階層下の孫コンポーネントに値を渡したい」とき、間の3つのコンポーネントにも全部propsを書く必要があります。

このようなときに役立つのが、ReactのContext（コンテキスト）です。Contextを使えば、どこからでも必要なデータを取り出せるようになります。まるで「空気」のように、どこにいても吸える情報というイメージです。

2. Contextの基本的な使い方（ステップ形式）

ReactでContextを使うためには、次の3ステップで構成します。

1. Contextを作る
2. Provider（提供者）でデータを渡す
3. Consumer（利用者）でデータを受け取る

3. Contextを使ったサンプルコード

以下は、ボタンをクリックするとメッセージが変わり、それを子コンポーネントで表示する例です。Contextを使って、データを親から子に渡しています。


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

// 1. Contextを作成
const MessageContext = createContext();

function MessageProvider({ children }) {
  const [message, setMessage] = useState("ようこそReactの世界へ！");

  return (
    <MessageContext.Provider value={{ message, setMessage }}>
      {children}
    </MessageContext.Provider>
  );
}

function DisplayMessage() {
  const { message } = useContext(MessageContext);
  return <h1>{message}</h1>;
}

function ChangeMessageButton() {
  const { setMessage } = useContext(MessageContext);
  return (
    <button onClick={() => setMessage("ボタンがクリックされました！")}>
      メッセージを変える
    </button>
  );
}

function App() {
  return (
    <MessageProvider>
      <DisplayMessage />
      <ChangeMessageButton />
    </MessageProvider>
  );
}

export default App;

（画面に「ようこそReactの世界へ！」と表示され、ボタンをクリックすると「ボタンがクリックされました！」に変わります）

4. Contextを使うときのポイントと注意点

Contextを使うと、propsを何段階も渡す必要がなくなり、コードがとてもスッキリします。ただし、あまりにも多くのデータをContextに詰め込むと、逆に管理が難しくなることがあります。

たとえば、ユーザー情報、設定、テーマ、言語など、用途ごとにContextを分けるのが良い設計です。

また、Contextの変更は、それを使っているすべてのコンポーネントに影響します。そのため、更新のたびに多くの箇所が再描画（画面を再表示）される可能性があります。必要なデータだけをContextに入れるように心がけましょう。

5. Contextを現実世界に例えると？

Contextを簡単に言えば「家の中に貼ってあるホワイトボード」のようなものです。親がそのホワイトボードに「今日の予定：ピクニック」と書いておけば、子どもやおじいちゃんおばあちゃんもそれを見て予定が分かります。

propsは「直接口で伝える情報」、Contextは「みんなが見る掲示板」。そんなイメージです。

6. useContextフックの役割とは？

サンプルコードの中に登場したuseContextは、Reactが用意している特別な道具です。このフックを使うと、Contextの中身を取り出すことができます。

useContextの使い方はとてもシンプルで、const 値 = useContext(作成したContext)のように書くだけです。これだけで、どこからでも共通のデータが使えるようになります。

7. なぜContextは初心者にもおすすめなのか？

Reactを使い始めたばかりの人でも、Contextを理解することで「親から子」だけでなく「遠く離れたコンポーネント同士」でのやり取りができるようになります。

はじめは難しそうに見えても、実際に使ってみるととても便利な仕組みだと感じるはずです。特にアプリが大きくなると、その効果は絶大です。

まとめ

ReactのContextは、コンポーネント間で効率よくデータを共有するための強力な仕組みです。この記事で確認したように、propsだけで深い階層へデータを届けようとすると「階層が増えるほど渡す作業が煩雑になる」という問題が発生します。そこで役立つのがContextで、Providerを通して一度データを共有領域に置き、必要な場所でuseContextを使って取り出すことで、どの階層からでも同じ情報にアクセスできます。こうした構造は規模の大きいアプリケーションほど効果が大きく、特にユーザー情報、テーマ設定、アプリ全体の状態を管理する場面で力を発揮します。

初心者の方にとって重要なのは、Contextを使うことで「データを無理にpropsで渡し続ける必要がなくなる」という点をしっかり理解することです。この記事に登場したサンプルのように、ProviderでmessageとsetMessageを共有しておけば、階層をまたいで子コンポーネントが簡単にその値を取得して表示や更新ができます。特にuseContextの書き方はシンプルで、必要なデータだけを取り出せるためReactの学習初期から役立つ知識です。Contextは使いどころを誤るとデータが増えすぎて管理が難しくなることもあるので、用途ごとにContextを分ける工夫も覚えておくと良いでしょう。

また、Contextの概要を「掲示板」「ホワイトボード」「空気のような共有情報」といった例えとして理解しておくと、propsとの違いが明確になります。propsは「個別に手渡しする情報」、Contextは「必要な人がいつでも取りに行ける場所」という対比を押さえることで、Reactアプリ全体の情報設計がよりスムーズになります。アプリの状態管理が複雑になる前に、この仕組みを習得しておくことで、後々の拡張が格段に楽になるため、初心者の段階から実際に触れて慣れていくことが大切です。

useContextはとても直感的に使えるため、子コンポーネントで受け取るべき情報が明確な場合に特に便利です。Contextの値が更新されると、関連するコンポーネントが自動的に再描画されるため、アプリ全体で一貫した状態を保つことができます。ただし再描画が多発するとパフォーマンスに影響が出ることもあるため、必要なデータだけをContextに格納し、役割ごとにContextを分割する設計を意識すると良いでしょう。ReactのContextは、アプリケーションの設計を整理し、より読みやすく扱いやすい構造にするための非常に強力な手段なのです。

サンプルプログラムの振り返り

以下のサンプルは、Contextを使ってテーマ（明るいテーマ・暗いテーマ）を切り替える仕組みを再現した例です。「共通の設定を複数のコンポーネントで扱いたい」という現実的な場面をイメージしながら確認してみましょう。


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

// Contextの作成
const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("ライトテーマ");

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

function ThemeDisplay() {
  const { theme } = useContext(ThemeContext);
  return <h2>現在のテーマ：{theme}</h2>;
}

function ThemeToggleButton() {
  const { setTheme } = useContext(ThemeContext);
  return (
    <button onClick={() => setTheme("ダークテーマ")}>
      テーマを変更する
    </button>
  );
}

function App() {
  return (
    <ThemeProvider>
      <ThemeDisplay />
      <ThemeToggleButton />
    </ThemeProvider>
  );
}

export default App;

このサンプルではテーマ情報をContextに保存し、Providerを通して全体に渡しています。子コンポーネントではuseContextを利用して必要な情報だけを取り出し、ボタン操作でテーマを変更できるようにしています。こうした構造は、実際のWebアプリケーションでユーザー設定やデザインテーマを切り替える場面によく使われます。ContextとuseContextの連携はとても直感的で、シンプルな構成でも強力なデータ共有が可能になることがわかる例です。

先生と生徒の振り返り会話

生徒「propsを何段階も渡さなくてもデータが共有できるなんて、Contextって便利ですね！」

先生「必要な場所で自由に取り出せる仕組みなので、アプリが大きくなるほど価値が出てきますよ。」

生徒「useContextで簡単に値を取得できるのが驚きでした！」

先生「書き方もシンプルなので、慣れてしまえばとても扱いやすい道具になります。」

生徒「テーマの切り替えの例も実際のアプリで使えそうですね！」

先生「ユーザー設定やUIの変更など、多くの場面で役立つ考え方です。自分のアプリでもぜひ試してみてください。」

生徒「Contextの特徴がよくわかったので、これから積極的に使ってみます！」

先生「今日の理解をベースにすると、状態管理ライブラリの学習もスムーズになりますよ。」