props｜基礎を学ぶ - ゆめさくコード

部品に値を渡す

前のレッスンで作った Profile は、名前も肩書きも中に直接書いてありました。これでは同じ内容しか出せません。部品の外から値を渡せるようにする仕組みが props です。props は properties の略で、「部品に付ける属性」と考えると分かりやすいです。

渡す側は HTML の属性と同じ書き方をします。

<Profile name="あおい" title="Web エンジニア" />

受け取る側は、関数の引数で受けます。引数の名前は慣習で props にします。

function Profile(props) {
  return (
    <section className="profile">
      <p>{props.name}</p>
      <p>{props.title}</p>
    </section>
  );
}

属性をいくつ並べても、受け取る側に届くのは1つのオブジェクトです。上の例なら、Profile の中の props はこうなっています。

{ name: "あおい", title: "Web エンジニア" }

だから props.name のようにドットでたどって取り出します。第2章で復習したオブジェクトの読み取りと同じことをしているだけです。

属性の値をクォートで囲むと文字列になります。数値や配列など文字列以外を渡したいときは、波かっこで囲みます。

<Work title="レシピ検索アプリ" year={2025} published={true} />

year="2025" と書くと文字列の 2025 が届きます。見た目は同じでも、あとで計算に使うときに困ります。数値は {2025} と書く、と覚えてください。

受け取った props を子の側で書きかえてはいけません。

function Profile(props) {
  props.name = "べつの名前";   // やってはいけない
  return <p>{props.name}</p>;
}

props は親から借りている値です。子が勝手に書きかえると、画面のどこで値が変わったのか誰にも追えなくなります。値は親から流れてきて、子は受け取って表示するだけ。この一方通行が React の画面が読みやすい理由です。値を変えたいときは、次の章で出てくる state を使います。

Profile に直接書いてある名前と肩書きを、props で受け取るように書きかえます。