【入門編】 Context APIの基本概念とプロバイダー – React実践ガイド

やあ、こんにちは。Reactの世界へようこそ。
フロントエンドの深淵を覗き込んでいる君へ、まずは「ここまで来た自分を褒めてあげてほしい」と伝えたい。Reactって、最初は魔法のように見えるけれど、一度仕組みを掴んでしまえば、これほど頼もしい相棒はいないからね。

今日は、Reactの「データの受け渡し」という、誰もが一度は頭を抱える壁について話そう。Context APIという仕組みだ。

—

データの「手渡しリレー」に疲れた君へ

Reactでアプリを作っていると、こんな場面に出くわすはずだ。「一番上の親コンポーネントで持っているユーザー情報を、ずっと下の階層のボタンで使いたい」という状況だ。

普通にやるとどうなるか。親から子へ、子から孫へ、孫からひ孫へ……と、「バケツリレー」のようにプロパティ（Props）を渡し続けることになる。これ、中間のコンポーネントは「自分は使わないのに、下の階層に渡すためだけにデータを受け取っている」という状態になる。コードは長くなるし、どこで何が渡っているのか分からなくなって、まさに地獄の入り口だ。

そんな時、Reactが用意してくれた「どこでもドア」がContext APIなんだ。

—

Context APIを「カフェの注文伝票」に例えてみる

難しい技術用語を一旦横に置いて、カフェを想像してみてほしい。

1. Context（注文伝票）: 全員がアクセスできる「共有のメモ」を作る。
2. Provider（店員さん）: 「この伝票を見れば誰でも注文内容がわかるよ！」と、店内のテーブル（コンポーネント）に伝票を配る。
3. useContext（お客さん）: 必要な席に座っているお客さんが、いつでもその伝票をチラッと見て内容を確認する。

こうすれば、わざわざ店員さんが一人ずつ手渡ししなくても、必要な人が勝手に伝票を確認できるよね。これがContextの正体だ。

—

実践：Contextを使ってみよう

さあ、理屈はわかった。次はコードだ。怖がらずに見ていこう。

1. 伝票（Context）を作る

まずは、データを運ぶための「箱」を定義する。

import { createContext } from ‘react’;

// Contextを作成。これが「共有伝票」になるよ
export const UserContext = createContext();

2. Providerでデータを配る

次に、データを必要とするコンポーネントたちを「Provider」という大きな箱で包み込む。

import { UserContext } from ‘./UserContext’;

function App() {
const user = { name: “React初心者さん”, status: “冒険中” };

return (
// Providerで囲んだ中のコンポーネントは、どこからでもuserにアクセスできる！