JavaScriptのMap関数をマスター｜必要な引数から応用まで

（最終更新月：2023年10月）

✔以下のような疑問を持つ方に向けて作成しました

「JavaScriptのMap関数とは何でしょうか？」

「JavaScript Mapの具体的な書き方を知りたい」

「JavaScript Mapを活用したリアルなケースを見てみたい」

✔当記事を通じてお伝えする内容

JavaScriptのMap関数の基礎
具体的なMap関数の記述法とその適用事例
JavaScript Mapを使った実践的なプロジェクト

当記事では、JavaScriptのMap関数の基本概念から詳細な利用方法、さらに実際のプロジェクトでの活用例までを含め、読者の理解を深めるよう詳細に解説します。

ぜひ記事の最後までご覧ください。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

map() メソッドの概要

早速mapメソッドについて、基本を見ていきましょう。

基本を理解したら、より具体的な内容へ進みます。

map() メソッドとは
map()メソッドの基本的な構文

map() メソッドとは

map()メソッドは、配列の各要素に関数を適用し、その結果から新しい配列を生成するJavaScriptのメソッドです。

配列のデータを効率的に変換するためのもの。

数値で作られた配列の、各要素を二倍にする例をご覧ください。

// 元の配列
const numbers = [1, 2, 3, 4, 5];

// mapメソッドを使用して各数値を2倍にする
const doubled = numbers.map(function(number) {
  return number * 2;
});

console.log(doubled); // [2, 4, 6, 8, 10]

mapを使って要素を倍にします。

map()メソッドの基本的な構文

map()メソッドは、以下のような基本的な構文はこちら。

let 新しい配列 = 元の配列.map(function(currentValue, index, array) {
    // 新しい要素を返す
}, thisArg);

mapは、引数として以下の2つを取ります。

コールバック関数：function(currentValue, index, array){ }
thisArg：this.Arg

このコールバック関数の戻り値から新しい配列を生成して返します。

ただし記述不要な引数もあるので、最低限の形としては以下のようになります。

let 新しい配列 = 元の配列.map(function(currentValue) {
    // 新しい要素を返す
});

元の配列内の要素「currentValue」に対して、何かしらの処理をおこないたいときに使います。

アローファンクションで以下のようにも記述可能です。

let newArr = oldArr.map(currentValue => newValue);

map()メソッドの詳解

基本的な構造を掴んだところで、より詳しく見ていきましょう。

まだ完全に理解できないという方も多いはず。

コールバック関数の引数とは
thisArgってなに？
map()使用にあたる注意点

コールバック関数の引数とは

map()メソッドのコールバック関数は、最大3つの引数を取ることができます。

currentValue: 配列内の要素
index (オプション): 現在処理されている要素のインデックス
array (オプション): map()が呼び出された元の配列

以下の例をご覧ください。

const arr = [11,12,13,14,15]

const newArr = arr.map(function(currentValue, index, array){
    console.log('currentValue: ' + currentValue);
    console.log('index: ' + index);
    console.log('array: ' + array);
}) 
/* 出力
currentValue: 11
index: 0
array: 11,12,13,14,15
currentValue: 12
index: 1
array: 11,12,13,14,15
currentValue: 13
index: 2
array: 11,12,13,14,15
currentValue: 14
index: 3
array: 11,12,13,14,15
currentValue: 15
index: 4
array: 11,12,13,14,15
*/

thisArgってなに？

arr.map(コールバック関数{ }, thisArg)

thisArgは、コールバック関数内でのthisの値として使用できます。

この特性は主に、特定のオブジェクトのコンテキスト内で配列操作をする場合に役立つものです。

const carCollection = {
    cars: [
        { name: 'Car A', topSpeedKmH: 220 },
        { name: 'Car B', topSpeedKmH: 240 },
        { name: 'Car C', topSpeedKmH: 210 }
    ],
    convertToMph: function(speedKmH) {
        // 1 km/h は約 0.621371 mph です
        return speedKmH * 0.621371;
    }
};

// thisArgを使用して、convertToMphメソッドをmap内で正しく参照する
const topSpeedsMph = carCollection.cars.map(function(car) {
    return this.convertToMph(car.topSpeedKmH);
}, carCollection);  // ここでthisArgとしてcarCollectionを指定しています。

console.log(topSpeedsMph);
// 出力:  [136.70162, 149.12904, 130.48791]

map()使用にあたる注意点

map()メソッドは非常に便利ですが、すべてのシチュエーションで使用すべきではありません。

以下のような場面では、forEach()などのほかのメソッドを検討するべきです。

配列の要素を変更せずに何かの処理をする
新しい配列を生成する必要がない

実践！map()メソッドの使用例

具体的な使用例をご覧いただきます。

手を動かしながら見ていきましょう。

配列要素の変換：数値から平方根へ
配列内のオブジェクト再フォーマットの実行
引数を含む関数を使用した配列マッピング
map()の多目的使用方法
querySelectorAllとの連携による実践的使用例
複雑な使用例の紹介

配列要素の変換：数値から平方根へ

以下は、配列内の数値をその平方根に変換する例です。

let numbers = [1, 4, 9, 16];
let roots = numbers.map(Math.sqrt);
console.log(roots); // [1, 2, 3, 4]

配列内のオブジェクト再フォーマットの実行

配列内のオブジェクトのプロパティを再フォーマットする例を考えます。

let persons = [{name: "John", age: 25}, {name: "Jane", age: 30}];
let names = persons.map(person => person.name);
console.log(names); // ["John", "Jane"]

引数を含む関数を使用した配列マッピング

map()メソッドを使用して、引数を含む関数を配列の各要素に適用する例です。

let numbers = [1, 2, 3, 4];
let doubled = numbers.map(function(num) {
    return num * 2;
});
console.log(doubled); // [2, 4, 6, 8]

map()の多目的使用方法

map()メソッドは、配列の要素を変換するだけでなく、新しい配列を生成するための多目的ツールとしても使用できます。

以下は、配列の要素をフィルタリングして新しい配列を生成する例です。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];

// 奇数だけを取得し、偶数の場合はnullを返す
const filteredWithMap = numbers.map(number => {
    if (number % 2 === 1) {
        return number;
    }
    return null;
});

console.log(filteredWithMap); // [1, null, 3, null, 5, null, 7, null, 9]

// nullを取り除くためにfilter()を使用
const cleanedUpArray = filteredWithMap.filter(value => value !== null);

console.log(cleanedUpArray); // [1, 3, 5, 7, 9]

querySelectorAllとの連携による実践的使用例

Webページ上の特定の要素を選択し、そのテキスト内容を取得するケースです。

querySelectorAllとmap()メソッドを組み合わせることが可能。

// .some-classのクラスを持つ要素を全て選択
let elements = document.querySelectorAll('.some-class'); 

let texts = Array.from(elements).map(el => el.textContent);
console.log(texts); // 選択された要素のテキスト内容の配列

複雑な使用例の紹介

map()メソッドを使用して、配列内のオブジェクトの特定のプロパティを基に新しいオブジェクトを生成する例を考えます。

let users = [
  {id: 1, name: 'John', role: 'admin'},
  {id: 2, name: 'Jane', role: 'user'},
  {id: 3, name: 'Doe', role: 'guest'}
];
let userRoles = users.map(user => ({id: user.id, role: user.role}));
console.log(userRoles); // [{id: 1, role: 'admin'}, {id: 2, role: 'user'}, {id: 3, role: 'guest'}]