配列のmap(要素を変換する)

このレッスンでは、配列の.map()メソッドを使いこなし、配列の各要素を変換した新しい配列を作れるようになることを目標にします。「JavaScript map 使い方」「JavaScript 配列 変換」で検索している方向けの内容です。

.map(関数)は、配列の各要素に同じ処理を行い、新しい配列を作ります。「ベルトコンベアの上を通すと、全部の商品が同じように加工される機械」のようなものです。元の配列は変わりません。データの一覧を画面表示用に整形するときなど、実際のWebアプリで最も頻繁に使われる配列メソッドの1つです。

サンプルコードでは、numsという配列の各要素を2倍にしたdoubledという新しい配列を.map((n) => n * 2)で作っています。元のnums配列はそのまま変わっていない点を、コンソールの出力で確認してみましょう。for文で1つずつ書くより短く、「何をしたいか」という意図も伝わりやすくなります。

初心者がよくつまずくのが、.map()はコールバック関数の中で必ず値をreturnしないといけない点です。returnを忘れると、新しい配列の中身がすべてundefinedになってしまいます。また.forEach()と混同しやすいですが、forEachは新しい配列を作らない点が大きな違いです。

実際の開発現場では、サーバーから受け取った商品データの配列を、画面に表示するためのHTML要素の配列に変換するといった処理でmapが頻繁に使われます。元の配列を壊さずに新しい配列を作れる安全性も、実務で好まれる理由の1つです。

.map()はチェーン(連続してつなげて書くこと)しやすいのも特徴で、.filter()で絞り込んでから.map()で変換する、という組み合わせも実務で頻繁に見かけるパターンです。