第19回：Context API入門：Propsバケツリレーを卒業しよう

これまでの学習では、データを「親から子へ」Propsを使って渡してきました（第5回：Props参照）。しかし、アプリが大きくなると、ある問題が発生します。

例えば、「ユーザーのログイン情報」を5階層下のコンポーネントで使いたい場合、途中の4つのコンポーネントはそのデータを使わないのに、ただ下に渡すためだけにPropsを受け取らなければなりません。 これを「Propsバケツリレー（Prop Drilling）」と呼びます。

2026年のReact開発において、このバケツリレーを回避し、どこからでも直接データを取り出せるようにするのが Context API（コンテキストAPI） です。

1. Context APIの3つの主役

Contextを使うには、3つのステップが必要です。

createContext: データの「入れ物」を作る。
Provider: データを「配信」する（親で囲む）。
useContext: データを「受け取る」（子で呼び出す）。

2. 【実践】どこでも使える「ユーザー名」を表示する

Propsを使わずに、深い階層のコンポーネントでユーザー名を表示してみましょう。

JavaScript

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

// 1. Context（入れ物）を作成
const UserContext = createContext<String>("");

export default function App() {
  const [user] = useState("テック太郎");

  return (
    // 2. Providerで包み、渡したい値を value に入れる
    <UserContext.Provider value={user}>
      <div style={{ textAlign: 'center', marginTop: '50px' }}>
        <h1>メイン画面</h1>
        <MiddleComponent />
      </div>
    </UserContext.Provider>
  );
}

// 中間のコンポーネント（Propsは一切受け取らない！）
function MiddleComponent() {
  return (
    <div style={{ border: '1px solid #ccc', padding: '10px' }}>
      <h3>中間のコンポーネント</h3>
      <LastComponent />
    </div>
  );
}

// データを実際に使うコンポーネント
function LastComponent() {
  // 3. useContextを使って、Contextから値を直接取り出す
  const name = useContext(UserContext);

  return (
    <p style={{ color: 'blue' }}>
      こんにちは、<strong>{String(name)}</strong> さん！
    </p>
  );
}

CodeSandboxでContext APIのデータ共有を体験する

3. コードの解説

UserContext.Provider: このタグで囲まれた範囲内であれば、どんなに深い階層でも value に入れたデータにアクセスできます。
useContext(UserContext): 「どのContextから値を取り出すか」を指定します。Propsを一切経由せずにデータが届くのが魔法のようです。