コンテンツにスキップ

6

Propsを使ったデータの表示

ここまでのところ、<Header /> コンポーネントを再利用する場合、毎回同じ内容が表示されます。

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

しかし、別のテキストを渡したい場合や、外部ソースからデータを取得しているため、事前に情報がわからない場合はどうすればよいでしょうか。

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

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

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

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

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

propsの使用

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

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

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

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

console.log()でpropsを出力すると、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>タグの内容をtitle変数に置き換えることができます。

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

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

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

JSXで変数を使用する

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

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

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

  1. ドット表記のオブジェクトプロパティ
example.js
function Header(props) {
  return <h1>{props.title}</h1>;
}
  1. テンプレートリテラル
example.js
function Header({ title }) {
  return <h1>{`Cool ${title}`}</h1>;
}
  1. 関数の戻り値
example.js
function createTitle(title) {
  if (title) {
    return title;
  } else {
    return 'Default title';
  }
}
 
function Header({ title }) {
  return <h1>{createTitle(title)}</h1>;
}
  1. または三項演算子
example.js
function Header({ title }) {
  return <h1>{title ? title : 'Default Title'}</h1>;
}

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

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

これで、コンポーネントは汎用的なtitle propsを受け入れるようになり、アプリケーションのさまざまな部分で再利用できます。必要なのは、title文字列を変更することだけです。

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

追加のリソース

チャプターを完了しました6

propsを使ってデータを表示する方法を学びました。

次へ

7：状態を使ったインタラクティブ性の追加

Reactの状態とイベントリスナーを使ってインタラクティブ性を追加する方法を学びます。

チャプター7を開始