Chapter 6: Props

コンポーネントをそのまま再利用すると，同じ内容しか表示できません。ここではコンポーネントにデータを渡す仕組みである Props（プロップス） を理解し，柔軟に見た目を変えられるようにしましょう。

Props はコンポーネントの「引数」

HTML の属性が要素の振る舞いを変えるように，React コンポーネントにも外部から値を渡せます。その値をまとめたオブジェクトが props です。

index.html

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}

function HomePage() {
  return (
    <div>
      <Header />
      <Header />
    </div>
  );
}

このままでは 2 つの <Header /> は同じ内容を描画します。そこで title という props を渡してみましょう。

index.html

function HomePage() {
  return (
    <div>
      <Header title="React" />
    </div>
  );
}

props を受け取る

コンポーネントは関数なので，引数として props を受け取ります。

index.html

function Header(props) {
  console.log(props); // { title: "React" }
  return <h1>Develop. Preview. Ship.</h1>;
}

props はオブジェクトです。分割代入を使って取り出すとコードが読みやすくなります。

index.html

function Header({ title }) {
  return <h1>Develop. Preview. Ship.</h1>;
}

<h1> の中身を title に差し替える場合は {} で囲んで JSX 内から JavaScript を参照します。

index.html

function Header({ title }) {
  return <h1>{title}</h1>;
}

{} の中には式（最終的に値が 1 つに決まるもの）であれば何でも書けます。テンプレートリテラルや関数の戻り値も利用可能です。

example.js

function Header({ title }) {
  const label = title ? `Cool ${title}` : 'Default title';
  return <h1>{label}</h1>;
}

Props で再利用性を高める

同じコンポーネントでも渡す props を変えるだけで出力を切り替えられます。

index.html

function HomePage() {
  return (
    <div>
      <Header title="React" />
      <Header title="A new title" />
    </div>
  );
}

このとき title が渡されない場合に備えて，デフォルト値を用意しておくと親コンポーネントの記述ミスにも対応できます。

example.js

function Header({ title }) {
  return <h1>{title ? title : 'Default title'}</h1>;
}

配列を描画する（リストレンダリング）

現実のアプリでは配列データをまとめて表示したい場面が多くあります。map() を使うと配列の各要素から JSX を生成できます。

index.html

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];

  return (
    <div>
      <Header title="Develop. Preview. Ship." />
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
    </div>
  );
}

key props を忘れずに

React はリストの各要素を識別するために key を必要とします。今回のように配列の値が一意であればそのまま使えますが、実務では ID など衝突しない値を選びましょう。

{} を使って JSX と JavaScript を行き来しながら、柔軟な表示ができるようになると React の表現力が一気に広がります。

参考リンク

次の章では，コンポーネントの内部で変化するデータ State を扱い，インタラクティブな UI を作っていきます。