チャプター6

Propsでデータを表示する

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

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 propを渡すことができます。

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

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

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

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

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

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

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

その後、<h1> タグのコンテンツを title 変数で置き換えることができます。

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

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

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

JSXでの変数の使用

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

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

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

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

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

テンプレートリテラル

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

関数の返り値

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

または三項演算子

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

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

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

コンポーネントは、アプリケーションのさまざまな部分で再利用できる汎用的なtitle propを受け取るようになりました。title文字列を変更するだけで済みます。

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

リストの反復処理

リストとして表示する必要があるデータは一般的です。配列メソッドを使用してデータを操作し、スタイルは同じですが異なる情報を含むUI要素を生成できます。

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

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() メソッドを使用して配列を反復処理し、アロー関数を使用して名前をリストアイテムにマッピングできます。

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のような一意であることが保証されているものを使用することをお勧めします。

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