こんにちは！Reactの学習、楽しく進めていますか？
画面上のボタンがカチッと動いたり、入力した文字がリアルタイムで反映されたりすると、「おっ、私すごいものを作ってるぞ！」というワクワク感がありますよね。

でも、アプリが少しずつ大きくなってくると、なんだかコードがモヤモヤしてきて、こんな壁にぶつかったことはありませんか？

「あれ？ このデータ、一番下の孫コンポーネントで使いたいだけなのに、なんでその間の親や子を経由しなきゃいけないんだっけ……？」

そう、これこそが全Reactエンジニアが一度は頭を抱える、「Props（プロップス）のバケツリレー問題」です。

今回は、この厄介なバケツリレーの正体と、それをスマートに解決するための魔法の道具たちについて、お茶でも飲みながらリラックスした気持ちで一緒に紐解いていきましょう。大丈夫、ひとつずつ見ていけば絶対に理解できますよ！

—

1. 「Propsのバケツリレー」って、一体なに？

Reactでは、親から子へデータを渡すときに「Props」という仕組みを使います。これは基本中の基本で、最初は「なるほど、こうやってデータをリレーしていくんだな」と楽しく感じます。

ここで、身近な例えをひとつ。
あなたは今、大きなオフィスビルの1階の受付にいます。最上階（10階）にいる社長室に、「大切なお手紙」を届けたいとします。

• 1階の受付さん（Appコンポーネント）が手紙を受け取る
• 2階の部署（Headerコンポーネント）に「これ持ってて！」と渡す
• 3階の部署……4階の部署……と、使わない人たちを次々に経由して、やっとの思いで10階の社長（一番下の孫コンポーネント）に手紙が届く

……どうでしょう？ 想像しただけで、途中で手紙を落としそうだし、何より「途中の階の人たちは、手紙の内容なんて全く興味ないのに、運ぶためだけに仕事が増えている」状態ですよね。

これが、コードの世界でいう「Propsのバケツリレー」です。
途中のコンポーネントは、本当はそのデータを必要としていないのに、下の階層に渡すためだけに「とりあえず受け取って、そのまま下に流す」という作業を強制されてしまいます。その結果、コードが関係ない変数だらけになって読みにくくなり、修正するのが怖くなってしまうのです。

—

2. バケツリレーを救う「Context API」という特急便

「途中の人たちを全員経由させるなんて、非効率すぎる！」
そう思ったときの救世主が、Reactに標準で備わっている「Context API（コンテキスト・エーピーアイ）」です。

イメージとしては、ビルの中に「全館共通の空気ダクト（あるいは内線放送）」を通してしまうような感覚です。
一番上の階でデータを「ここに入れまーす！」とContextに預けておけば、途中の2階や3階の人たちを一切無視して、使いたい人だけが直接そのデータを取りに行く（フックする）ことができるようになります。

ちょっとコードを見てみましょう

言葉だけだと難しそうに見えるので、簡単な例を見てみますね。「ログインしているユーザーの名前」を一番下のコンポーネントで表示したい場面を想像してください。

import React, { createContext, useContext, useState } from ‘react’;

// 1. データを運ぶための「専用パイプ（Context）」を作ります
const UserContext = createContext();

function App() {
// アプリのてっぺんでユーザー情報を管理
const [userName, setUserName] = useState(‘田中さん’);

return (
// 2. Provider（プロバイダー）という送信機で、アプリ全体を包み込みます
// これで、この中の誰でも直接データを取りに行けるようになります！

);
}

function Parent() {
return (

);
}

function Child() {
return (

);
}

function GrandChild() {
// 3. useContextを使って、途中の階をスキップして直接データを受け取る！
const name = useContext(UserContext);

return (

);
}

export default App;

`Parent`や`Child`は、`userName`という変数を一度も受け取っていないのに、一番下の`GrandChild`だけが`useContext(UserContext)`を使って直接名前を取得できていますよね。これがバケツリレーを解消するスマートなやり方です。

—

3. でもちょっと待って！ Context APIは何でも屋じゃない？

「じゃあ、アプリのデータは全部Contextに入れちゃえばバケツリレーがなくなってハッピーじゃん！」
……と、思わず思いがちですが、実はここに初心者さんがハマりやすい「落とし穴」があります。

チーフアーキテクトとしての経験上、何でもかんでもContextに突っ込むと、後で痛い目を見ることが多いです。

Contextの弱点：再レンダリングの嵐

Contextに渡したデータが更新されると、「そのContextを購読している（使っている）コンポーネントのすべて」が強制的に再描画（再レンダリング）されます。
アプリの規模が大きくなってきたときに、ちょっとした入力フォームの文字が変わっただけで、関係ない画面のあちこちが再描画されてパフォーマンスがガクッと落ちる……なんてことが起こり得ます。

使い分けの黄金ルール

• Context APIに向いているもの
• ログイン中のユーザー情報（誰が使っているか）
• アプリ全体のテーマ（ダークモードか、ライトモードか）
• 言語設定（日本語か、英語か）
• 「あまり頻繁に変わらないけれど、いろんな場所で必要になる共通データ」

• Propsで渡したほうがいいもの
• リストの中の特定のアイテムの状態
• 開閉するモーダルの状態など、ごく限られた範囲でしか使わないデータ
• 「頻繁に書き換わり、その周辺だけで完結するデータ」

—

4. それでも手に負えなくなったら？（状態管理ライブラリの世界）

「アプリがさらに巨大化して、Contextが何個も乱立してごちゃごちゃになってきた……」
そんな時、プロの世界では、Zustand（ジュスタンド）やRedux Toolkit（リダックス・ツールキット）といった「外部の状態管理ライブラリ」の出番になります。

特に最近のトレンドである「Zustand」などは、まるで普通のJavaScriptの箱（ストア）を扱うかのように、Reactの複雑なルールを忘れさせてくれるくらいシンプルにデータを管理できます。

ただ、今のあなたが無理に覚える必要はありません！
まずは、「Propsのバケツリレーって面倒だな」と感じる感性を大切にして、「数階層くらいならPropsで頑張る、あちこちの遠い場所で使うならContext APIを思い出す」という引き出しを少しずつ増やしていってください。

—

最後に：一歩ずつ、楽しみながら進もう

Reactの仕組みは、最初はパズルのように感じられて手が止まることも多いはずです。でも、今日知った「バケツリレー」と「Context API」という概念が頭の片隅にあるだけで、次にコードを書くときの視界がパッと明るくなるはずです。

躓いても、コードがエラーを吐いても、「あ、今私は成長痛を味わってるんだな」と気楽に捉えて、自分のペースで楽しくコードを書いていきましょう。応援しています！