先生と生徒の会話形式で理解しよう

生徒

「先生、Reactでchildrenってよく出てくるんですが、これは何ですか？」

先生

「childrenは、コンポーネントの中に挟み込んだ要素を受け取るための特別なPropsなんだ。TypeScriptを使うと、このchildrenにもしっかり型をつけることができるんだよ。」

生徒

「なるほど！でも具体的にどうやって型を定義するんですか？」

先生

「それじゃあ、実際にTypeScriptでchildrenを型定義する方法を一緒に見ていこう！」

1. childrenとは？

Reactのchildrenとは、コンポーネントの開始タグと終了タグの間に書いた要素のことです。たとえばHTMLでいうと、<div>タグの中にテキストや画像を入れるのと同じように、Reactでもコンポーネントの中に別の要素を入れることができます。

イメージとしては「お弁当箱におかずを詰める」ようなものです。箱がコンポーネントで、中に入れるおかずがchildrenです。

2. 型をつけない場合のchildren

まずは型をつけずにchildrenを受け取るシンプルな例を見てみましょう。


import React from "react";

const Box = ({ children }) => {
  return <div style={{ border: "1px solid black", padding: "10px" }}>{children}</div>;
};

export default Box;

（Boxコンポーネントで<Box>こんにちは</Box>と書くと、枠で囲まれた「こんにちは」と表示されます）

型をつけない場合でも動作はしますが、TypeScriptのメリットである型安全性を活かせません。そこでchildrenに型をつける方法が役立ちます。

3. TypeScriptでchildrenを型定義する方法

もっとも基本的な方法は、React.ReactNode型を使う方法です。ReactNodeとは、Reactで表示できるすべての要素（文字列・数値・React要素・配列など）を含む便利な型です。


import React, { ReactNode } from "react";

interface BoxProps {
  children: ReactNode;
}

const Box = ({ children }: BoxProps) => {
  return <div style={{ border: "1px solid black", padding: "10px" }}>{children}</div>;
};

export default Box;

（この場合、文字列でも別のコンポーネントでも受け取れます）

この書き方はもっとも広く使われる方法で、初心者でも安心して使えます。

4. 特定の型に限定したchildren

場合によってはchildrenに文字列だけを許可したいこともあります。その場合はstring型を指定します。


interface TextOnlyProps {
  children: string;
}

const TextOnly = ({ children }: TextOnlyProps) => {
  return <p>{children}</p>;
};

（<TextOnly>こんにちは</TextOnly>は動作しますが、<TextOnly><span>テスト</span></TextOnly>はエラーになります）

このように型を限定することで、意図しない使い方を防ぐことができます。

5. ReactElementを使う方法

もしchildrenに特定のReact要素しか受け取りたくない場合は、ReactElement型を使います。ReactElementとは「Reactで描画できる単一の要素」を意味します。


import { ReactElement } from "react";

interface WrapperProps {
  children: ReactElement;
}

const Wrapper = ({ children }: WrapperProps) => {
  return <div className="wrapper">{children}</div>;
};

（<Wrapper><span>OK</span></Wrapper>は動作しますが、文字列を直接渡すとエラーになります）

この方法は、必ずコンポーネント要素をchildrenに入れたいときに便利です。