こんにちは。Reactの世界へようこそ。
Reactを学び始めると、最初は「仮想DOM？」「フック？」「Props？」と、専門用語のラッシュに溺れそうになりますよね。でも大丈夫、安心してください。
今日は、Reactを魔法のように便利にしてくれる「コンポーネントの合成（Composition）」という考え方について、お話しします。難しく聞こえますが、実は私たちの日常生活の中に溢れている、とても温かい考え方なんですよ。
—
「継承」ではなく「ブロック遊び」で考える
プログラミングの世界では、昔から「継承（Inheritance）」という言葉が使われてきました。親から子へ、機能を受け継いでいく手法ですね。でも、Reactが選んだ道は少し違います。
Reactの基本は「合成（Composition）」。これは例えるなら、レゴブロックやお弁当箱のようなものです。
例えば、あなたがお弁当を作るとします。
「卵焼き」というパーツ、「ブロッコリー」というパーツ、「唐揚げ」というパーツを、一つの大きなお弁当箱の中に「合成」して詰めますよね。これがReactのコンポーネント設計です。
「唐揚げ」に「卵焼きの機能」を継承させるのではなく、「唐揚げは唐揚げとして独立させ、必要な場所にポンと置く」。このシンプルさが、大規模なアプリを作るときに、あなたのコードを崩壊から守ってくれる最強の武器になるんです。
—
実際にコードで見てみよう：お弁当箱の例
まずは、一番シンプルな「部品」を作ってみましょう。
// 1. 小さな部品（コンポーネント）を作る
function Ingredient({ name }) {
return
;
}
// 2. それらを組み合わせて「お弁当箱」を作る
function BentoBox() {
return (
今日のお弁当
);
}
どうでしょう？ `Ingredient` という部品を何度も使い回して、中身を変えるだけでいろんなメニューが作れそうですよね。これが「合成」の第一歩です。
—
魔法の道具「children」を知っていますか？
Reactの合成を語る上で欠かせないのが、`children` という魔法の引数です。
これを使うと、「枠組みだけ作っておいて、中身は使うときに決める」という、極めて柔軟な設計ができるようになります。
「カード型UI（枠線で囲まれたきれいなボックス）」を想像してください。
// 外側の枠だけを作るコンポーネント
function Card({ children }) {
return (
{children}
);
}
// 使うときはこうする
function App() {
return (
タイトルです
この中身は、使うときに自由に決められます。
);
}
この `Card` コンポーネントは、中に何が入るかを知る必要がありません。ただ「渡されたものをきれいに囲む」という役割に徹しています。これこそが、再利用性の高いコンポーネントの極意です。
—
つまずきやすいポイント：どこで分割すべき？
初心者の頃は「どこまで細かく分ければいいの？」と悩むのが普通です。そんなときは、こう考えてみてください。
1. 「これ、他の画面でも使いそうだな？」と思ったら別ファイルにする（ボタン、入力欄、見出しなど）
2. 一つの関数が長すぎて読みづらいな、と思ったら切り出す
最初から完璧を目指さなくていいんです。まずは動くものを作ってみて、「あ、これとこれは同じ形だ」と気づいたときに、そっと切り出して「合成」してあげる。その繰り返しで、あなたのコードは少しずつ洗練されていきます。
—
最後に：完璧主義を捨てよう
Reactのアーキテクチャは、プログラミングというより「レゴの組み立て」や「お料理」に近いです。うまくいかない日があっても大丈夫。コードが汚れてしまったら、また外して、組み直せばいいだけですから。
この「小さなパーツを組み合わせて、大きな物語を作る」という考え方を大切にしてみてください。そうすれば、いつか複雑なWebアプリを設計するときも、きっと「あ、これはあのお弁当箱の考え方と同じだ！」と気づく瞬間が来ます。
そのときが、あなたがReactの本当の楽しさに触れた瞬間です。
焦らず、楽しく、一つひとつのパーツを組み上げていきましょう。応援しています！
コメント