【入門編】 childrenプロパティの仕組みと使い方 – React実践ガイド

Reactの世界へようこそ！
画面を構成する小さな部品（コンポーネント）を組み合わせていく楽しさは、まるでレゴブロックを組み立てるようなワクワク感がありますよね。

でも、Reactを学び始めると必ず一度は「あれ？ コンポーネントの中に別の要素を入れたいとき、どうやって渡せばいいんだろう？」と迷う瞬間が訪れます。

今日は、そんなあなたのための「children（チルドレン）」という魔法の小道具について、徹底的に紐解いていこうと思います。

—

そもそも「children」って何者？

想像してみてください。あなたは今、「中身を自由に入れ替えられる万能なギフトボックス」を作ろうとしています。

このギフトボックス（親コンポーネント）は、中身が「お菓子」であっても「手紙」であっても、「おもちゃ」であっても、何でも受け取れるようになっているのが理想ですよね。

Reactの `children` は、まさにこの「ボックスの中に詰め込まれた中身」そのものを指す特別なパスポートのようなものなんです。

使い方のイメージ：タグで囲むだけ！

普通、コンポーネントは `` のように閉じることが多いですが、`children` を使うときは、HTMLのタグのように開始と終了で囲みます。

// 例えば、こんなふうに囲むと…

美味しいチョコレート！

この `

美味しいチョコレート！

` という部分が、`GiftBox` コンポーネントの中に「`children`」という名前で運ばれていきます。

—

実際に書いてみよう：ギフトボックスの作り方

では、実際にコードで見てみましょう。難しく考えないでくださいね。ただ「受け取ったものをそのまま表示する」だけですから。

// ギフトボックスのコンポーネント
const GiftBox = ({ children }) => {
return (

);
};

// 使う側
const App = () => {
return (

ピカピカの時計が入っていました！

);
};

ここがポイント！
`{children}` と書くことで、「ここに、さっき囲った中身を表示してね！」とReactに伝えているんです。これだけで、`GiftBox` はどんな中身でも表示できる柔軟なコンポーネントに早変わりです。

—

初学者がつまずきやすい「型付け」の壁

さて、少しだけ実務的な話をしますね。「TypeScript」という言葉を聞いて、「うわ、難しそう…」と身構えてしまう必要はありません。

Reactで `children` を使うとき、TypeScriptに「これは中身が入ってくるよ」と教えてあげないと、エディタが少し怒ってしまうことがあります。そんなときは、こう伝えてあげてください。

import { ReactNode } from ‘react’;

// 「Propsとして、ReactNode（Reactで表示できる何らかの要素）を受け取りますよ」という宣言
type Props = {
children: ReactNode;
};

const GiftBox = ({ children }: Props) => {
return

;
};

`ReactNode` というのは、Reactが「画面に表示できるものなら何でもいいよ！」と判断してくれる、懐の深い型です。とりあえず困ったら `ReactNode` を使っておけば大丈夫。僕たちベテランも、現場で一番お世話になっている相棒です。

—

なぜ children を使うと幸せになれるの？

「わざわざ `children` なんて使わなくても、Propsで文字を渡せばいいじゃん？」と思うかもしれません。でも、`children` には圧倒的なメリットがあります。

1. 柔軟性: 文字だけでなく、画像、別のコンポーネント、複雑なレイアウトまで、囲むだけで何でも渡せます。
2. 直感的: HTMLの `