mapは「配列を順番に処理するメソッド」とだけ覚えると、forEachやMapオブジェクトとの違いで迷いやすくなります。Array.prototype.mapの要点は、各要素を変換した結果から新しい配列を作ることです。実務で使う形と、つまずきやすいポイントを順に確認します。
まず結論：mapは各要素を変換して新しい配列を返す
MDNではmapは配列の各要素にコールバックを実行し、その結果で新しい配列を作るメソッドとして説明されています。元配列から別の形の配列を作りたい場面に向いています。
const prices = [100, 200, 300];
const taxed = prices.map(price => price * 1.1);
console.log(taxed); // [110, 220, 330]用語解説：Array.prototype.map
配列の各要素を変換し、その戻り値を要素とする新しい配列を返す標準メソッドです。Mapオブジェクトとは別物です。
1. object配列から必要な値だけ取り出す
APIレスポンスや一覧データでは、object配列から表示用の形へ変換する用途がよくあります。必要なプロパティだけを返すと、後続処理のデータ構造を明確にできます。
const users = [
{ id: 1, name: 'Sato' },
{ id: 2, name: 'Suzuki' }
];
const labels = users.map(user => ({
value: user.id,
label: user.name
}));2. callbackではelement・index・arrayを受け取れる
mapのコールバックには現在の要素、index、元の配列が渡されます。indexは表示番号の作成などに使えますが、Reactのkeyのようにデータ識別子が必要な場面では安定したIDを優先します。
const names = ['A', 'B', 'C'];
const rows = names.map((name, index) => `${index + 1}: ${name}`);3. 波括弧を使うときはreturnを書き忘れない
アロー関数で波括弧を使う場合、明示的なreturnが必要です。returnを書かないと各要素の結果がundefinedになり、期待した配列になりません。
// NG: 戻り値がない
const a = [1, 2, 3].map(n => {
n * 2;
});
// OK
const b = [1, 2, 3].map(n => {
return n * 2;
});4. mapは副作用だけのために使わない
戻り値の配列を使わず、ログ出力や外部変数の更新だけが目的ならmapよりforEachの方が意図を表しやすくなります。mapは「変換結果を使う」場面に寄せると読みやすくなります。
| 目的 | 向いている方法 |
|---|---|
| 各要素を別の値へ変換する | map |
| 条件に合う要素を残す | filter |
| 副作用を伴う反復処理を行う | forEach |
（filterで条件に合う要素を抽出する方法については『【JavaScript入門】filter関数の使い方とよくあるエラー』をご参照ください）
5. parseIntをmapへ直接渡すときは引数に注意する
mapはコールバックへelementだけでなくindexも渡します。parseIntは第2引数を基数として受け取るため、map(parseInt)のように直接渡すと意図しない結果になります。変換したい値だけを明示的に渡します。
const values = ['10', '20', '30'];
const numbers = values.map(value => Number.parseInt(value, 10));6. mapメソッドとMapオブジェクトを混同しない
配列のmapメソッドは配列変換のための関数です。一方、Mapはキーと値を保持するコレクションです。名前は同じでも用途が異なります。
（配列・JSON・Mapを含むJavaScriptデータ操作の全体像については『JavaScriptの配列・JSON・map・Map：データ操作術』をご参照ください）
よくある質問
mapは元の配列を変更しますか？
map自体は新しい配列を返します。ただし、要素がobjectで、そのobject自体を直接変更すれば参照先は変わり得ます。必要なら新しいobjectを返します。
mapで条件分岐して要素を除外できますか？
mapは基本的に入力要素ごとに結果要素を作ります。除外が目的ならfilterを組み合わせる方が意図を表しやすくなります。
まとめ：mapは変換結果を使うときに選ぶ
- mapは新しい配列を返す
- object配列の整形に使いやすい
- 波括弧を使うならreturnを忘れない
- 副作用だけならforEachを検討する
- parseIntなど複数引数を取る関数の直接渡しに注意する
手元のforループを1つ選び、「各要素を変換して新しい配列を作る処理」ならmapへ書き換えて動きを確認してみてください。
