JavaScript 逆引き集 | map で配列変換

JavaScript JavaScript
2025.12.02
スポンサーリンク

map で配列変換の基本

const r = arr.map(x => x * 2)

map は、「配列を別の配列に変換する」ための専用メソッドです。
天才プログラマー視点で言うと、「元の配列を壊さず、新しい配列を作りたいときの第一候補」が map です。

「1つ1つの要素に何か処理をして、その結果だけを集めた新しい配列が欲しい」
このときに、ほぼ必ず登場します。

map は「変換専用のコピー機」

まず形から見てみましょう。

const arr = [1, 2, 3];
const r = arr.map(x => x * 2);

console.log(r);      // [2, 4, 6]
console.log(arr);    // [1, 2, 3]（元はそのまま）
JavaScript

ここで重要なのは次のポイントです。

  • map は 新しい配列を返す
  • 元の配列 arr は 一切書き換えられない
  • コールバック関数の「戻り値」が、そのまま新しい配列の要素になる

つまり、「配列を変形して、新しい配列を作るためのメソッド」だと理解してください。

例題：税込価格の配列を作る

const prices = [100, 200, 300];
const taxRate = 0.1;

const pricesWithTax = prices.map(p => Math.round(p * (1 + taxRate)));

console.log(pricesWithTax); // [110, 220, 330]
console.log(prices);        // [100, 200, 300]
JavaScript

ここでの流れはこうです。

  1. prices の各要素 p に対して
  2. p * (1 + taxRate) を計算し
  3. その結果を新しい配列 pricesWithTax に入れていく

「元データはそのまま」「変換結果だけ別配列にする」というのが、map の典型パターンです。

コールバック関数の引数を深掘りする

map のコールバックは、最大3つの引数を受け取れます。

arr.map((value, index, array) => {
  // value: 今の要素
  // index: その要素のインデックス
  // array: 元の配列そのもの
});
JavaScript

よく使うのは value と index です。

const names = ["Aki", "Mika", "Ken"];

const labeled = names.map((name, index) => {
  return `${index + 1}. ${name}`;
});

console.log(labeled); // ["1. Aki", "2. Mika", "3. Ken"]
JavaScript

ここでのポイントは、

  • map のコールバックは 必ず「戻り値」を返すことが前提
  • その戻り値が、新しい配列の要素になる
  • 「何を返すか」を考えるのが、map を使うときの中心になる

ということです。

例題：オブジェクト配列を別の形に変換する

const users = [
  { id: 1, name: "Aki" },
  { id: 2, name: "Mika" },
  { id: 3, name: "Ken" }
];

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

console.log(names); // ["Aki", "Mika", "Ken"]
JavaScript

ここでは、

  • 元の配列：ユーザーオブジェクトの配列
  • 新しい配列：名前だけを取り出した配列

という変換を行っています。

このように、map は 「複雑な配列から必要な情報だけを抜き出す」 場面でも大活躍します。

forEach との違いをしっかり理解する（重要）

初心者がよく混乱するのが、forEach と map の違いです。

forEach のイメージ

  • 「配列を一周して、何か処理をする」
  • 戻り値は使わない（常に undefined）
  • 外側の変数を書き換えることが多い（副作用）
const arr = [1, 2, 3];
let sum = 0;

arr.forEach(x => {
  sum += x;
});
JavaScript

map のイメージ

  • 「配列を一周して、変換結果を集めた新しい配列を作る」
  • 戻り値がそのまま新しい配列になる
  • 外側の変数を書き換えなくても済むことが多い
const arr = [1, 2, 3];

const doubled = arr.map(x => x * 2);
// doubled: [2, 4, 6]
JavaScript

天才講師として一言でまとめるなら、
「何かを“返したい”なら map、“やりたいだけ”なら forEach」
と覚えると、使い分けが一気に楽になります。

例題：フラグ付きの配列を作る

const scores = [90, 55, 78, 30, 100];

const result = scores.map(score => {
  return {
    score,
    passed: score >= 60
  };
});

console.log(result);
/*
[
  { score: 90, passed: true },
  { score: 55, passed: false },
  { score: 78, passed: true },
  { score: 30, passed: false },
  { score: 100, passed: true }
]
*/
JavaScript

ここでのポイントは、

  • 元の配列は「数値の配列」
  • 新しい配列は「オブジェクトの配列」
  • map は 型（形）が変わる変換 にも使える

ということです。
「配列の形を変える」という意味で、map はまさに「変換専用ツール」です。

よくあるミスと注意点を深掘りする

コールバックで return を書き忘れる

const arr = [1, 2, 3];

const r = arr.map(x => {
  x * 2; // return がない！
});

console.log(r); // [undefined, undefined, undefined]
JavaScript

ブロック {} を使ったときは、必ず return を書く必要があることに注意してください。

省略形で書くならこうです。

const r = arr.map(x => x * 2); // これは暗黙の return
JavaScript

副作用目的で map を使わない

// これはアンチパターン
arr.map(x => console.log(x));
JavaScript

「結果の配列を使わないのに map を使う」のは、プロの現場では嫌われます。
その場合は素直に forEach を使うべきです。

まとめ：map は「配列変換の主役」

map を使いこなせると、コードの質が一段階上がります。

  • 元の配列を壊さず、新しい配列を作れる
  • 「何を返すか」を考えることで、ロジックが整理される
  • 数値 → 数値、オブジェクト → 別のオブジェクト、など柔軟に変換できる
  • forEach と違い、「変換している」という意図がコードから伝わる

配列を見たときに、
「これは変換だな」と感じたら、まず map を思い出す。
この感覚が身につくと、あなたの JavaScript は一気に“プロの書き方”に近づきます。

前へ
123
スポンサーリンク
タイトルとURLをコピーしました