こんにちは！Reactの世界へようこそ。
フロントエンドの荒波を乗り越えてきた一人のエンジニアとして、今日はReactの設計における「隠れた名作」、Compound Components（コンパウンド・コンポーネント）パターンについてお話しします。
これ、名前はちょっと難しそうですが、考え方は驚くほどシンプルで、かつ「これを知っているか、いないか」でコードの美しさが劇的に変わる魔法のようなテクニックなんです。
—
1. なぜ「コンパウンド（複合）」が必要なの？
まずは例え話をしましょう。あなたが「高性能なカメラ」を想像してみてください。
カメラ本体（親）があって、そこにレンズ（子）を取り付けたり、ストロボ（子）を装着したりしますよね。カメラの電源を入れると、レンズが自動的にズーム位置を調整したり、ストロボが光る準備をしたりします。
このとき、「親（カメラ）が子（レンズ）を一個一個細かく設定しなくても、装着した瞬間にあうんの呼吸で連携してくれる」状態。これが理想ですよね？
Reactの世界でも、これと同じことがしたくなるんです。
よくある「残念な」書き方
初心者の方がやりがちなのは、親コンポーネントに全ての情報を詰め込む方法です。
// 悪い例：親が全部管理しようとしてパンクする
これだと、もし「ここは特定のボタンを置きたい」「ここは装飾を加えたい」という要望が出た瞬間、親コンポーネントにオプションが爆増して、コードがスパゲッティ状態になります。
—
2. 魔法の「Context API」で連携する
そこで登場するのがCompound Componentsです。
これは、親と子で「裏で通信し合う」ことで、使う側（あなた）が直感的に部品を組み合わせられるようにする手法です。
実装のレシピ：タブ切り替えメニューを作ろう
タブをクリックすると内容が変わる、あのUIをイメージしてください。
import React, { createContext, useContext, useState } from ‘react’;
// 1. 親と子を繋ぐ「秘密の回線（Context）」を作ります
const TabsContext = createContext();
// 2. 親コンポーネント：状態を管理して、子に配る人
const Tabs = ({ children }) => {
const [activeIndex, setActiveIndex] = useState(0);
return (
// ここで「今どれが選ばれているか」という情報を、配下の全コンポーネントに共有します
);
};
// 3. 子コンポーネント：ボタンの役割
const Tab = ({ index, children }) => {
const { activeIndex, setActiveIndex } = useContext(TabsContext);
return (
);
};
// 4. 子コンポーネント：中身の役割
const Panel = ({ index, children }) => {
const { activeIndex } = useContext(TabsContext);
return activeIndex === index ?
: null;
};
// 【使うときはこうなります！】
export default function App() {
return (
);
}
—
3. なぜこの書き方が「最強」なのか？
この書き方の何がすごいか分かりますか？
1. 配置が自由自在: `
2. 親がスッキリ: 親コンポーネントは「状態を共有する器」に徹しているので、複雑なロジックを子に丸投げできます。
3. 直感的: 「タブが並んで、その下にパネルがある」という構造がコードを見ただけで分かりますよね。
つまずきやすいポイントへのフォロー
「Contextを使うのって、なんだか難しそう…」と思うかもしれません。大丈夫です。最初は「親子で秘密のメモ帳を共有しているだけ」と考えてみてください。親がメモ帳（Context）に情報を書き込み、子がそれを覗き見ている。ただそれだけのことです。
—
最後に：職人の視点から
このパターンを使いこなすと、あなたは単なる「コードを書く人」から、「自分専用のUIライブラリを作るアーキテクト」に一歩近づきます。
Reactは自由なフレームワークです。だからこそ、最初は「どれが正解？」と迷うこともあるでしょう。でも、このCompound Componentsのように、「親と子が程よい距離感で助け合う」設計を知っておけば、どんなに大きなプロジェクトでも怖くありません。
もしコードが長くなってきたな、と思ったら。
「あ、これ、コンポーネントをバラバラにして、Contextで繋げばいいんじゃない？」
そう思い出してください。その瞬間、あなたのコードは美しく生まれ変わるはずです。
一緒に、読みやすく、誰が見てもワクワクするようなReactコードを書いていきましょう！何か疑問があれば、いつでも聞いてくださいね。応援しています！
コメント