Reactの`children`を使いこなす：ただの「穴埋め」で終わらせないための設計術

現場でReactを書いていると、コンポーネント設計の難しさに直面する瞬間があるはずだ。「このコンポーネント、汎用的にしたいけど、propsがどんどん増えていく……」といった悩みだ。

そんな時、僕らが頼るべきは`children`という強力な武器だ。これは単なる「タグの間に挟むもの」ではない。コンポーネントに「拡張性」という名の翼を与えるための、最も洗練されたインターフェースなんだ。

今日は、中級者の君がもう一歩上のアーキテクチャを目指すために、`children`の裏側の仕組みと、実務で使える「賢い使い方」について語ろうと思う。

—

1. `children`の正体：ブラウザとReactの裏側

まず、Reactの`children`が何者かを確認しよう。これは特別な魔法ではない。JSXでタグを閉じると、その間に記述した要素（テキスト、文字列、他のコンポーネント、関数など）が、自動的に`children`という名前のpropsとしてコンポーネントに渡される仕組みだ。

// こう書くと…

タイトル

本文です

// Reactはこう変換してコンポーネントに渡している
タイトル

,

本文です

]} />

ブラウザのDOM構造から見れば、これは単なる「親の中に配置された子要素」に過ぎない。しかし、Reactにおいては「コンポーネントのロジック（Cardの枠組み）」と「コンテンツ（中身）」を完全に分離できるという、疎結合の極みを実現できるんだ。

—

2. 型付けのベストプラクティス（TypeScript）

実務において、`children`の型定義で適当に `any` を使っているなら、今すぐやめよう。Reactの公式型定義には、現代的な書き方がある。

import React, { ReactNode } from ‘react’;

// ReactNodeは、文字列、数値、JSX、null、undefinedなど「レンダー可能な全て」を指す
// これが最も柔軟で、現代のReact開発における標準だ
type CardProps = {
children: ReactNode;
title: string;
};

export const Card = ({ children, title }: CardProps) => {
return (

);
};

かつて使われていた `React.FC` を使った型定義は、最近では推奨されないことも多い。なぜなら、`React.FC` を使うと暗黙的に `children` が含まれてしまうからだ。「何を受け取るか」を明示的にする方が、チーム開発では圧倒的にバグが減る。

—

3. 実践：`children`の高度な活用法（スロットパターン）

ただ「中身を流し込む」だけじゃ物足りない君へ。現場でよく使うのが、複数の場所にコンテンツを流し込む「スロットパターン」だ。`children`を1つに縛られず、名前付きで渡すテクニックだ。

import React, { ReactNode } from ‘react’;

type LayoutProps = {
header: ReactNode;
children: ReactNode; // メインコンテンツ用
footer?: ReactNode; // オプション
};

export const PageLayout = ({ header, children, footer }: LayoutProps) => {
return (

);
};

// 使う側はこうなる
メニュー

}
footer={

フッター情報

}
>

ここがメインのコンテンツ

この方法の何が素晴らしいかというと、「レイアウトの骨組み」をコンポーネントが管理し、その中身（パーツ）を呼び出し側が注入できる点にある。これにより、コンポーネントの再利用性が劇的に向上するんだ。

—

4. 現場のシニアからのアドバイス：やりすぎには注意

最後に、一つだけ戒めを伝えておく。

`children`は便利だが、何でもかんでも`children`に詰め込めばいいわけじゃない。「propsで渡すべきデータ」と「UIの構造として渡すべきchildren」を混同しないこと。

• データ（状態）：`id`, `isLoading`, `onClick` などの値は props で渡す。
• 構造（UI）：他のコンポーネントやHTML要素の組み合わせは `children` で渡す。

これを守らないと、コンポーネントの責務が曖昧になり、後からコードを読んだ人間（未来の君自身含む）が苦しむことになる。

Reactのコードが美しいかどうかは、「コンポーネントの粒度」と「インターフェース（props）の明確さ」で決まる。`children`を使いこなすということは、そのコンポーネントが「何者であるか」をより明確に定義することに他ならない。

まずは、既存のコンポーネントで「これ、propsで渡す必要あるか？」と自問自答して、`children`に置き換えられるところを探すことから始めてみてほしい。それが、君が一段上のエンジニアになるための最短ルートだ。