JavaScriptのmap()とは？配列処理の基本から実践まで徹底解説

JavaScriptのmap()は、配列の各要素に対して処理を行い、新しい配列を生成するメソッドです。
配列操作の中でも非常に使用頻度が高く、コードの可読性と効率を大きく向上させます。

本記事では、map()の基本から実務で使える応用までを体系的に解説します。

map()とは何か

map()は、配列のすべての要素に対して関数を実行し、その結果を新しい配列として返すメソッドです。

特徴

• 元の配列は変更しない（イミュータブル）
• 必ず新しい配列を返す
• 要素数は変わらない

map()の基本構文

// map-basic.js
const newArray = array.map(function (element, index, array) {
  return element;
});

引数の説明

map()の基本的な使い方

値を2倍にする

// map-double.js
const numbers = [1, 2, 3, 4];

const result = numbers.map(function (num) {
  return num * 2;
});

console.log(result); // [2, 4, 6, 8]

アロー関数で簡潔に書く

map()はアロー関数と組み合わせることで、よりシンプルに書けます。

// map-arrow.js
const numbers = [1, 2, 3, 4];

const result = numbers.map((num) => num * 2);

console.log(result); // [2, 4, 6, 8]

アロー関数については、以下の記事で詳しく解説しています。
👉 JavaScriptのアロー関数とは？基本から使い方まで徹底解説

オブジェクト配列の変換

実務では、オブジェクト配列を加工するケースが多くあります。

// map-object.js
const users = [
  { name: "Taro", age: 20 },
  { name: "Jiro", age: 25 }
];

const names = users.map((user) => user.name);

console.log(names); // ["Taro", "Jiro"]

HTML要素生成での活用

map()はDOM操作やテンプレート生成にもよく使われます。

// map-html.js
const fruits = ["りんご", "みかん", "バナナ"];

const listItems = fruits.map((fruit) => `<li>${fruit}</li>`);

console.log(listItems.join(""));

forEachとの違い

map()と似たメソッドにforEach()がありますが、用途が異なります。

map()

• 新しい配列を作る
• returnが必要

forEach()

• 配列をループするだけ
• return不要

// map-vs-foreach.js
const numbers = [1, 2, 3];

// map
const result = numbers.map((num) => num * 2);

// forEach
numbers.forEach((num) => {
  console.log(num * 2);
});

forEach()については以下で詳しく解説しています。
👉 JavaScriptのforEachとは？配列ループの基本

map()とfilter()の組み合わせ

条件で絞り込んでから変換するパターンはよく使われます。

// map-filter.js
const numbers = [1, 2, 3, 4, 5];

const result = numbers
  .filter((num) => num % 2 === 0)
  .map((num) => num * 2);

console.log(result); // [4, 8]

filter()については以下の記事が参考になります。
👉 JavaScriptのfilter()とは？配列の絞り込みを徹底解説

map()使用時の注意点

returnを書き忘れる

// map-mistake.js
const numbers = [1, 2, 3];

const result = numbers.map((num) => {
  num * 2; // returnがない
});

console.log(result); // [undefined, undefined, undefined]

対策

// map-correct.js
const result = numbers.map((num) => {
  return num * 2;
});

map()が使えないケース

配列でない場合

// map-error.js
const obj = { a: 1, b: 2 };

// エラーになる
// obj.map(...)

配列に変換することで使用可能です。

// map-object-to-array.js
const obj = { a: 1, b: 2 };

const result = Object.values(obj).map((value) => value * 2);

console.log(result); // [2, 4]

map()を使うべき場面

以下のようなケースではmap()が適しています。

• 配列の各要素を変換したい
• 元データを変更せず処理したい
• 関数型プログラミング的に書きたい

map()の理解を深めるポイント

map()は単なるループではなく、「変換」のためのメソッドです。

この考え方を理解すると、コードの設計がより明確になります。

JavaScriptの配列操作全体を体系的に理解したい場合は、以下の記事も参考になります。
👉 JavaScriptの配列とは？基本から操作方法まで徹底解説

まとめ

• map()は配列を変換するメソッド
• 新しい配列を返し、元の配列は変更しない
• アロー関数と組み合わせると簡潔に書ける
• filter()などと組み合わせることで強力になる

関連記事

• JavaScriptの配列とは？基本から操作方法まで徹底解説
• JavaScriptのforEachとは？配列ループの基本
• JavaScriptのfilter()とは？配列の絞り込みを徹底解説
• JavaScriptのアロー関数とは？基本から使い方まで徹底解説