【実務・中級編】コンポーネントへのPropsの受け渡し構文 – React実践ガイド

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

2026.09.17

やあ。Reactを触り始めてしばらく経つと、コンポーネント間でPropsをどう受け渡すかという「作法」に迷うことはなくなるだろう。だが、中級者として一歩先へ進むなら、「ただ動くコード」ではなく「意図が明確で、拡張性に優れたコード」を書く必要がある。

今日は、ReactのProps受け渡しにおける「現場のリアルな勘所」を共有しよう。

—

JSXで属性を書くとき、初心者がやりがちなのが「なんでもかんでも波括弧 `{}` で囲む」ことだ。だが、Reactの仕様を理解していれば、もう少しエレガントに書ける。

静的な文字列を渡すときは、波括弧は不要だ。

// 悪い例：波括弧の無駄遣い

);
};

—

TypeScriptでPropsを定義する際、`interface`を使うか`type`を使うかは宗教論争に近いが、「コンポーネントの責務をどう切り出すか」を優先してほしい。

複数のコンポーネントで共通するPropsを、いちいち再定義するのは時間の無駄だ。

type BaseProps = {
className?: string;
children: React.ReactNode;
};

// 既存の型を拡張して、独自のPropsを追加する
interface CardProps extends BaseProps {
title: string;
elevation?: ‘low’ | ‘high’;
}

export const Card = ({ title, children, elevation = ‘low’ }: CardProps) => {
return (

{title}

{children}

);
};

—

ブラウザがDOMを生成する直前、Reactは君が書いたJSXを `React.createElement(type, props, …children)` という関数呼び出しに変換している。

君が書いた `