配列の .map メソッドについて

.map メソッドは配列の全ての要素に対して指定した関数を実行し、その結果から新しい配列を作成します。基本的な構文はこうです。

let newArray = oldArray.map(function (item) {
  // ここで何かしらの処理を行う
  return newValue;
});

oldArray が元の配列、newArray が新しく生成された配列です。関数の中の item は今処理している要素で、newValue が新しい配列に入る値になります。

具体的な例を見てみましょう。次の配列があるとします：

let numbers = [1, 2, 3, 4, 5];

各要素を 2 倍にするなら、.map を使ってこう書きます。

let doubled = numbers.map(function (item) {
  return item * 2;
});

console.log(doubled); // [2, 4, 6, 8, 10]

このように .map を使えば、配列の各要素に同じ処理をかけて、その結果を新しい配列にまとめるのが簡単になります。非破壊的なので、元の配列はそのまま残ります。

.map は JavaScript でよく使う道具の一つです。配列の変換を短く読みやすいコードで書けます。自分のコードでも一度試してみてください。思っていたより出番が多いはずです。

React での .map メソッドの利用

ここまで見てきたとおり、.map は配列の各要素に関数を適用して、新しい配列を作ります。これが React のコンポーネントのレンダリングでも役に立ちます。配列のデータから同じ形のコンポーネントをいくつも作りたい場面は多いので、.map がそのまま使えるわけです。

まず、データの配列を用意します。例えばこんな配列です。

let names = ["太郎", "花子", "次郎"];

この名前をそれぞれリストアイテムとしてレンダリングしたい、としましょう。.map ならこう書けます。

function NameList() {
  let names = ["太郎", "花子", "次郎"];

  return (
    <ul>
      {names.map((name, index) => (
        <li key={index}>{name}</li>
      ))}
    </ul>
  );
}

このコードでは .map で names 配列の各要素から <li> タグを作っています。key プロパティに index を渡しているのは、React が各要素を追跡して効率よく再レンダリングできるようにするためです。

この key プロパティは、配列の要素が追加・削除・変更されたときに、React が無駄なく再レンダリングするための手がかりで、一意で予測できる値を渡すのが基本です。index でも動きますが、要素の並び順が変わりうる場合は一意の ID を使うほうが安全でしょう。

React と .map を組み合わせると、配列のデータから複数のコンポーネントをまとめてレンダリングできます。扱うデータが多い動的なウェブアプリを作るときほど、この書き方が楽になります。

自分で試そう：挑戦編

腕試しに、次の 3 問を解いてみてください。.map の動きを確かめて、React での使い方に慣れるための問題です。

挑戦 1: 数値配列の操作

以下の数値配列があるとします：

let numbers = [10, 20, 30, 40, 50];

.map メソッドを使用して、各数値を半分にした新しい配列を作成してみてください。

解答

挑戦 2: オブジェクト配列の操作

次に、オブジェクトの配列があります：

let students = [
  { name: "太郎", age: 15 },
  { name: "花子", age: 14 },
  { name: "次郎", age: 16 },
];

.map メソッドを使用して、生徒全員の年齢が 1 歳増えた新しいオブジェクトの配列を作成してみてください。

解答

挑戦 3: React でのレンダリング

最後は React です。先ほどの students 配列を使って、生徒それぞれの名前と年齢を表示する <Student> コンポーネントをレンダリングしてみてください。表示は次のような形になるようにします。

太郎 (15歳)
花子 (14歳)
次郎 (16歳)

解答