マップを使用して配列内のデータを表示する

  • 5 分

配列に格納されているデータのコレクションを操作することはよくあります。 配列データの操作は他のオブジェクトの操作と似ていますが、データをループ処理してユーザーに表示できる必要があります。 ご想像のとおり、JSX では JavaScript コードを使用してこれを行います。 具体的には、map 関数を使用します。

map を使用すると、配列の変更されたコピーを作成できます。 これは、表示のために配列の値を変換する必要がある場合に役立ちます。 ユーザーに値を表示するには、値を取得して HTML 要素内に埋め込みます。 これは map にぴったりのジョブです。 map を使用すると、表示用の配列に個々の値を含む HTML で構成される新しい配列を作成できます。

map を使用します

map の動作は、for...of ループまたは forEach メソッドと似ています。 配列内の項目ごとに 1 回実行されます。 主な違いは、map に渡された関数から返された値を使用して新しい配列が生成されることです。

数値の 2 乗を使用して、既存の配列から新しい配列を作成する方法を見ながら、map について説明します。 まず、数値の配列を作成します。

const numbers = [2, 5, 8];

次に map を使用します。 map は、1 つのパラメーターを使用して関数を受け取ります。 このパラメーターは、元の配列の各数値に設定されます。 この目的のために => (fat arrow 構文) を使用して匿名関数を作成します。

const squared = numbers.map((number) => {
    return number * number;
});

squared は、元の数値の 2 乗が格納される新しい配列です。 console.log を使用して表示した場合、次のように表示されます。

console.log(squared);
// Output: [4, 25, 64]

インデックスにアクセスしてキーを生成する

React で一覧を表示するときは、各項目にキーを設定します。 こうすることで、React とユーザーの両方が、現在表示されている個々の項目を参照し、それらをバインドされたデータに関連付けられるようになります。 キーを生成する最も一般的な方法は、配列内の項目のインデックスを使用することです。

for ループを使用する場合、構文の一部としてインデックスを生成することになります。 map を使用する場合、デリゲート関数の 2 番目のパラメーターを使用してインデックスにアクセスすることができます。 2 番目のパラメーターは、現在のインデックスに自動的に設定されます。

const squared = numbers.map((number, index) => {
    console.log(`Processing item ${index + 1}`);
    return number * number;
});

map と React

前の例で取り上げたように、通常は map を使用して項目の一覧を表示します。 主な違いは、(例のように) 数値を返すのではなく、JSX を返すことです。 React には、表示されるすべての項目にキーを用意すること、というガイドラインがあります。 表示している項目に自然キーがない場合は、インデックスを使用するのが一般的です。 たとえば、平方数を div 要素で表示する場合は、次のように使用できます。

const squared = numbers.map((number, index) => {
    return (
        <div key={index}>{ number * number }</div>
    );
});

squared は、JSX の他の変数と同じ方法で使用できます。 { squared } を他の場所で JSX に追加すると、更新された数値で div 要素のコレクションがレンダリングされます。