React での forEach()メソッドのアプリケーション

最新の ES6 バージョンの JavaScript の導入により、多くの便利な機能がもたらされました。 .forEach() メソッドはほんの一例です。

名前から推測できるように、.forEach() メソッドは、配列内のすべてのアイテムに対してコールバック関数を実行します。これは、配列内のすべてのアイテムを何らかの方法で変換するために行われます。

React では、リストに基づいてコンポーネントをレンダリングすることがよくあります。たとえば、ユーザー名のリストがあり、それらすべてを段落として表示する必要があることは珍しくありません。

その過程で、大文字にするなど、別の方法で変換することもできます。

JSX の要素への配列アイテム

JSX は、コンポーネントを構造化する手間を軽減する、おなじみの HTML のような構文です。最終的に、JSX で記述されたコードは、React.createElement() メソッド呼び出しの複雑なセットにコンパイルされます。

JSX 内で .forEach() またはその他の JavaScript メソッドを使用するには、中括弧の間に式を配置する必要があります。これは、中括弧の間のすべてを通常の JavaScript として扱うことを React に知らせるために必要です。

React の .forEach()

純粋な JavaScript では、.forEach() はすべての配列項目を変更するのに非常に便利です。

React のリストに基づいてコンポーネントをレンダリングしようとしている場合は、あまり役に立ちません。React 開発者がコンポーネントのレンダリングに .forEach() を使用しない理由は複数あります。

中括弧を使用してリストに基づいて複数のコンポーネントをレンダリングする場合、中括弧の間の式はコンポーネントのリストを返す必要があります。

この目的で .forEach() を使用しようとすると、何もレンダリングされないことがわかります。これは、.forEach() が未定義を返すために発生します。

本来、.forEach() は値を返すようには設計されていません。その主な目的は、すべての配列要素を変換することですが、それ以外は変換しません。このメソッドは新しい配列を返しません。undefined を返します。

代わりに、React 開発者は代替メソッド .map() を使用します。

代替手段としての .map()

ES6 では .map() メソッドも導入されました。これは、リストに基づいてコンポーネントをレンダリングするのに適しています。

.forEach() のように、それは 1つの引数を取ります-配列内のすべての項目を変換する方法を指定する関数です。ただし、.forEach() とは異なり、map メソッドは元の配列を残し、変換されたアイテムを含む新しい配列を返します。

これは、配列に基づいて複数のコンポーネントをレンダリングするために必要なものです。

例を見てみましょう：

class App extends Component {
  render() {
    return <div>{[1,2,3].map(number => <h1>{number}</h1>)}</div>;
  }
}

この例では、新しい配列を作成するために .map() する数値の配列を取得しました。新しい配列には、元の配列の 3つの数値を持つ 3つの <h1> 要素が含まれています。

.map() メソッドを使用する場合は、新しい各要素に個別の key プロップを指定することもお勧めします。React は、key 値を使用して一意の要素を識別します。

このパターンに従った後の上記のコードブロックは次のようになります。

class App extends Component {
  render() {
    return <div>{[1,2,3].map(number => <h1 key={number}>{number}</h1>)}</div>;
  }
}

配列内の数値は一意であるため、それらの値を key として使用できます。