前回：Reactコンポーネントの基本：UIを部品化して再利用する設計のコツでは、画面を「部品（コンポーネント）」に分けて作る方法を学びました。
しかし、前回のボタンはどれを押しても同じ「こんにちは！」しか言えませんでしたよね。実際の開発では、**「見た目は同じだけど、表示する名前や色だけ変えたい」**という場面がほとんどです。
そこで登場するのが Props（プロップス） です。これを使えば、コンポーネントに「外からデータ」を渡して、個性を出すことができます。
1. Props（プロップス）とは何か？
Propsは「Properties（プロパティ）」の略で、日本語では「属性」や「設定値」を意味します。
イメージとしては、「関数の引数」のReact版です。
- 親（呼び出す側）がデータを渡す。
- 子（部品側）がそのデータを受け取って表示する。
このように、親から子へとデータが流れるのがReactの基本原則です。
2. Propsの書き方：渡す側と受け取る側
書き方は非常にシンプルです。
渡す側（親：App）
HTMLの属性のように 名前="値" と書きます。
JavaScript
<HelloButton name="太郎" />
受け取る側（子：HelloButton）
関数の引数として「オブジェクト」の形で受け取ります。
JavaScript
function HelloButton(props) {
return <button>{props.name}さん、こんにちは！</button>;
}
3. 【実践】個別の名前を表示するボタンを作ろう
それでは、第2回で作成した環境の App.jsx を書き換えて、Propsの動きを体験しましょう。
App.jsx（最小構成版）
JavaScript
import React from 'react';
// 1. 子コンポーネント：データを受け取る側
// 引数の props に、親から渡されたデータがまとまって入ってきます
function WelcomeMessage(props) {
return (
<div>
{/* JavaScriptのポイント：props.name で値を取り出す */}
<h2>ようこそ、{props.name}さん！</h2>
</div>
);
}
// 2. 親コンポーネント：データを渡す側
export default function App() {
return (
<div>
<h1>Propsのデモ</h1>
{/* 属性としてデータを渡す */}
<WelcomeMessage name="田中" />
<WelcomeMessage name="佐藤" />
<WelcomeMessage name="鈴木" />
<p>※同じ部品なのに、渡すデータによって表示が変わっています！</p>
</div>
);
}
4. コードの解説（JavaScript & React）
JavaScriptのポイント：オブジェクトのプロパティ
Propsの実体はただの JavaScriptオブジェクト です。 例えば親が name="田中" と渡すと、子の引数には { name: "田中" } というデータが届きます。だから props.name で中身にアクセスできるのです。
Reactのポイント：分割代入（応用）
現場では props.name と何度も書くのは面倒なので、以下のように 「分割代入」 というJavaScriptの機能を使って書くのが2026年現在の主流です。
JavaScript
// propsの中身をいきなり { name } として取り出す
function WelcomeMessage({ name }) {
return <h2>ようこそ、{name}さん！</h2>;
}
これだけでコードがさらにスッキリしますね。
5. Propsの鉄則：一方通行のルール
Propsには絶対に守らなければならないルールがあります。それは、「子は受け取ったPropsを自分で書き換えてはいけない」 ということです。
- OK: 親から届いた名前を表示する。
- NG: 子コンポーネントの中で
props.name = "別人"と書き換える。
データを変えたいときは、必ず「親」側で管理する必要があります。この「データの一方向性」が、Reactアプリが複雑になってもバグが起きにくい理由です。
今回のまとめ
- Props は、コンポーネントに外から渡す設定値。
- 親は
名前="値"で渡し、子は引数で受け取る。 - Propsを使えば、1つの部品をカスタマイズして再利用できる。
- Propsは 「読み取り専用」。子は中身を勝手に変えられない。
次回予告：useStateをマスターしよう
Propsは「外から届く固定のデータ」でした。 では、自分自身で変化するデータ（例えば、入力中の文字や、クリックで増える数字）はどう管理すればいいでしょうか？
第1回で少しだけ登場したあの「魔法の道具」を深掘りします。
次回、「第6回：useStateをマスター！Reactで画面を動的に書き換える『状態』の基本」。 これを知れば、Reactで「動かないものはない」と言えるほど重要な回です。お楽しみに！
本日の宿題：WelcomeMessage に、名前だけでなく color というPropsも追加してみてください。そして、その色を使って文字の色を変えることはできるでしょうか？（ヒント：第3回のJSXのルールを思い出してください！）
コメント