【入門編】 childrenプロパティの役割と利用 – React実践ガイド

こんにちは！Reactの世界へようこそ。
フロントエンドの最前線でコードを書き続けていると、たまに「Reactって、実はめちゃくちゃ人間くさい仕組みだな」と思うことがあります。

今日は、Reactを学ぶ上で最初の大きな「壁」であり、同時に「最強の武器」でもある `children`（チルドレン） という概念についてお話しします。

専門書では「コンポーネントの合成」なんて難しい言葉で片付けられがちですが、実はこれ、皆さんの身近にある「魔法の箱」と同じなんですよ。

—

まずは、想像してみてください。あなたは今、大切なお届け物をするために「段ボール箱」を用意しました。

この箱は、中身が何であれ、とにかく頑丈に梱包して送り届ける役割を持っています。

Reactにおける `children` も、これと全く同じです。
コンポーネントという「箱」の中に、「何が入ってくるか分からないけど、とりあえず中身を受け取って表示してね」と伝えるための、いわば「受け皿」なんです。

例えば、Webサイトの「カード型デザイン（枠で囲まれた囲い）」を作るとき、枠のデザインは共通でも、中身は「画像」だったり「テキスト」だったりしますよね。

そんな時、中身を直接書き込むのではなく、「この箱の中に、好きなものを入れていいよ！」というルールを作っておく。それが `children` の役割です。

—

言葉だけだと少しフワッとするので、実際に動くコードを見てみましょう。

まずは、受け皿となる「箱（`Wrapper`コンポーネント）」を作ります。

// Wrapper.js
// このコンポーネントは、渡されたものをそのまま表示するだけの「箱」です
function Wrapper({ children }) {
return (

{/ ここに中身が展開されます /}

{children}

);
}

次に、この箱を使ってみます。

// App.js
function App() {
return (

{/ どんなものを入れても、ちゃんと「箱」の中で表示されます /}

こんにちは！これは箱の中身です。

);
}

どうでしょう？ `Wrapper` タグの「間」に書いたものが、そのまま `children` という名前でコンポーネントの中に運び込まれるイメージが湧きましたか？

—

「普通にコンポーネントの中に直接書き込めばいいんじゃない？」と思った方、鋭いです！でも、もしあなたが「100個のページで同じ枠組みを使いたい」としたらどうでしょう。

直接書き込む方式： 100個のページ全部に枠のデザインをコピー＆ペーストする。もし枠のデザインを変えたくなったら、100箇所を修正する…。地獄ですよね。
`children` 方式： 枠のデザインは `Wrapper` に一箇所だけ。中身を変えるだけで、いつでもどこでも同じデザインを使い回せる。

そう、「部品（枠）と中身を切り離す」ことで、メンテナンスが圧倒的に楽になるんです。これが、React開発の現場で最も重視される「再利用性」の正体です。

—

初めてこの概念に触れるとき、多くの方が「`children` ってどこから湧いてきたの？」と混乱します。

大丈夫ですよ。「`props` という大きな荷物の中に、最初から用意されている特別な箱」だと思ってください。自分でわざわざ「`children` を定義する」必要はなく、Reactが自動的に、タグの間に挟まれたものをそこに詰め込んでくれるんです。

もしうまく表示されないときは、以下の3つを確認してみてください。

1. 波括弧 `{ }` を忘れていないか？（JSXの中で変数を扱うときは必須です）
2. `props` から `children` を受け取れているか？（`{ children }` と書くのを忘れずに）
3. タグで囲んでいるか？（`中身` という形になっているか）

—

Reactのコードを書くことは、レゴブロックを組み立てることに似ています。
`children` を使いこなせるようになると、小さなブロックを組み合わせて、どんどん複雑で美しいお城を作れるようになります。

最初は難しく感じるかもしれませんが、今日学んだ「箱の中に中身を入れる」という感覚さえあれば、もう半分はマスターしたも同然です。

まずはエディタを開いて、適当な枠を作って、そこに色々なものを放り込んでみてください。自分の書いたものが画面上で「箱」に入って表示されたとき、きっと少しだけReactを好きになれるはずですよ。

応援しています！また何かあればいつでも聞いてくださいね。