組み込み関数

JavaScriptのmap()入門｜配列の変換処理をマスターしよう

map()は、JavaScriptの配列メソッドの中でも最も使用頻度の高いメソッドの一つです。配列の各要素に対して関数を実行し、その結果から新しい配列を作成します。元の配列を変更せずにデータを変換できるため、モダンなJavaScript開発では欠かせない存在です。

基本的な使い方

map()メソッドは、配列の各要素に対してコールバック関数を実行し、その戻り値で構成された新しい配列を返します。元の配列は変更されません。

JavaScript
// 基本構文
const newArray = array.map(function(element, index, array) {
  return 変換後の値;
});

// アロー関数を使った簡潔な書き方
const newArray = array.map((element) => 変換後の値);

コールバック関数は3つの引数を受け取ります。第1引数は現在の要素、第2引数はインデックス番号、第3引数は元の配列です。通常は第1引数のみを使用することが多いです。

JavaScript
const numbers = [1, 2, 3, 4, 5];

// 各要素を2倍にする
const doubled = numbers.map(num => num * 2);
console.log(doubled);

// インデックスも活用する
const withIndex = numbers.map((num, index) => `${index}: ${num}`);
console.log(withIndex);
実行結果
[2, 4, 6, 8, 10]
["0: 1", "1: 2", "2: 3", "3: 4", "4: 5"]

map()は必ず元の配列と同じ長さの配列を返します。各要素が1対1で変換されるため、データの変換処理に最適です。

オブジェクト配列の変換

実務では、APIから取得したオブジェクトの配列を加工する場面でmap()が頻繁に使われます。特定のプロパティだけを抽出したり、データの形式を変換する際に非常に便利です。

JavaScript
const users = [
  { id: 1, name: "田中", age: 28, department: "開発部" },
  { id: 2, name: "佐藤", age: 32, department: "営業部" },
  { id: 3, name: "鈴木", age: 24, department: "開発部" }
];

// 名前だけの配列を作成
const names = users.map(user => user.name);
console.log(names);

// 新しい形式のオブジェクトに変換
const profiles = users.map(user => ({
  fullName: `${user.name}（${user.department}）`,
  isYoung: user.age < 30
}));
console.log(profiles);
実行結果
["田中", "佐藤", "鈴木"]
[
  { fullName: "田中（開発部）", isYoung: true },
  { fullName: "佐藤（営業部）", isYoung: false },
  { fullName: "鈴木（開発部）", isYoung: true }
]

オブジェクトを返す場合、アロー関数では括弧()で囲む必要がある点に注意してください。囲まないと波括弧がブロックとして解釈されてしまいます。

実践的な活用例

map()は他の配列メソッドとチェーンして使うことで、複雑なデータ処理もシンプルに書けます。

JavaScript
// 商品データの変換と整形
const products = [
  { name: "ノートPC", price: 89000, stock: 5 },
  { name: "マウス", price: 3500, stock: 20 },
  { name: "キーボード", price: 12000, stock: 8 }
];

// 税込価格を追加し、表示用テキストを生成
const displayItems = products.map(product => {
  const taxIncluded = Math.floor(product.price * 1.1);
  return {
    ...product,
    taxIncluded,
    label: `${product.name} - ¥${taxIncluded.toLocaleString()}（残り${product.stock}個）`
  };
});

displayItems.forEach(item => console.log(item.label));
実行結果
ノートPC - ¥97,900（残り5個）
マウス - ¥3,850（残り20個）
キーボード - ¥13,200（残り8個）
map()とforEach()の違い

map()は新しい配列を返しますが、forEach()はundefinedを返します。データの変換が目的ならmap()、副作用のある処理（DOM操作やログ出力など）が目的ならforEach()を使い分けましょう。

注意点

map()のコールバック内でreturnを書き忘れると、undefinedが配列に入ってしまいます。また、map()は常に元の配列と同じ長さの配列を返すため、要素を除外したい場合はfilter()を組み合わせるか、flatMap()を使用してください。

まとめ

  • map()は配列の各要素を変換して新しい配列を返すメソッド
  • 元の配列は変更されない（イミュータブルな操作）
  • コールバック関数は要素・インデックス・元の配列の3つの引数を受け取る
  • オブジェクトをreturnする場合はアロー関数の括弧に注意
  • filter()やreduce()とチェーンして使うことが多い