チャプター6

Props を使ったデータの表示

これまでのところ、<Header /> コンポーネントを再利用すると、両方とも同じコンテンツが表示されます。

index.html

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

しかし、異なるテキストを渡したい場合や、外部ソースからデータをフェッチしているため事前に情報が分からない場合はどうでしょうか？

通常のHTML要素には、要素の動作を変更するための情報の一部を渡すために使用できる属性があります。例えば、src 属性を変更すると表示される画像が変わり、<a> タグの href 属性を変更するとリンクの宛先が変わります。

同様に、Reactコンポーネントに情報の一部をプロパティとして渡すことができます。これらは props と呼ばれます。例えば、ボタンの様々なバリエーションを考えてみましょう。

Diagram showing 3 variations of a button component: Primary, Secondary, and Disabled

JavaScript関数と同様に、コンポーネントの動作や画面にレンダリングされたときに視覚的に表示されるものを変更するカスタム引数（またはprops）を受け入れるコンポーネントを設計できます。そして、これらのpropsを親コンポーネントから子コンポーネントに渡すことができます。

注: Reactでは、データはコンポーネントツリーを下に流れます。これは一方向データフローと呼ばれます。次の章で説明するStateは、propsとして親コンポーネントから子コンポーネントに渡すことができます。

propsの使用

HomePage コンポーネントでは、HTML属性を渡すのと同じように、カスタムの title propをHeader コンポーネントに渡すことができます。

index.html

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

そして、子コンポーネントである Header は、それらのpropsを最初の関数パラメータとして受け取ることができます。

index.html

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

propsをconsole.log()で出力すると、それがtitleプロパティを持つオブジェクトであることがわかります。

index.html

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

propsはオブジェクトなので、関数パラメータ内でpropsの値を明示的に命名するためにオブジェクトの分割代入を使用できます。

index.html

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

次に、<h1> タグのコンテンツをタイトル変数に置き換えることができます。

index.html

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

ブラウザでファイルを開くと、「title」という実際の単語が表示されるのがわかります。これは、Reactがあなたがプレーンテキストの文字列をDOMにレンダリングしようとしていると考えているためです。

これがJavaScript変数であることをReactに伝える方法が必要です。

JSXでの変数の使用

title propを使用するには、波括弧 {} を追加します。これらは、JSXマークアップ内に通常のJavaScriptを直接記述できるようにする特別なJSX構文です。

index.html

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

波括弧は、「JSXランド」にいる間に「JavaScriptランド」に入る方法と考えることができます。波括弧の中には、任意のJavaScript式（単一の値に評価されるもの）を追加できます。例えば

ドット記法を使ったオブジェクトプロパティ

example.js

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

テンプレートリテラル

example.js

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

関数の戻り値

example.js

function createTitle(title) {
  if (title) {
    return title;
  } else {
    return 'Default title';
  }
}
 
function Header({ title }) {
  return <h1>{createTitle(title)}</h1>;
}

または三項演算子

example.js

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

これで、タイトルpropに任意の文字列を渡すことができます。あるいは、三項演算子を使用した場合、コンポーネントでデフォルトケースを考慮しているため、タイトルpropをまったく渡さなくてもよくなります。

example.js

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

これで、コンポーネントは一般的なタイトルpropを受け入れ、アプリケーションの様々な部分で再利用できるようになりました。あとはタイトル文字列を変更するだけです。

index.html

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

リストの繰り返し処理

リストとして表示する必要があるデータを持つことはよくあります。配列メソッドを使用してデータを操作し、スタイルは同じでも異なる情報を持つUI要素を生成できます。

以下の名前の配列をHomePage コンポーネントに追加します。

index.html

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
 
  return (
    <div>
      <Header title="Develop. Preview. Ship." />
      <ul>
        {names.map((name) => (
          <li>{name}</li>
        ))}
      </ul>
    </div>
  );
}

次に、array.map() メソッドを使用して配列を反復処理し、アロー関数を使用して名前をリストアイテムにマップできます。

index.html

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
 
  return (
    <div>
      <Header title="Develop. Preview. Ship." />
      <ul>
        {names.map((name) => (
          <li>{name}</li>
        ))}
      </ul>
    </div>
  );
}

「JavaScript」と「JSX」のランドを行き来するために波括弧をどのように使用したかに注目してください。

このコードを実行すると、Reactはkey propが不足しているという警告を表示します。これは、Reactが配列内のアイテムを一意に識別するために何かを必要とするためで、どの要素をDOMで更新すべきかを知るためです。

現状では名前がユニークなので、一時的に名前を使用できますが、アイテムIDのように一意であることが保証されたものを使用することが推奨されます。

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>
  );
}

追加リソース

コンポーネントへのpropsの受け渡し

リストのレンダリング

条件付きレンダリング

Props を使ったデータの表示

propsの使用

JSXでの変数の使用

リストの繰り返し処理

チャプター完了6