こんにちは。Reactの世界へようこそ！
Reactを触り始めて、「あれ？コンポーネントを重ねていったら、Props（データ）を渡すのがすごく面倒になってきたぞ…」と感じたことはありませんか？
実はそれ、React開発者が必ず一度は突き当たる「壁」なんです。今日は、その厄介者である「Props Drilling（プロップス・ドリリング）」という現象について、専門用語を並べる前に、まずは身近な例え話から紐解いていきましょう。
—
1. 「Props Drilling」って、結局なに？
想像してみてください。あなたは今、超巨大なマンションの10階に住んでいます。
1階の入り口に届いた「あなた宛の荷物」を、10階のあなたの部屋まで運ばなきゃいけないとします。
でも、エレベーターが壊れていて、「1階の人→2階の人→3階の人…→9階の人→あなた」という順番で、手渡しでリレー形式で運ばないといけません。
- 2階の人は、あなたに関係ない荷物をただ運ぶためだけに立ち上がらなきゃいけない。
- もし途中の5階の人が留守だったら、その荷物はそこで止まってしまう。
これがReactでいう「Props Drilling」です。
一番上の親コンポーネントから、一番下の孫の孫コンポーネントまで、ただデータを右から左へ流すためだけに、間のコンポーネントがPropsを中継させられている状態ですね。
コードで書くと、こんな感じです。
// 悪い例：ただのリレー役になっている「中継コンポーネント」たち
function App() {
const user = “山田太郎”;
return
}
function MiddleComponent({ user }) {
// ここではuserを使わないのに、下のコンポーネントのために受け取らなきゃいけない！
return
}
function InnerComponent({ user }) {
// やっとここで使える。でも長旅だったね…。
return
;
}
「ただの荷物運び」をさせられているコンポーネントたちが、なんだか可哀想に見えてきませんか？
—
2. 魔法のトンネル「Context API」で解決！
この「リレー形式」を解消するために、Reactには「Context（コンテキスト）」という便利な仕組みが用意されています。
先ほどの例えで言えば、1階から10階まで「専用の秘密のダクト（配管）」を通すようなイメージです。これがあれば、途中の階の人は荷物に一切触れる必要がありません。1階でダクトに荷物を入れれば、10階のあなたはそこから直接受け取ればいいんです。
Contextを使った書き方
import React, { createContext, useContext } from ‘react’;
// 1. まずは「荷物を通すダクト」を作ります
const UserContext = createContext();
function App() {
const user = “山田太郎”;
// 2. ダクトの入り口を用意して、値を流し込みます（Providerといいます）
return (
);
}
function MiddleComponent() {
// 途中のコンポーネントは、もうPropsを気にしなくてOK！
return
}
function InnerComponent() {
// 3. ダクトから直接データを取り出します
const user = useContext(UserContext);
return
;
}
どうでしょう？ `MiddleComponent` が、荷物の受け渡しという「余計な仕事」から解放されましたね。これが現場で最もよく使われる解決策の一つです。
—
3. いつでもContextを使えばいいの？
ここで一つ、ベテランからの「現場の知恵」を授けますね。
「じゃあ、全部Contextにすれば楽じゃん！」と思うかもしれませんが、それは少しだけ待ってください。
- すべてをContextにすると…
どこでデータが使われているのかが分かりにくくなり、アプリが複雑になったときに「あれ、このデータどこから流れてきてるの？」と迷子になりがちです。
- 適材適所が一番！
- Props Drilling: 親子関係が近いなら、そのまま渡すのが一番シンプルで読みやすいです。
- Context: 「ログイン中のユーザー情報」や「テーマカラー（ダークモード設定）」など、アプリ全体で共有したいデータに使うのが正解です。
—
最後に：つまずいても大丈夫！
Reactを始めたばかりのころは、どんな設計が正しいのか分からなくて当然です。最初はコードが汚くなってしまっても、リレー形式でPropsを渡してしまっても、それは「動くものを作った」という大きな一歩です。
まずは「あ、今自分は荷物をリレーさせてるな」と気づくだけで、あなたのReactエンジニアとしての視座は一段階上がっています。
最初は「荷物運び」をして、コードが長くなってきたら「Contextというダクト」を作ってみる。そんなふうに、少しずつ道具を使い分けていけば大丈夫。
あなたのReactライフが、もっと楽しく、もっと自由になりますように。応援していますよ！
コメント