初心者でも分かる！JavaScriptのmap()メソッドと配列操作の実例4選

JavaScriptには配列を操作するための便利なメソッドが多数用意されていますが、その中でも頻繁に使用されるのがmap()メソッドです。このメソッドを使えば、配列の各要素に対して何らかの処理を施し、新しい配列を作成することができます。本記事では、map()の基本から応用までをサンプルコード付きで分かりやすく解説していきます。

map()メソッドとは？

map()メソッドは、配列の各要素に対して指定した関数を適用し、その結果を基に新しい配列を作成するためのメソッドです。
このメソッドは、元の配列を変更することなく、新しい配列を返します。

// element: 現在処理している配列の要素
// index: 現在の要素のインデックス
// array: 元の配列

const newArray = originalArray.map((element, index, array) => {
  return element; // 必ず値を返す必要がある
});

map()とforループの違い

map()はforループやforEach()と似た役割を果たしますが、いくつか重要な違いがあります。

特徴	forループ	forEach()	map()
返り値	なし（手動で配列を作成）	なし（配列操作用）	新しい配列を返す
元の配列の変更	任意	任意	変更しない
目的	汎用的なループ処理	配列の副作用的操作	配列の要素変換

つまり、新しい配列が必要な場合はmap()を選ぶのが最適です。

map()の基本例

配列の各要素に対して処理を適用し、新しい配列を作成する例を見てみましょう。

例1: 数値の二乗を求める

const numbers = [1, 2, 3, 4, 5];
const squares = numbers.map(num => num ** 2);

console.log(squares); // [1, 4, 9, 16, 25]

解説

配列numbersの各要素に対し、矢印関数で「二乗」を計算。
新しい配列squaresが返されますが、元の配列numbersは変更されません。

map()の応用例

より実用的なシナリオでのmap()の使い方も見てみましょう。

例2: オブジェクトのプロパティ値を抽出

例えば、ユーザー情報が多数格納されたデータベースから「名前だけを一覧にして表示したい」という場合、この方法が役立ちます。

const users = [
  { id: 1, name: "太郎", age: 25 },
  { id: 2, name: "次郎", age: 30 },
  { id: 3, name: "三郎", age: 35 }
];

// ユーザー名のリストを作成
const userNames = users.map(user => user.name);

console.log("ユーザー名一覧:", userNames.join(", ")); 
// 出力: ユーザー名一覧: 太郎, 三郎

例3: 条件に基づいて値を変換

以下の例では、テストの点数に基づいて「合格」または「不合格」を判定し、新しい配列に結果を格納します。

const scores = [45, 78, 88, 92, 56]; // テストの点数リスト
const passMark = 60; // 合格ライン（60点）

// 条件による合否判定
const results = scores.map(score => (score >= passMark ? '合格' : '不合格'));

console.log(results); // ['不合格', '合格', '合格', '合格', '不合格']

例4: filter()と組み合わせる

map()は他の配列メソッドと組み合わせることでさらに強力になります。
偶数だけを二乗する処理を実装します。

const numbers = [1, 2, 3, 4, 5, 6];
const evenSquares = numbers
  .filter(num => num % 2 === 0) // 偶数だけを抽出
  .map(num => num ** 2);        // 二乗に変換

console.log(evenSquares); // [4, 16, 36]

map()の使いどころと注意点

使いどころ

配列の要素を別の形式に変換したいとき（例: 数値の計算、文字列の加工）。
オブジェクト配列から特定のプロパティだけを抽出したいとき。

注意点

常に新しい配列を返す
元の配列は変更されません。元の配列を変更したい場合は、forEach()や他の方法を検討してください。
戻り値を返さないとundefinedが格納される
map()内のコールバック関数でreturnを忘れると、新しい配列にはundefinedが格納されます。

const numbers = [1, 2, 3];
const wrongResult = numbers.map(num => {
  num * 2; // 戻り値がない
});

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

豆知識：似ているけど違うもの！map()とMapオブジェクト

JavaScriptには名前が似ている「Map」というものもありますが、これはmap()メソッドとは全くの別物です。

map()メソッド

配列に対して使用し、新しい配列を生成するためのメソッド。
配列の各要素を加工・変換するのが目的。

Mapオブジェクト

キーと値のペアを管理するためのコレクション（データ構造）。
任意の型をキーとして使える（文字列、オブジェクト、関数など）。
データの検索・格納が効率的に行える。

const myMap = new Map();
myMap.set('apple', 150); // キー'apple'に値150を格納
myMap.set('banana', 120);

console.log(myMap.get('apple')); // 150
console.log(myMap.has('banana')); // true

まとめ

JavaScriptのmap()メソッドは、配列を変換し、新しい配列を作成するのに最適なツールです。元の配列を変更せずに処理を行うため、コードの可読性や安全性が向上します。また、名前が似ているMapオブジェクトは別の用途（キーと値の管理）に使用されるため、用途に応じて適切な方法を選びましょう。

ぜひ、実際にコードを書いてmap()とMapそれぞれの便利さを体験してみてください！

JavaScriptのmap()メソッドとは？基本の使い方と実例解説