JavaScriptのmapの使い方と便利な活用法を簡単に解説

JavaScriptの配列を操作する際、mapメソッドは非常に便利な道具です。

この記事では、JavaScriptのmapの使い方を基本からしっかり理解し、さらに便利な活用法まで学ぶことができます。mapを使うことで、複雑な配列操作も簡単に実現でき、コードの可読性も向上します。

初心者の方でも理解しやすいように、この記事を読むことでJavaScriptのmapを自由自在に使いこなせるようになるでしょう。

本記事の監修者：Zetto

 現役ITエンジニア
 Java Gold保有
 TypeScript(Vue.js)
 Java(SpringBoot)
 Programming Dream編集長

JavaScriptのmapとは？基本を理解しよう

map関数とは何か

JavaScriptのmapメソッドは、配列の要素を一つずつ取り出し、指定された関数を実行して新しい配列を生成するためのメソッドです。簡単に言うと、「ある配列をもとにして、別の配列を作るための道具」だと思ってください。例えば、全ての数字を2倍にしたり、名前リストを全て大文字に変換したりするときに使います。

mapメソッドの最大の特徴は、元の配列を変更せずに新しい配列を作り出すことです。そのため、「データの原本を残しつつ、新たなデータを加工したい」ときに非常に役立ちます。mapを使うことで、同じデータを何度でも再利用でき、必要に応じて違った加工を施すことが可能になります。

配列操作に便利なmapの概要

mapはJavaScriptで非常によく使われる配列メソッドの一つで、配列の各要素に同じ処理を行いたいときに特に便利です。例えば、次のような場面が考えられます：

• 配列の要素を全て別の形に変換したい
• オブジェクトのプロパティを取り出して新しい配列にしたい
• 数値データを特定の計算を使って変換したい

mapは、それぞれの要素に処理を行って、その結果から新しい配列を作るため、効率よくデータを整形したいときに力を発揮します。

mapを使うとどんなことができるのか

mapを使うと、例えば次のような処理が簡単にできます。

• 数字の配列を全て2倍にする
• 配列の中にあるオブジェクトの特定のプロパティだけを取り出す
• 各要素に対して何らかの条件を付けて新しい値に変換する

例えば、[1, 2, 3]という配列を使って、全ての値を2倍にする場合、mapを使えば次のように記述できます：

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]

このように、元の配列を変更せず、新しい配列を簡単に作成できるのがmapの強みです。

mapと他の配列メソッド（forEach・filter）との違い

JavaScriptには、map以外にも配列を操作するためのメソッドがいくつかあります。その中でも特に混同しやすいのがforEachとfilterです。それぞれの違いについて理解しておきましょう。

mapとforEachの違い

forEachもmapと同じように、配列の各要素に対して関数を実行するメソッドですが、重要な違いはforEachは新しい配列を作らない点です。forEachは単に配列の各要素に対して処理を行うため、「副作用（例えば、何かを表示するなど）」を必要とする場面で使われることが多いです。

一方、mapは必ず新しい配列を返します。そのため、何か変換結果を必要とする場合にはmapが適しています。

mapとfilterの違い

filterも配列を操作するメソッドですが、filterは「条件に合う要素だけを抽出して新しい配列を作る」ために使います。例えば、偶数の要素だけを取り出したい場合にはfilterが便利です。

一方、mapは全ての要素を何らかの形に変換して新しい配列を作るために使います。用途が異なるので、適材適所で使い分けることが重要です。

JavaScript mapの使い方：基礎から学ぶ

mapの基本的な構文と書き方

mapの使い方は非常にシンプルです。まずは基本的な構文を見てみましょう。

const newArray = oldArray.map((element, index, array) => {
  // ここに処理を書く
  return element; // 各要素を変換した結果を返す
});

mapは元の配列の各要素に対して順番に関数を実行し、その結果を新しい配列として返します。構文を理解することで、自分がどんな処理を行いたいかを明確にできます。

引数の役割について

mapメソッドで使われるコールバック関数は、3つの引数を持つことができます。

1. element: 現在処理している配列の要素。
2. index: 現在処理している要素のインデックス（何番目か）。
3. array: 元の配列全体。

多くの場合、elementだけを使うことが多いですが、複雑な操作をしたい場合にはindexやarrayも活用できます。

実際の使用例：簡単なサンプルコード

実際にJavaScriptのmapを使って、いくつかの例を見てみましょう。

配列の要素を2倍にする例

次に、簡単な例として、数字の配列を全て2倍にするコードを見てみましょう。

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(number => number * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

このコードでは、numbersという配列の全ての要素を2倍にし、新しい配列を作成しています。元の配列には影響がなく、新しい配列に変換されたデータが格納されます。

文字列を変換する例

次に、文字列を加工する例です。例えば、名前のリストを全て大文字に変換する場合、次のようにします。

const names = ['alice', 'bob', 'charlie'];
const uppercasedNames = names.map(name => name.toUpperCase());
console.log(uppercasedNames); // ['ALICE', 'BOB', 'CHARLIE']

ここでは、配列の各要素（名前）を大文字に変換し、新しい配列に格納しています。mapを使うことで、元のデータを効率的に変換することができます。

数字から文字列への変換例

次に、数値の配列を文字列の配列に変換する例です。

const numbers = [10, 20, 30];
const stringNumbers = numbers.map(num => `Number: ${num}`);
console.log(stringNumbers); // ['Number: 10', 'Number: 20', 'Number: 30']

このように、mapを使うことで配列の各要素をフォーマットして新しい配列を作ることも簡単です。

JavaScript mapの実践例：初心者向けのサンプルコード

mapで配列のデータを変換する

mapは単純な数値変換だけでなく、オブジェクトの操作にも役立ちます。オブジェクトのプロパティを取り出す例を見てみましょう。

オブジェクトのプロパティを抽出する例

次に、オブジェクトから特定のプロパティだけを取り出して新しい配列を作成する例です。

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];
const names = users.map(user => user.name);
console.log(names); // ['Alice', 'Bob', 'Charlie']

このように、オブジェクトの配列から特定のプロパティ（この場合はname）だけを取り出すこともmapで簡単に実現できます。

数値データを加工して新しい配列を作成する例

別の例として、年齢を1歳ずつ増やす操作もできます。

const updatedAges = users.map(user => ({
  ...user,
  age: user.age + 1
}));
console.log(updatedAges);
// [{ name: 'Alice', age: 26 }, { name: 'Bob', age: 31 }, { name: 'Charlie', age: 36 }]

このコードでは、ユーザーの年齢を1歳ずつ増やした新しいオブジェクトの配列を作成しています。元のデータには変更が加わらないため、安全にデータを加工できます。

配列内のオブジェクトをフォーマットする例

次に、ユーザーのデータをフォーマットして新しい配列を作成する例です。

const formattedUsers = users.map(user => ({
  description: `${user.name} is ${user.age} years old.`
}));
console.log(formattedUsers);
// [{ description: 'Alice is 26 years old.' }, { description: 'Bob is 31 years old.' }, { description: 'Charlie is 36 years old.' }]

このように、各オブジェクトを加工して新しい配列を作ることで、データの見た目を整えることができます。

mapでAPIから取得したデータを整理する

データを使いやすく整形する実践例

APIから取得したデータもmapを使って整形することが可能です。例えば、取得したデータが複雑で、特定の情報だけを抜き出して使いやすい形にする必要がある場合、mapは非常に便利です。

例えば、次のようなJSONデータがあったとします：

const apiData = [
  { id: 1, title: '記事1', content: '内容1' },
  { id: 2, title: '記事2', content: '内容2' },
  { id: 3, title: '記事3', content: '内容3' }
];
const titles = apiData.map(item => item.title);
console.log(titles); // ['記事1', '記事2', '記事3']

このように、mapを使うことで必要な情報だけを取り出して、使いやすい形に加工することができます。

JSONデータをmapで変換する方法

APIから取得したJSONデータを使いやすく加工するのは、特に実務において重要です。mapを使えば、取得した生データを自分のアプリケーションに適した形に整えることができます。

const simplifiedData = apiData.map(item => ({
  id: item.id,
  summary: `${item.title}: ${item.content.substring(0, 10)}...`
}));
console.log(simplifiedData);
// [{ id: 1, summary: '記事1: 内容1...' }, { id: 2, summary: '記事2: 内容2...' }, { id: 3, summary: '記事3: 内容3...' }]

このように、データの必要な部分だけを抽出して簡潔な形にまとめることができます。

mapの便利な使い方とよくある誤解

初心者がつまずきやすいmapの誤解

mapが返す値とforEachの違い

初心者がよく誤解する点として、mapとforEachの違いがあります。mapは必ず新しい配列を返すのに対し、forEachは配列そのものを変更するわけではなく、各要素に対して何らかの処理を実行するだけです。そのため、forEachを使っても新しい配列は得られません。

mapを使っても元の配列は変更されない理由

mapメソッドは元の配列を変更せず、新しい配列を返すため、安全にデータを操作することができます。この点がforEachや他の配列メソッドとの大きな違いであり、初心者が理解すべき重要なポイントです。

効果的なmapの使い方：ベストプラクティス

ネストした配列をmapで変換する

ネストした配列を操作する際にもmapは非常に有効です。例えば、2次元の配列を1次元に変換する場合、mapを使って効率よく処理を行うことが可能です。

const nestedArray = [[1, 2], [3, 4], [5, 6]];
const flattenedArray = nestedArray.map(arr => arr.join(', '));
console.log(flattenedArray); // ['1, 2', '3, 4', '5, 6']

このように、ネストした配列の要素を整えることができます。

パフォーマンスに優れた使い方のポイント

大量のデータを扱う際には、mapの使い方次第でパフォーマンスが変わります。無駄な処理を避け、必要な変換だけを行うようにすることで、パフォーマンスを向上させることができます。

mapを使うときの注意点とよくあるエラー

mapを使った際によく発生するエラー

undefinedが返ってくる理由とその対処法

mapを使う際、よく起こるエラーの一つが「undefined」が返ってくる問題です。これは、コールバック関数内でreturn文を書き忘れた場合に発生します。mapは各要素に対して処理を行い、その結果を返すため、returnを書かないとundefinedになります。

コールバック関数の書き方に注意するポイント

コールバック関数を省略形で書く場合でも、returnが必要なことを忘れないようにしましょう。特に、ブロック構文を使うときは、必ずreturnを書かなければいけません。

mapがうまく動作しないときのチェックリスト

必要なreturnを書き忘れた場合

mapメソッドを使うときに、コールバック関数でreturnを書き忘れると、全ての要素がundefinedとして返されてしまいます。これは非常に一般的なミスなので、注意が必要です。

配列が空のときの挙動について

元の配列が空の場合、mapは空のままの配列を返します。この挙動は意図した動きですが、結果として配列が何もない場合があるため、予め配列の内容を確認することが重要です。

他の配列メソッドと組み合わせて使うmap

mapとfilterを組み合わせて使う方法

条件に合う要素を変換して新しい配列を作成する

mapとfilterを組み合わせて使うと、条件に合った要素のみを変換することが可能です。例えば、偶数の要素だけを2倍にするような操作も簡単に実現できます。

const numbers = [1, 2, 3, 4, 5];
const doubledEvenNumbers = numbers.filter(num => num % 2 === 0).map(num => num * 2);
console.log(doubledEvenNumbers); // [4, 8]

サンプルコードで学ぶmap + filterの実践例

上記の例では、filterで偶数だけを抽出し、その後mapで2倍にしています。このように、異なる配列メソッドを組み合わせることで、より柔軟な操作が可能になります。

mapとreduceを組み合わせたデータ処理

複雑なデータ変換のシナリオ

mapとreduceを組み合わせることで、複雑なデータの集約や変換も可能です。例えば、ユーザーの購入金額を合計するような処理を行う際に役立ちます。

配列を集約して加工する実践例

const purchases = [
  { item: '本', price: 1000 },
  { item: 'ペン', price: 200 },
  { item: 'ノート', price: 500 }
];
const total = purchases.map(purchase => purchase.price).reduce((sum, price) => sum + price, 0);
console.log(total); // 1700

このコードでは、まずmapで価格のリストを作り、その後reduceで全ての価格を合計しています。mapとreduceを組み合わせることで、データの集計処理を簡単に行うことができます。

まとめ：JavaScript mapの使い方をマスターしよう

JavaScriptのmapメソッドは、配列の各要素を変換して新しい配列を作成するための非常に便利なツールです。本記事では、mapの基本的な使い方から応用例、他のメソッドとの違いや注意点まで幅広く解説しました。mapを使うことで、コードの可読性が上がり、効率的にデータを操作することが可能になります。

今後は、他の配列メソッド（filter、reduceなど）とも組み合わせて使うことで、さらに強力なデータ処理を行えるようになります。ぜひ、今回学んだ内容を元に実際にコードを書いて、mapを使いこなしていってください。