【入門編】コンポーネント合成とchildrenの活用 – React実践ガイド

Propsによるデータの受け渡し（チルドレン属性、コンポーネントへの型付け）

2026.09.16

やあ、こんにちは！Reactの世界へようこそ。
フロントエンドの深淵を覗き込んでいる君なら、きっと一度は「コンポーネントをどう組み合わせたらいいんだろう？」と悩んだことがあるはずだよね。

Reactを学び始めると、最初は「ボタン」や「入力欄」といった小さな部品を作ることに夢中になる。でも、それらを組み合わせて「画面」を作ろうとしたとき、少しだけ壁にぶつかるんだ。

今日は、そんな君に「コンポーネント合成」という、Reactにおける最強の「組み立ての作法」を伝授するよ。難しいことは言わないから、肩の力を抜いて読んでみてね。

—

想像してみてほしい。君が美味しいお弁当を作るとする。
お弁当には「お弁当箱（入れ物）」と「おかず（中身）」があるよね。

もし、お弁当箱を作るたびに「中身もセットで作り直さなきゃいけない」としたらどうだろう？お弁当箱を変えるたびに、中身の唐揚げまで作り直すなんて、あまりに非効率だよね。

Reactの`children`（チルドレン）は、まさにこの「お弁当箱」と「中身」を切り離すための魔法の鍵なんだ。

`children`というのは、コンポーネントの中に「囲まれたもの」をそのまま受け取れる、Reactの特別な小箱のようなものさ。

例えば、こんな感じだ：

// 囲まれた中身をそのまま受け取る「箱」コンポーネント
const Box = ({ children }) => {
return (

{/ ここに中身がすっぽり入るよ！ /}
{children}

);
};

これを使う側はこうなる：

const App = () => {
return (

こんにちは！

私は箱の中にいます。

);
};

見ての通り、``と``で囲った部分が、`Box`コンポーネントの中の`children`という場所に「ぼわんっ」と出現する。これだけで、レイアウトの使い回しが劇的に楽になるんだ。

—

初心者のうちは、ついつい「全部入りのコンポーネント」を作りがちだ。「ヘッダーも中身もフッターも全部ひとつのファイルに書いちゃえ！」という感じにね。でも、それだと後で「ここはボタンの色を変えたい」とか「中身だけ差し替えたい」という要望が出た瞬間に、コードがスパゲッティみたいに絡まってしまう。

コンポーネント合成の哲学は、「部品は小さく、組み合わせは自由に」だ。

例えば、Webサイトの「カード型レイアウト」を想像してごらん。
カードの枠組みは共通だけど、中身はテキストだったり画像だったりするよね。`children`を使えば、その「枠組み」だけを一つ作っておけば、あとはどんな中身でも放り込むことができる。

少しだけレベルアップの話をしよう。Reactでは、TypeScriptを使って「この箱には何を入れていいか」をルール化できる。

// propsの型定義
type BoxProps = {
children: React.ReactNode; // Reactで扱えるものなら何でもOKという意味
};

const Box = ({ children }: BoxProps) => {
return

{children}

;
};

`React.ReactNode`というのは、「Reactで描画できるものなら何でもいいよ」という魔法の杖だ。これをつけておけば、君の書いたコードは一段とプロフェッショナルなものになるよ。

—

「設計」なんて難しく考えなくていい。まずは、君が書いているコードの中で「あ、これ毎回同じ枠組みを使ってるな」という場所に気づくところからスタートしよう。

1. よく使う「枠（レイアウト）」を見つける。
2. その枠の中に`{children}`を置いてみる。
3. あとは、使いたい場所で `<枠>中身` と書いてみる。

たったこれだけで、君のReactライフは驚くほど快適になるはずだ。

もし途中で「あれ、うまく表示されないな？」なんてことがあっても大丈夫。それは君が成長している証拠だよ。エラーメッセージは敵じゃなくて、Reactが教えてくれるヒントだ。ゆっくり、一つずつ紐解いていけば必ず動くようになるからね。

さあ、次はどんな「お弁当箱」を作ってみる？
君のコードに、少しだけ魔法をかけてみてほしい。応援しているよ！