JavaScriptで配列データを扱う際、頻繁に利用されるのが map() 関数（メソッド）です。
「配列の中身を全部2倍にしたい」「ユーザーリストから名前だけを取り出したい」といった、データの加工や抽出を行う場面で非常に強力な武器になります。
for 文よりも map が標準的に使われています。しかし、初心者の方にとっては「forEach と何が違うの？」「引数の書き方がよく分からない」と迷うポイントでもあります。
この記事では、JavaScriptの map 関数の基本的な使い方から、実務でよく使う連想配列（オブジェクトの配列）での活用法、そして名前が似ている Map オブジェクトとの違いまで、スタンダードな書き方を交えて徹底解説します。
 執筆者：マヒロ |
|
map関数とは？配列の要素を加工して新しい配列を作る
map 関数は、配列のすべての要素に対して同じ処理を行い、その結果を新しい配列として返すメソッドです。
「元の配列を変更せず（非破壊的）、新しい配列を作る」という点が最大の特徴です。
基本的な書き方と構文
基本的には、配列に対して .map() を繋げ、その中に「コールバック関数（行わせたい処理）」を記述します。
const newArray = array.map((element) => {
// ここに加工処理を書く
return 加工後の値;
});
サンプルコード：数値を2倍にする
最もシンプルな例として、数値が入った配列の各要素を2倍にしてみましょう。
const numbers = [1, 2, 3, 4, 5];
// mapを使って各要素を2倍にする
const doubled = numbers.map((num) => {
return num * 2;
});
console.log(doubled);
console.log(numbers);
実行結果
[2, 4, 6, 8, 10]
[1, 2, 3, 4, 5]
ソースコードの解説
numbers.map(...)：numbers配列の要素を一つずつ取り出して処理を開始します。(num)：取り出された要素が引数numに入ります（1, 2, 3…と順番に渡されます）。returnnum* 2：要素を2倍にした値を返します。この戻り値が新しい配列の要素になります。- 結果：
doubledには新しい配列[2, 4, 6, 8, 10]が入り、元のnumbersは変更されずに残っています。
map関数の引数：要素、インデックス、元配列の受け取り方
map 関数のコールバック関数には、実は最大で3つの引数を指定することができます。
普段は第1引数（要素）しか使いませんが、インデックス番号が必要な場合などに役立ちます。
3つの引数の役割
- 第1引数（必須）：現在処理している要素の値（currentValue）。
- 第2引数（任意）：現在処理している要素のインデックス番号（index）。
- 第3引数（任意）：
mapを呼び出している元の配列そのもの（array）。
サンプルコード：インデックスを使った処理
順番（インデックス）を使って、「◯番目の要素は〜」という文字列を作ってみましょう。
const fruits = ["Apple", "Banana", "Orange"];
const messages = fruits.map((fruit, index) => {
// インデックスは0から始まるため、+1 して表示
return `${index + 1}番目のフルーツは${fruit}です`;
});
console.log(messages);
実行結果
[
"1番目のフルーツはAppleです",
"2番目のフルーツはBananaです",
"3番目のフルーツはOrangeです"
]
ソースコードの解説
(fruit, index)：第1引数で要素（Appleなど）、第2引数でインデックス（0, 1, 2）を受け取っています。- テンプレートリテラル：
`${...}`を使い、変数と文字列を結合しています。 - このように、データの値だけでなく「順番」に意味がある処理を行う際に便利です。
forEachとの決定的な違いは「戻り値」の有無
map とよく比較されるのが forEach です。
どちらも配列をループ処理しますが、その目的と動作には明確な違いがあります。
違いのまとめ
| 特徴 | map | forEach |
|---|---|---|
| 戻り値 | 新しい配列 | undefined（なし） |
| 目的 | データを加工・変換したい時 | 単に繰り返し処理を行いたい時 |
| 元の配列 | 変更しない（非破壊） | 変更しない（処理内容による） |
サンプルコードでの比較
forEach は値を返さないため、結果を変数に入れても undefined になってしまいます。
const numbers = [1, 2, 3];
// mapの場合
const mapResult = numbers.map(num => num * 2);
console.log(mapResult); // [2, 4, 6]
// forEachの場合
const forEachResult = numbers.forEach(num => num * 2);
console.log(forEachResult); // undefined
使い分けのポイント
- map：加工した結果を別の配列として保持したい場合。
- forEach：ログ出力や、データベースへの保存など、値を返す必要がない場合。
実践！連想配列（オブジェクトの配列）から特定の値を抽出する
実務で map が最も活躍するのは、APIなどから取得した「オブジェクトの配列（連想配列のリスト）」を扱う場面です。
複雑なデータ構造から、必要なプロパティ（IDや名前など）だけを抜き出してリスト化する際によく使われます。
ユーザーリストからIDだけを抜き出す
以下のようなユーザー情報のリストから、IDだけの配列を作ってみましょう。
const users = [
{ id: 1, name: "Tanaka", role: "Admin" },
{ id: 2, name: "Suzuki", role: "User" },
{ id: 3, name: "Sato", role: "Guest" }
];
// 各オブジェクトから id プロパティだけを返す
const userIds = users.map((user) => user.id);
console.log(userIds);
実行結果
[1, 2, 3]
ソースコードの解説
users.map((user) => user.id):- 配列
usersの中身はオブジェクト{id: 1, …}です。 - これが引数
userに渡されます。 user.idとすることで、オブジェクト内のidの値だけを取り出して返しています。
- 配列
- このテクニックは、セレクトボックスの選択肢を作ったり、APIにIDリストを送ったりする際に非常に頻繁に使用します。
アロー関数を使った省略記法（モダンな書き方）
ES6（ES2015）以降、JavaScriptではアロー関数 => を使うのが一般的です。
特に map の処理が1行で終わる場合、return や { } を省略して非常にシンプルに書くことができます。
省略記法の例
const numbers = [10, 20, 30];
// 従来の書き方（無名関数）
const result1 = numbers.map(function(num) {
return num * 2;
});
// アロー関数（returnあり）
const result2 = numbers.map((num) => {
return num * 2;
});
// アロー関数（省略記法）★推奨
const result3 = numbers.map(num => num * 2);
console.log(result3); // [20, 40, 60]
ただ、処理が複数行になる場合や、オブジェクトそのものを返す場合（({ id: 1 }) のようにカッコが必要）は、省略記法が使えない、または書き方に注意が必要です。
まずは基本の形を覚えておき、慣れてきたら省略記法を使うと良いでしょう。
注意！「Mapオブジェクト」と「mapメソッド」は別物
JavaScriptを学習していると、「Map」という用語が2回出てきて混乱することがあります。
今回解説しているのは Array.prototype.map() という配列のメソッドですが、これとは別に Map という組み込みオブジェクトが存在します。
Mapオブジェクトとは？
Map オブジェクトは、キーと値のペアを保持するためのコレクション（データ構造）です。
連想配列（オブジェクト）と似ていますが、キーに文字列以外（数値やオブジェクトなど）も使える点が異なります。
// これは Map オブジェクト（配列のmapメソッドとは無関係）
const myMap = new Map();
myMap.set('key1', 'value1');
console.log(myMap.get('key1'));
「配列のmap」 と 「Mapオブジェクト」 は全く用途が異なるため、検索や学習の際は混同しないように注意しましょう。
JavaScriptのスキルを活かして年収を上げる方法
以上、JavaScriptのmap関数の使い方について解説してきました。
なお、JavaScriptのスキルがある場合には、「副業で稼いで年収を上げる」といったことが可能です。
エージェントサービスは、登録も利用もすべて完全無料なので、どんな求人や案件があるのか気になる方は、気軽に利用してみるとよいでしょう。
