JavaScriptのmapとは？forEachとの違いと配列を加工する方法を解説

JavaScript

JavaScriptを用いたモダンなWeb開発、特にReactやVue.jsといったコンポーネントベースのライブラリを扱う現場において、配列操作メソッドの習熟は避けて通れません。その中でも最も頻繁に使用され、かつコードの品質を左右するのが map メソッドです。

本記事では、JavaScriptの配列操作における中核を担う map メソッドについて、実務で直面する設計判断やパフォーマンス、さらにはモダンな開発現場での標準的な書き方までを網羅的に解説します。

JavaScriptのmapとは？

JavaScriptの map を一言で定義するなら、「既存の配列の各要素に対して特定の処理を行い、その結果を詰め込んだ『新しい配列』を生成するメソッド」です。

mapの役割：結論

mapの最大の役割は、データの非破壊的な変換にあります。

  • 配列の全要素を1つずつ取り出し、関数（コールバック関数）を実行する
  • 実行した結果を戻り値（return）として受け取り、新しい配列を作成する
  • 元の配列（レガシーなデータ）を壊さず、次の処理に必要な形へアップデートする

イメージ：「コピーしながら変換する」

mapを理解する上で重要なイメージは、工場のベルトコンベアです。元の部品（配列要素）が流れてきて、それを加工して、別のラインに新しい製品として並べていくイメージです。元のラインにある部品には一切手を加えません。

この「元のデータを保持したまま、新しいデータを作る」という特性は、イミュータビリティ（不変性）が重視される現代のプログラミングにおいて、副作用の少ない安全なコードを書くための必須条件となっています。

forEachとmapの違い

配列をループ処理するメソッドとして、古くから親しまれているのが forEach です。一見すると map と同じように見えますが、その設計思想と技術的な役割は根本から異なります。ここを混同すると、バグの温床になるだけでなく、コードの可読性を著しく低下させます。

forEachは「処理する」

forEachは、配列の各要素に対して「何かアクションを起こす」ためのメソッドです。

  • 用途：ログの出力、DOMへの直接的な操作、外部変数の更新など。
  • 特徴：forEach自体は何も返しません。（戻り値がundefined ）。
const numbers = [1, 2, 3];
numbers.forEach(num => {
  console.log(num * 2); // 画面に出すだけ
});

【関連記事】

・JavaScriptのforEachとは？使い方とfor文との違いをわかりやすく解説【初心者OK】

mapは「加工して返す」

対して map は、配列を「別の形に作り替える」ためのメソッドです。

  • 用途：計算結果の保持、オブジェクト形式の変換、UIコンポーネントへの展開など。
  • 特徴：常に新しい配列を返します。
const numbers = [1, 2, 3];
const doubled = numbers.map(num => {
  return num * 2; // 加工して「返す」
});
console.log(doubled); // [2, 4, 6] という新しい配列ができる

使い分けまとめ

実務における判断基準を以下の比較表にまとめました。

比較項目mapforEach
戻り値（return）必須（新しい要素を返すため）不要（使っても無視される）
新しい配列の生成生成する生成しない
主な用途データの変換・加工実行・副作用（ログ出力など）
メソッドチェーン可能（次に .filter( ) などが繋げる）不可（戻り値がないため）

SEO・可読性における：

エンジニアのレビューにおいて、値を加工したいだけなのに forEach の中で外部の空配列に push しているコードを見かけることがありますが、これは避けるべきパターンです。 map 使えば、たった1行で宣言的に記述でき、意図が明確になります。

mapの基本的な使い方

mapを使いこなすための第一歩は、その構文を正確に理解することです。

基本構文

mapは引数に「コールバック関数」を取ります。この関数は配列の要素数分だけ繰り返されます。

const newArray = array.map(function(value, index, array) {
  // 処理内容
  return 加工した値;
});
  • value：現在処理されている要素の値
  • index：現在のインデックス番号（0から開始）
  • array：mapを実行している元の配列自体

return必須

mapの内部で return を書き忘れると、新しい配列の要素はすべてundefined になってしまいます。これは最も多いケアレスミスの一つです。

実際の例：数字を2倍にする

最もシンプルな数値計算の例です。

const prices = [100, 200, 500];
const taxIncluded = prices.map(price => {
  return price * 1.1;
});
// 結果: [110, 220, 550]

アロー関数で書く方法

現代のJavaScript（ES6以降）では、 map をアロー関数で記述するのが業界標準です。これにより、コードの記述量を大幅に削減し、ロジックを直感的に表現できます。

簡略化のプロセス

通常の記述：

const doubled = numbers.map((num) => {
  return num * 2;
});

アロー関数（1行）での記述：

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

実務でのメリット：
1行で記述する場合、 return キーワードと中括弧 { } を省略できます。これを「暗黙の戻り値（Implicit Return）」と呼びます。コードが極めて簡潔になり、データフローが追いやすくなります。

mapでよくある使い方（実践編）

単なる数値計算を超え、実際のプロジェクトで map がどのように活用されているか、3つのケーススタディを紹介します。

文字列を加工する

ユーザー一覧の名前をすべて大文字に変換したり、特定の接頭辞を付けたりする場合に有効です。

const users = ["tanaka", "sato", "suzuki"];
const upperUsers = users.map(name => name.toUpperCase());
// ["TANAKA", "SATO", "SUZUKI"]

HTML要素を動的に生成する

JavaScriptでWebページを動的に構築する際、 map は威力を発揮します。特にReactなどのフレームワークでは、リスト表示に map を用いるのが鉄則です。

const menuItems = ["Home", "About", "Contact"];
const htmlList = menuItems.map(item => `<li>${item}</li>`);
// ["<li>Home</li>", "<li>About</li>", "<li>Contact</li>"]
// この後、.join('') で結合してDOMに挿入する流れが一般的

APIデータを整形する

サーバーから取得した生のJSONデータ（APIデータ）は、フロントエンドで使いやすい形とは限りません。不要な項目を削り、キー名を変更する作業を map で行います。

const rawApiData = [
  { id: 1, user_name: "dev_01", email: "test1@example.com" },
  { id: 2, user_name: "dev_02", email: "test2@example.com" }
];

const formattedUsers = rawApiData.map(user => ({
  userId: user.id,
  name: user.user_name
}));
/*
結果: [
  { userId: 1, name: "dev_01" },
  { userId: 2, name: "dev_02" }
]
*/

mapでよくある間違いと落とし穴

技術習得において、成功例よりも「失敗例」を知る方が学習効率は高まります。実務のコードレビューで見かける代表的なミスを挙げます。

returnを書き忘れる（最重要）

前述しましたが、これが圧倒的に多いミスです。特に波括弧 { } を付けて複数行で処理を書く際に、最後に return を忘れると配列の中身が消滅します。

forEachと混同して、戻り値を使わない

mapを使っているのに、その戻り値を変数に代入せず、単にループとして使っているケースです。

// 悪い例
const result = [];
numbers.map(num => result.push(num * 2)); // mapの無駄遣い。forEachを使うべき。

元の配列が変わると思っている

mapは破壊的なメソッドではありません。

const original = [1, 2, 3];
const changed = original.map(n => n * 10);

console.log(original); // [1, 2, 3] のまま（変わらない）
console.log(changed);  // [10, 20, 30]

元の配列自体に書き換えたい場合は、代入し直すか、他のアプローチを検討する必要があります。

mapを使うメリット

なぜ、旧来の for ループや forEach ではなく map が推奨されるのでしょうか。

  1. コードの宣言的記述：「どうループするか」ではなく「何を何に変換するか」という意図がコードから読み取れるようになります。
  2. 不変性の維持：元のデータを汚染しないため、大規模開発におけるステート管理が容易になります。
  3. メソッドチェーン：mapで変換した直後に .filter( ) で絞り込み、さらに .reduce( ) で集計するといった、関数型プログラミングのような流れるような記述が可能です。

mapとfilterの違い

よく比較される filter メソッドについても触れておきます。

  • map：要素を「変換」する（数は変わらない）
  • filter：条件に合う要素を「抽出」する（数は減る可能性がある）

「1000円以上の商品だけを消費税込みの価格にする」という処理を行うなら、まず filter で抽出し、その後に map で加工するというのがスマートな実装です。

まとめ：JavaScript mapを使いこなす

mapメソッドの本質は、単なるループ処理ではなく「データの変換」にあります。

  • mapは「加工して新しい配列を返す」のが仕事。
  • forEachは「その場で何かを実行する」のが仕事。
  • アロー関数とreturnの扱いに慣れることが実務への近道。

この違いを明確に意識することで、あなたのコードはより堅牢で、他のエンジニアからも読みやすい「プロフェッショナルな品質」へと進化します。まずはAPIレスポンスの整形や、動的なHTMLの生成から map を取り入れてみてください。

タイトルとURLをコピーしました