ReactのPropsを理解する

React入門18 / 10

このレッスンでは、Reactの「Props」という機能を使って、コンポーネントにデータを渡す方法を学んでいきましょう！

Props とは

「Props」（プロップス）とは、「プロパティ」の略でコンポーネントに渡すデータのことです。

たとえば、誰かに手紙を送るとき、その手紙には宛名やメッセージが書かれています。
Propsも同じで、あるコンポーネントから別のコンポーネントへ情報やメッセージを送る方法です。

これで、コンポーネントは受け取った情報に基づいてさまざまな表示や動作をすることができます。

Propsの基本的な使い方

コンポーネントにPropsを渡す

まず、コンポーネントにデータを渡すとき、そのデータを属性として指定することで、コンポーネントに対して必要な情報を送ることができます。

<Card
  title="タイトル名"
  text="ここに本文が入ります"
/>;

たとえば、このコードでは、Cardコンポーネントにtitleとtextという自分で作った属性のようなものを使ってデータを渡しています。

この属性のようなものを React ではPropsと呼びます。

これを使えば、コンポーネントにも外からデータを渡して、動きや見た目をカスタマイズすることができるんだ！

次は、データを受け取るCardコンポーネントを見てみましょう！

コンポーネントで Props を受け取る

ReactでPropsを受け取るには、実はいろいろな方法があります。

一番基本的なのは、Propsを一つのオブジェクトとして受け取る方法です。

オブジェクトで受け取る方法

function Card(props) {
  return (
    <div className="card">
      <h1 className="card-title">{props.title}</h1>
      <p className="card-text">{props.text}</p>
    </div>
  );
}

function Card(props){...}

この書き方で、Cardコンポーネントは、Propsをそのまま受け取ります。

Propsのプロパティにアクセスするには、props.titleやprops.textのようにpropsの後にドット（.）をつけて指定します。

どんなPropsもまとめて一つのオブジェクトに入れて、それをコンポーネント内で使うパターンだね！

分割代入で受け取る方法

もう一つは、JavaScriptの分割代入を使って、Propsから必要なデータだけを取り出す方法です。

function Card({ title, text }) {
  return (
    <div className="card">
      <h1 className="card-title">{title}</h1>
      <p className="card-text">{text}></p>
    </div>
  );
}

function Card({ title, text }){...}

この書き方で、Cardコンポーネントはtitleと textという 2つのPropsを受け取っています。

Propsの中から必要な値だけを取り出して、直接使うことができます。
これを分割代入といいます。

どちらの書き方でも OK！
分割代入を使うと、props.titleと書く代わりに、titleと直接的に書けるからコードがスッキリするね！

これらをまとめた実際のコードで、異なるtitleとtextプロパティを持つ2枚のカードがどのように表示されるかを見てみましょう！

export function Card({ title, text }) {
  return (
    <div className="card">
      <h1 className="card-title">
        {title}
      </h1>
      <p className="card-text">
        {text}
      </p>
    </div>
  );
}

Propsのおかげで、いろいろなデータを同じコンポーネントに渡せるから便利だね！

デフォルトの値を設定する

Propsにデフォルト値を設定することもできます。
これは、特定のPropが渡されなかった場合に備えて、あらかじめ値を設定しておく方法です。

下のコードでは、Cardコンポーネントが使われる時にもし、titleの値が指定されなかった場合、自動的に「タイトルなし」と表示されるように設定しています。

export function Card({ title = "タイトルなし", text }) {
  return (
    <div className="card">
      <h1 className="card-title">{title}</h1>
      <p className="card-text">{text}</p>
    </div>
  );
}

実行結果を見てみましょう👇

export function Card({
  title = "タイトルなし",
  text,
}) {
  return (
    <div className="card">
      <h1 className="card-title">
        {title}
      </h1>
      <p className="card-text">
        {text}
      </p>
    </div>
  );
}

名前を書かないと「名無し」って書かれるのと同じイメージだよ。これで、タイトルがなくても何かしら表示されるから安心だね。