JavaScript の map メソッドのやさしい解説
最初はむずかしく見えても大丈夫。map は「配列の中身を一つずつ変換して、新しい配列を作る道具」です。元の配列はそのまま、変換後だけ新しく返してくれるのが安心ポイント。
map の基本イメージ
- やること: 配列の全要素に同じ処理をして、その結果を集めて新しい配列を返す
- 元データ: 変わらない（破壊しない）
- 書き方（基本形）:
配列.map(function(要素, インデックス, 配列全体) {
return 変換後の値;
});
- 書き方（よく使う形＝アロー関数）:
配列.map(要素 => 変換後の値);
例題 1：数値をぜんぶ2倍にする
- 目的: [1, 2, 3] を [2, 4, 6] にしたい
const nums = [1, 2, 3];
const doubled = nums.map(n => n * 2);
console.log(doubled); // [2, 4, 6]
console.log(nums); // [1, 2, 3]（元の配列はそのまま）
- ポイント: return された値が「新しい配列の1要素」になる
例題 2：文字列を大文字にそろえる
- 目的: [‘apple’, ‘orange’] を [‘APPLE’, ‘ORANGE’] にしたい
const fruits = ['apple', 'orange'];
const upper = fruits.map(f => f.toUpperCase());
console.log(upper); // ['APPLE', 'ORANGE']
console.log(fruits); // ['apple', 'orange']（元の配列はそのまま）
例題 3：オブジェクト配列から特定の値だけ取り出す
- 目的: ユーザー情報から「名前だけのリスト」を作る
const users = [
{ id: 1, name: 'Sato', age: 20 },
{ id: 2, name: 'Suzuki', age: 25 },
{ id: 3, name: 'Tanaka', age: 30 },
];
const names = users.map(u => u.name);
console.log(names); // ['Sato', 'Suzuki', 'Tanaka']
- 応用: 複数の値を整形してもOK
const labels = users.map(u => `${u.id}: ${u.name} (${u.age})`); // ['1: Sato (20)', '2: Suzuki (25)', '3: Tanaka (30)']
例題 4：インデックス（場所）を使う
- 目的: 「1番目: …」のように番号付きにする
const items = ['pen', 'note', 'eraser'];
const labeled = items.map((item, index) => `${index + 1}番目: ${item}`);
console.log(labeled);
// ['1番目: pen', '2番目: note', '3番目: eraser']
例題 5：空文字や欠損を安全に処理する
- 目的: 名前の配列を「空は ‘N/A’ に置き換える」
const namesRaw = ['Sato', '', null, 'Yamada'];
const cleaned = namesRaw.map(n => (n ? String(n) : 'N/A'));
console.log(cleaned); // ['Sato', 'N/A', 'N/A', 'Yamada']
よくあるつまずきと対策
- return を忘れる
// NG: 何も返していないので、全部 undefined になる
const wrong = [1, 2, 3].map(n => { n * 2; });
console.log(wrong); // [undefined, undefined, undefined]
// OK: 値を return する
const ok = [1, 2, 3].map(n => n * 2);
- 副作用（元配列の中のオブジェクトを直接いじる）に注意
- map は「新しい配列を作る」ためのもの。中のオブジェクトを直接変更すると、別の場所で思わぬ影響が出ることがある。
- どうしても変更が必要なら、新しいオブジェクトを返す形にする。
const users = [{ name: 'Sato', age: 20 }];
const updated = users.map(u => ({ ...u, age: u.age + 1 }));
// users はそのまま、updated は年齢+1の新オブジェクト
- 配列の長さは変えない
- map は「同じ長さの配列」を返す。要素を間引きたいなら
filterを使う。
- map は「同じ長さの配列」を返す。要素を間引きたいなら
map と他メソッドの使い分け（ミニ比較）
- map: 中身を変換する（長さは同じ）
- filter: 条件に合うものだけ残す（長さが変わる）
- forEach: ただ回して処理する（新しい配列は作らない）
- 例：20歳以上のユーザーの名前を大文字で取得
const users = [
{ name: 'Sato', age: 20 },
{ name: 'Suzuki', age: 17 },
{ name: 'Tanaka', age: 30 },
];
const result = users
.filter(u => u.age >= 20) // 20歳以上に絞る
.map(u => u.name.toUpperCase()); // 名前を大文字に変換
console.log(result); // ['SATO', 'TANAKA']
練習問題（手を動かして慣れよう）
- 税込み価格をつくる
- 入力:
[100, 200, 300]、消費税率は 10%出力:['110円', '220円', '330円']
- 入力:
const prices = [100, 200, 300];
const withTax = prices.map(p => `${Math.round(p * 1.10)}円`);
console.log(withTax);
- 名前の頭文字だけ取り出す
- 入力:
['Sato', 'Suzuki', 'Tanaka']出力:['S', 'S', 'T']
- 入力:
const names = ['Sato', 'Suzuki', 'Tanaka'];
const initials = names.map(n => n[0]);
console.log(initials);
- メール一覧をドメインだけにする
- 入力:
['a@ex.com', 'b@test.jp']出力:['ex.com', 'test.jp']
- 入力:
const emails = ['a@ex.com', 'b@test.jp'];
const domains = emails.map(e => e.split('@')[1]);
console.log(domains);
まとめ
- map は「配列を変換して新しい配列をつくる」ための道具。
- 必ず「return する値」が新しい配列の各要素になる。
- 長さは変わらない。間引きたいときは filter、実行だけなら forEach。
- 実務では「データ整形」「表示用の文字列作成」「値の取り出し」で毎日のように使う。