第72章：`createContext` で「データ置き場」を作る

0. この章でやること 🎯

この章では、

「みんなで共有したいデータ」を入れておく データ置き場（Context） を作る
createContext を使って、その「置き場」をコードで定義する
React 19 でちょっとキレイになった Context の使い方をチラ見する

ところまでやります ✨

ここでは「箱を作るところ」がメインです。箱の中身を取り出すフック（useContext） は、少し先の章でゆっくりやるので安心してね😊

1. Context のイメージを固めよう 🧺

前の章で出てきた「Props のバケツリレー問題」覚えてるかな？親 → 子 → 孫 → ひ孫…と、関係ないコンポーネントを経由しながら props を渡していく、あのしんどいやつです。

Context は、それを解決するための仕組み です。ざっくり言うと：

アプリのどこからでもアクセスできる「みんなのデータ置き場」を作る仕組み

代表的な例だと…

🎨 テーマ（ライト / ダーク）
🌐 選択中の言語（"ja" / "en" …）
🙋‍♀️ ログイン中のユーザー情報
⚙️ アプリの設定（「通知ON/OFF」みたいなやつ）

みたいな 「アプリ全体で使い回したいもの」 を入れておくのにピッタリです。この「置き場」を作る関数が createContext です。(ウィキペディア)

2. `createContext` の正体をチラ見 👀

createContext は React 本体から import する関数です。

import { createContext } from 'react';

この関数に「中に入れるデータの型」と「初期値」を渡すと、 Context オブジェクト というものが返ってきます。

この Context オブジェクトには、ざっくり次の役割があります：

✅ 「この名前のデータ置き場がありますよ〜」と React に教える
✅ 後から useContext で中身を読むときの目印になる
✅ React 19 からは、そのまま <MyContext value={…}> という Provider コンポーネント としても使える（後で実例を見るよ）(Angular Minds)

3. 手を動かそう！`ThemeContext` を作る 🎨

まずは一番イメージしやすい 「テーマ（ライト / ダーク）」 を共有する Context を作ってみます。

3-1. フォルダを用意する 📁

VS Code でプロジェクトを開く
src フォルダの中に contexts フォルダを作る（パス的には src\contexts な感じ）

3-2. `ThemeContext.tsx` を作成 ✏️

src\contexts\ThemeContext.tsx というファイルを新規作成して、こんなコードを書きます👇

// src/contexts/ThemeContext.tsx
import { createContext } from 'react';

// テーマとして扱う文字列の型
export type Theme = 'light' | 'dark';

// テーマ用の「データ置き場」を作る
export const ThemeContext = createContext<Theme>('light');

行ごとの解説 🧐

export type Theme = 'light' | 'dark'; → テーマとしてありえる値を 型で固定 しています。これで VS Code が「theme = 'blue' はダメだよ〜」と教えてくれるようになります。
createContext<Theme>('light'); → createContext に ジェネリクス (<Theme>) を付けてあげることで、「この Context に入るのは Theme 型だけだよ」と TypeScript に教えています。
'light' → Context の 初期値。まだどこからも値が上書きされていないときは、この値が使われます。

この一行で

「ThemeContext という名前の『テーマ置き場』を定義した」

状態になります 🎉

4. 図でイメージしてみる 🧠✨

ThemeContext を使うと、最終的にはこんな感じのイメージになります👇

（まだ「使う」部分は先の章でやるけど、雰囲気だけつかんでおこう！）

ThemeContext が「テーマのデータ置き場」
App がその置き場を使って、Header / Main / Footer にテーマを配る
各コンポーネントは useContext(ThemeContext)（75章で登場）で中身を読む

今はまだ 「ThemeContext という置き場を作っただけ」 の段階ですが、このあと Provider や useContext を覚えると、この図みたいな形でデータが流れるようになります😊

5. React 19 らしい書き方をちょっとだけ ✨

React 19 から、Context オブジェクトをそのまま Provider として使える ようになりました。(Angular Minds)

昔（〜React 18）まではこんな書き方でした：

// 従来の書き方（React 18 まで）
<ThemeContext.Provider value="dark">
  <AppContent />
</ThemeContext.Provider>

React 19 では、これをもっとシンプルに書けます👇

// React 19 の新しい書き方（Context をそのまま Provider に）
<ThemeContext value="dark">
  <AppContent />
</ThemeContext>

ThemeContext そのものがコンポーネントとして使えて、 value に渡した値が「みんなのデータ置き場」に流れていきます。

5-1. ちょっとだけ App で使ってみる（プレビュー）

「詳しく使う」のは 74章以降に取っておいて、ここでは 「置き場を作ったら、こうやって囲うんだな〜」 くらいの軽い感じで眺めてみましょう。

src\App.tsx を、ちょっとだけこういう形にするイメージです：

// src/App.tsx
import { ThemeContext } from './contexts/ThemeContext';

export function App() {
  return (
    <ThemeContext value="light">
      {/* ここにアプリ全体のコンポーネント */}
      {/* 例：<Header /> や <Main /> など */}
    </ThemeContext>
  );
}

ThemeContext value="light" → 「この中にあるコンポーネントは、テーマが light だよ〜」と教えている状態

まだ中で useContext(ThemeContext) を使っていないので、見た目は変わりませんが、 「データ置き場を作って、アプリをその置き場で包んだ」 という、一番大事な土台はこれで完成です 💪

6. Context に入れるデータって、どんなのがいいの？🤔

よくある質問に、こんなものがあります。

なんでもかんでも Context に入れていいの？

答えは NO です✋ Context はとても便利ですが、入れすぎると逆にコードが分かりにくくなります。

Context 向きのデータ

アプリ全体で使う設定
- テーマ（ライト / ダーク）
- 言語（'ja' | 'en' など）
ログインユーザー情報（名前・アイコン・権限など）
「どこからでも同じものを見ていてほしい」もの

あまり向いていないデータ

あるページの中だけで完結している一時的な入力内容
そのコンポーネント内だけで完結している状態

そういうものは、ふつうに useState で十分です。 「グローバルっぽいものだけ Context」、くらいの感覚で覚えておくとOKです👌

7. ミニ演習タイム ✏️💕

実際に TypeScript で Context を定義する練習をしてみましょう。

演習1：`UserNameContext` を作る 🙋‍♀️

src\contexts\UserNameContext.tsx を作る
中身を自分で考えて書いてみる（ヒントだけ出すね）

ヒント：

型は string でOK（type UserName = string; でも良いし、いきなり string を使ってもOK）
初期値は "ゲスト" とか "Guest" とか自分の好きな感じで決めてみる

イメージとしては、こんな形になります👇

import { createContext } from 'react';

// 好きならこう書いてもOK
// export type UserName = string;

export const UserNameContext = createContext<string>('ゲスト');

演習2：`App` で包んでみる（コードは自分で）🧠

ThemeContext と同じように、UserNameContext でも App を包んでみよう
value には、自分の名前でもニックネームでもOK ✨

※ 詳しい「読み取り」は 75章以降でやるので、今は「Context で包む」という形だけ作れれば大成功です🎉

8. まとめ 💐

この章でできるようになったこと：

createContext で「みんなのデータ置き場」を作れるようになった
どんなデータを Context に入れると気持ちいいか、イメージがついた
React 19 で導入された「<Context> をそのまま Provider にする」書き方をちょっと覗いた (ウィキペディア)

次の章では、この Context に どんな型を付けるか（null を許容するテクニックなど） をしっかりやっていきます。だんだん「型付きグローバル状態管理」ができるようになっていくので、お楽しみに〜🌈✨

0. この章でやること 🎯​

1. Context のイメージを固めよう 🧺​

2. createContext の正体をチラ見 👀​

3. 手を動かそう！ThemeContext を作る 🎨​

3-1. フォルダを用意する 📁​

3-2. ThemeContext.tsx を作成 ✏️​

行ごとの解説 🧐​

4. 図でイメージしてみる 🧠✨​

5. React 19 らしい書き方をちょっとだけ ✨​

5-1. ちょっとだけ App で使ってみる（プレビュー）​

6. Context に入れるデータって、どんなのがいいの？🤔​

7. ミニ演習タイム ✏️💕​

演習1：UserNameContext を作る 🙋‍♀️​

演習2：App で包んでみる（コードは自分で）🧠​

8. まとめ 💐​