こんにちは！Reactの世界へようこそ。
フロントエンドの荒波を渡り歩いてきた身として、今日はお話ししたいことがあります。
Reactを学び始めると、誰もが一度は「コンポーネントをどう分けたらいいの？」「機能が複雑になるとファイルが巨大化して収拾がつかなくなる…」という壁にぶつかります。そんな時、つい「継承（親の機能をそのまま引き継ぐ）」という言葉に手を伸ばしたくなるのですが、ちょっと待ってください。
Reactの真髄は「合成（Composition）」にあります。今日は、この魔法のようなテクニックを、難しい専門用語を抜きにして、皆さんと一緒に紐解いていきましょう。
—
継承より「パズル」をしよう
プログラミングの世界で「継承」というのは、家系図のようなものです。「親から子へ」と厳格にルールを引き継ぐ。でも、これだと後から「やっぱりちょっとだけ形を変えたい」という時、親の設計図まで書き換えなきゃいけなくて、大惨事になることがよくあります。
Reactで推奨されている「合成」は、「レゴブロック」や「お弁当箱」に近い感覚です。
例えば、「お弁当箱」を想像してください。
箱の中に、仕切りを使って「メインのおかず」と「副菜」と「ごはん」を自由に入れ替えますよね？ お弁当箱自体は「容器」という役割に徹して、中身をどうするかは後から自由に決める。これがコンポーネントの合成です。
—
`children` という魔法のポケット
Reactには、どんなコンポーネントにも標準でついている「魔法のポケット」があります。それが `children`（チルドレン）です。
まずは、一番シンプルな「枠組みだけの箱」を作ってみましょう。
// Card.jsx: 何でも受け入れる優しい箱
function Card({ children }) {
return (
{children}
);
}
この `Card` コンポーネントを使う時は、こう書きます。
// App.jsx
function App() {
return (
こんにちは！
この中身は、Cardコンポーネントの外側で自由に決められます。
);
}
どうでしょう？ `Card` は「枠を作る」という仕事に専念し、中身は外側から注入されている。これが合成の基本形です。
—
「スロットパターン」でさらに自由に
でも、複雑なUIになってくると「ヘッダーにはタイトルを、フッターにはボタンを置きたい」なんてことが出てきますよね。そんな時は、`children` を複数に分けるようなイメージで、「スロット（差し込み口）」を意識してみましょう。
プロパティ（props）として名前付きのパーツを渡すだけです。
// Layout.jsx: パーツを配置する場所を決めておく
function Layout({ header, content, footer }) {
return (
);
}
// 使う側はこうなります } ここがメインコンテンツです！ } このように、パーツを「部品」として渡すことで、`Layout` コンポーネントを修正することなく、中身だけをパズルのように組み替えることができます。これができると、コードが驚くほどスッキリします。 — 初心者の頃は、「一つのコンポーネントに全部詰め込んで、プロパティを何十個も渡す」という罠に陥りがちです。でも、そうするとコンポーネントが何をしているのか分からなくなり、後から修正するのが怖くなります。 合成を使うメリットは3つあります。 1. 部品が使い回せる： `Card` や `Layout` は、どんな中身でも受け入れられるので、別の画面でもそのまま使い回せます。 — 最初は「`children` って何？」「propsにJSXを渡すの？」と戸惑うかもしれません。でも、大丈夫です。 まずは「このコンポーネントは、自分の中に何かを入れる器になれるかな？」と自問自答してみてください。それが、あなたがスペシャリストへの第一歩を踏み出した瞬間です。 完璧を目指す必要はありません。まずは「動くパズル」を作ってみることから始めてみてください。コードを書く楽しさが、少しずつ見えてくるはずですよ。 それでは、また現場でお会いしましょう！応援しています。
function App() {
return (
content={
footer={}
/>
);
}なぜこの方法が良いのか？
2. 見通しが良い： 「誰が枠を作り、誰が中身を入れるか」が明確なので、バグを探すのも簡単です。
3. 変更に強い： デザインが変わっても、中身を差し替えるだけで済みます。最後に：つまずいても大丈夫
コメント