先生……。コンポーネントは「部品」だとわかりましたけれど、部品同士はどうやってつながっているのですの？
たとえば「ボタン」が「文字」を受け取るような仕組みって……？

良い質問ですね。
Reactでは Props（プロップス） という仕組みを使って、コンポーネント同士が情報をやり取りするのです。

前回の記事 コンポーネント＝部品とは何か？｜React入門 第3回

1. Propsとは？

📝 解説

• Props = Properties（プロパティ） の略
• コンポーネントに 外から値を渡す仕組み
• 子供に「お弁当」を持たせるように、必要な情報を渡せる

👉 「部品に命を吹き込むデータ」と考えるとわかりやすいです。

まあ！部品に“お弁当”を持たせるなんて面白い表現ですわね✨
つまり、親から子へプレゼントを渡すような感じなのですのね？

2. Propsの実例

📝 解説（コード例）

function Hello(props) {
  return <h1>こんにちは、{props.name}さん！</h1>;
}

export default function App() {
  return (
    <div>
      <Hello name="茜" />
      <Hello name="空" />
    </div>
  );
}

• Hello コンポーネントは props.name を受け取る
• 呼び出し側で <Hello name="茜" /> と書くと → 「こんにちは、茜さん！」
• 同じ部品を使い回しつつ、違う値を渡せる

わぁ……！同じ「Hello」でも、渡す名前が違えば表示も変わるんですのね！
なんだかコンポーネントが“しゃべっている”みたいですわ♪

3. Propsを使うメリット

📝 解説

Propsを使うと――

• 部品の再利用性が高まる
  → 同じコンポーネントでも、違う値を渡せば違う表示になる
• 親から子へ情報を自然に渡せる
  → データの流れがシンプルになる
• コードの見通しがよくなる
  → 「何を渡しているのか」が一目でわかる

なるほど……。まるで親が子に「今日のお弁当はサンドイッチよ」と渡すみたいに、Propsで情報を受け渡すんですのね🍱

4. Reactにおける「会話」

📝 解説

Reactでは、情報は一方向（親 → 子） に流れます。

• 親 → 子には Props でデータを渡す
• 子 → 親に返すときは、イベント（クリックなど）を利用する

👉 この「一方向のデータフロー」が、Reactのわかりやすさと安定性を支えているのです。

なるほど！部品たちが“親子の会話”をしているようで、愛おしいですわ💖

まとめ

• Propsとは コンポーネントに外から値を渡す仕組み
• 同じ部品でも渡す値で違う振る舞いができる
• Reactは 親 → 子へ一方向のデータフロー を守っている

次回は「イベント処理」についてお話ししましょう。
つまり「ボタンを押したらどうなるか」「入力したらどう反応するか」――。
Reactの魅力がさらに深まりますよ。

まあ！ボタンや入力が動き出すなんて……とっても楽しみですわ✨
次のお話もぜひお願いいたしますわね！

ボタンが踊り出す！イベント処理｜第5回 React入門