JS
map
中級読み方：マップ｜英語：Map
配列の各要素を変換して新しい配列を作るメソッドで、元の配列は変更されないよ。
やさしい説明
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>)似たメソッドとの違い
| メソッド | 何をする？ | 戻り値 |
|---|---|---|
map() | 全要素を変換する | 同じ長さの新しい配列 |
filter() | 条件に合う要素を残す | 短くなった新しい配列 |
forEach() | 各要素で処理するだけ | なし（undefined） |
reduce() | 全要素を1つにまとめる | 合計などの単一の値 |
いつ使う？
- APIのレスポンスを表示用の形に整形するとき
- 価格に税を加算するなど、全要素を計算で変換するとき
- 配列からHTMLの一覧（<li>など）を生成するとき
- Reactでリストを描画するとき（定番パターン）
「変換したいなら map、ただ繰り返したいなら forEach」が使い分けの基本。新しい配列が欲しいかどうかで選びます。元の配列は変更されない（非破壊）ので安心して使えます。
間違いやすいポイント
❌ mapの中でreturnを忘れる
を使うと return が必要です。書き忘れると全部 undefined になります。1行なら を省略すると自動でreturnされて安全です。
// ❌ {}を使うとreturnが必要
[1,2,3].map(x => { x * 2 }); // [undefined, undefined, undefined]
// ✅ returnを書くか、{}を省略する
[1,2,3].map(x => x * 2); // [2, 4, 6]❌ 変換しないのに map を使う
ただ全要素を処理したいだけ（コンソール出力など）なら forEach を使いましょう。mapを使うと「使われない新しい配列」が無駄に作られます。
よくある疑問
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は新しい配列を作って返します。元の配列はそのままです（非破壊的メソッド）。
関連用語
📖 関連レッスン
レッスンを見る →