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

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

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

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

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

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

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

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」に対して、何かしらの処理をおこないたいときに使います。

map()メソッドの詳解

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

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

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

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

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

1. currentValue: 配列内の要素
2. index (オプション): 現在処理されている要素のインデックス
3. 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'}]

まとめ

当記事では、JavaScriptのMap関数についてご覧いただきました。

• Map関数は、コールバック関数とthisArgを引数にとる
• コールバック関数は、要素とインデックス、配列を引数にとる
• シンプルなMap関数はコールバック関数に要素を引数とするだけで書ける

一見複雑に見えるMap関数も、一度理解してしまえば簡単に使いこせます。

当記事を参考に手を動かしてしっかりと身に着けてください。