JavaScript配列変換（map）の基本と実践
「配列の各要素を加工して、新しい配列を作りたい」なら map が最短ルート。元の配列には触れず、処理結果だけを返してくれるので、初心者でも安全に“変換”を積み上げられます。
構文と考え方
const result = arr.map((value, index, array) => {
// ここで value を変換して返す
return /* 新しい値 */;
});
- 役割: 各要素に関数を適用し、その返り値で「新しい配列」を返す。元の配列は変更されない。
- 引数: コールバックに最大3つ（value, index, array）が渡される。インデックスや元配列参照が必要なときに使える。
- ポイント: 「必ず値を返す」こと。返さないと
undefinedの配列になる。副作用中心なら forEach を選ぶ（forEachは新しい配列を返さない）。
すぐ使えるテンプレート集
基本：数値を2倍にする
const nums = [1, 2, 3];
const doubled = nums.map(x => x * 2);
console.log(doubled); // [2, 4, 6]
- ポイント: 値を「どう変換するか」だけに集中できる。元配列はそのまま。
文字列を整形する（トリム＋大文字化）
const names = [" aki ", "mao", " Ren "];
const normalized = names.map(s => s.trim().toUpperCase());
console.log(normalized); // ["AKI", "MAO", "REN"]
- ポイント: 複数の加工を組み合わせるのが得意。mapの返り値は新しい配列。
オブジェクト配列から特定プロパティを抜き出す
const users = [
{ name: "Aki", age: 19 },
{ name: "Mao", age: 22 },
{ name: "Ren", age: 17 },
];
const ages = users.map(u => u.age);
console.log(ages); // [19, 22, 17]
- ポイント: 「形を変える」用途にハマる。プロパティ抽出は定番。
条件付きで値を変える（例：未成年ラベル付け）
const users = [
{ name: "Aki", age: 19 },
{ name: "Mao", age: 22 },
{ name: "Ren", age: 17 },
];
const labeled = users.map(u => ({
...u,
label: u.age >= 20 ? "adult" : "minor",
}));
console.log(labeled);
// [{name:"Aki",age:19,label:"minor"}, ...]
- ポイント: 元要素を壊さず拡張したいときはスプレッドで新オブジェクトを返す。
よくある落とし穴と回避策
- 返り値を忘れてしまう
- 症状: 配列が
undefinedだらけになる。 - 回避: アロー関数の「式戻り」で短く書くか、
returnを必ず入れる。
- 症状: 配列が
- 副作用をしがち
- 症状: mapの中で
pushや外部更新をしてしまう。 - 回避: 副作用中心は forEach。mapは「新しい配列を返すための関数」と割り切る。
- 症状: mapの中で
- 早期終了・スキップが必要になる
- 症状: 条件によって処理を止めたい／飛ばしたい。
- 回避: 早期終了は for／for…of を使う。スキップしたいなら filter を併用してから map するのが定番。
- Map（データ構造）と混同
- 注意: Array.prototype.map と、キー・値を扱う Map オブジェクトは別物。用途もAPIも異なる。
他の手段との使い分け
| 手段 | 目的 | 元配列の変更 | 返り値 |
|---|---|---|---|
| map | 変換（形を変える） | しない | 新しい配列 |
| filter | 選別（残す・捨てる） | しない | 新しい配列 |
| reduce | 集計・畳み込み | しない | 単一値や任意構造 |
| forEach | 副作用（ログ、DOM操作、push など） | 任意（設計次第） | なし（undefined） |
- 直感の結論: 新しい配列が欲しいなら map。選別は filter、合計やオブジェクト化は reduce。副作用は forEach。
応用パターン（現場でよく使う書き方）
- インデックスも使う
- ポイント: 第2引数でインデックスを受け取れる。
const items = ["A", "B", "C"];
const labeled = items.map((v, i) => `${i + 1}. ${v}`);
// ["1. A", "2. B", "3. C"]
- filter と組み合わせる（無効値の除去 → 変換）
- ポイント: 「まず絞る、次に変換」が読みやすい。
const raw = ["", "Aki", null, "Ren", undefined];
const clean = raw.filter(Boolean).map(s => s.toUpperCase());
// ["AKI", "REN"]
- 複数段の変換（map の連結）
- ポイント: ステップが明確なら分けて書くと可読性が上がる。
const nums = [1, 2, 3];
const result = nums.map(n => n * 10).map(n => `¥${n}`);
// ["¥10", "¥20", "¥30"]
- オブジェクト配列の形替え（表示用へ）
const products = [
{ id: 1, name: "Pen", price: 120 },
{ id: 2, name: "Note", price: 300 },
];
const view = products.map(p => ({
key: p.id,
title: `${p.name}（税込）`,
priceWithTax: Math.round(p.price * 1.1),
}));
練習問題（手を動かして覚える）
- 合計金額の税込価格配列を作る
const prices = [100, 250, 400];
const withTax = prices.map(p => Math.round(p * 1.1));
console.log(withTax); // [110, 275, 440]
- ユーザー名のタグ文字列へ変換
const users = [{name:"Aki"}, {name:"Mao"}, {name:"Ren"}];
const tags = users.map(u => `<li>${u.name}</li>`);
console.log(tags); // ["<li>Aki</li>", ...]
- 数値配列を「偶数/奇数」ラベルに変換
const nums = [3, 7, 11, 12, 5];
const labels = nums.map(n => (n % 2 === 0 ? "even" : "odd"));
console.log(labels); // ["odd", "odd", "odd", "even", "odd"]
- 文字列配列の空文字・null除去＋整形
const names = ["", " Aki", null, "Ren "];
const normalized = names
.filter(Boolean)
.map(s => s.trim().toLowerCase());
console.log(normalized); // ["aki", "ren"]