JS
map
中級読み方：マップ｜英語：Map
配列の各要素を変換して新しい配列を作るメソッドで、元の配列は変更されないよ。いつ使う？ 数値の配列を2倍にしたい、ユーザー配列から名前だけ取り出したいなど、配列の各要素を加工するときに使うよ。間違いやすいポイント: コールバック内でreturnを忘れると結果が[undefined, undefined, ...]になるよ。アロー関数で{}を使うならreturnを書こう。
やさしい説明
mapは、配列の各要素を変換して新しい配列を作るメソッドです。元の配列は変更されません。
「全員のテストの点数を2倍にする」「全員の名前を大文字にする」のように、配列の全要素に同じ処理を適用して新しい配列を得るときに使います。
forループの代わりに使えて、コードが短く読みやすくなります。
具体例・使い方
// 数値を2倍にする
[1, 2, 3].map(x => x * 2); // [2, 4, 6]
// オブジェクトから特定のプロパティだけ取り出す
const users = [{name:"太郎",age:15}, {name:"花子",age:16}];
users.map(u => u.name); // ["太郎", "花子"]
// Reactでリストを表示するときの定番パターン
// items.map(item => <li key={item.id}>{item.name}</li>)いつ使う？
配列のデータを別の形に変換するときに使います。APIのレスポンスを表示用に整形する、価格に税を加算する、Reactでリストを描画するなどが典型例です。
間違いやすいポイント
❌ mapの中でreturnを忘れる
// ❌ {}を使うとreturnが必要
[1,2,3].map(x => { x * 2 }); // [undefined, undefined, undefined]
// ✅ returnを書くか、{}を省略する
[1,2,3].map(x => x * 2); // [2, 4, 6]よくある疑問
Q: mapとforEachの違いは？
A: mapは新しい配列を返す、forEachは何も返さない（副作用のみ）。変換結果が欲しいならmap、単に処理するだけならforEachです。
Q: mapの書き方は？
A: const doubled = [1,2,3].map(n => n * 2); // [2,4,6]。各要素に関数を適用し、結果の配列を返します。
Q: mapで元の配列は変わる？
A: いいえ。mapは新しい配列を作って返します。元の配列はそのままです（非破壊的メソッド）。
関連用語
📖 関連レッスン
レッスンを見る →