Array.prototype.map()の使い方

map()関数は配列の各要素を順に処理し、コールバック関数を適用した結果をまとめて新しい配列を返す関数です。このとき、元の配列は変更されません。

map()関数は、配列の各要素を変換または加工した結果を適用した新しい要素として新しい配列を生成するために使用されます

map()関数に渡されるコールバック関数は、「各要素を変換して新しい配列にマッピング(mapping)する役割を持つ」と説明されます。このようにマッピングされた結果を新しい配列として返すため、この関数名は「map」に決められました。 マッピング(mapping)とは ある値を別の値に対応させる過程を指す概念であり、数学、コンピューターサイエンス、地理情報システムなど、さまざまな分野で使われています。

簡単な例

簡単な例を使って説明します。 以下は、数字の配列を受け取り、各数字を2倍にして新しい配列を作成して返すmap()関数の使用例です。

JavaScript 
const numbers = [1, 2, 3, 4, 5];

const doubledNumbers = numbers.map(function(number) {
    return number * 2; // マッピングされた新しい配列として返す
});

console.log(doubledNumbers); // 出力: [2, 4, 6, 8, 10]

// 元の配列は変更されません
console.log(numbers); // 出力: [1, 2, 3, 4, 5]
map()関数の使い方 map()関数の使い方を視覚化すると、次のようになります 
/* map()関数は
   配列の各要素を変換することを目的として使用されます。 */

// 次の例では、配列のすべての要素（小文字）を大文字に変換することが目的です。
[a, b, c, d].map(小文字 → 大文字) 👉 [A, B, C, D]

map()関数は各要素を順に処理しながら、コールバック関数のreturnで返された値を集めて（マッピングして）新しい配列を生成します。したがって、コールバック関数は対象の要素を変換または加工した結果をreturnで返す必要があります。

map()関数の使い方について見ていきましょう。

構文

JavaScript 
arr.map(function(currentValue[, index[, array]]) {
    // マッピング処理のロジック：変換後の結果を返す必要があります
}[, thisArg]);

arrは、map()関数を適用する配列です。

パラメーター

map()関数のパラメーター
function 必須
arr 配列の各要素に適用される際に呼び出されるコールバック関数です。
3つのパラメーターを持つことができます。
  • currentValue（必須）：処理対象の現在の要素。このパラメーターを通じて現在の要素にアクセスできます。
  • index（任意）：処理対象の現在の要素のインデックス。このパラメーターを使って現在の要素のインデックスにアクセスできます。
  • array（任意）：map()関数を呼び出した配列。このパラメーターを使って元の配列にアクセスできます。
thisArg 任意
functionを実行する際のthisとして使われるオブジェクトです。このパラメーターは必要に応じて使用します。

コールバック関数

第一引数であるコールバック関数（function）に関連する、関数の形態別の構文形式は以下の通りです。

JavaScript 
// アロー関数
map((element) => { /* … */ })
map((element[, index]) => { /* … */ })
map((element[, index[, array]]) => { /* … */ })

// コールバック関数
map(callbackFn)
map(callbackFn[, thisArg])

// インラインコールバック関数
map(function (element) { /* … */ })
map(function (element[, index]) { /* … */ })
map(function (element[, index[, array]]) { /* … */ })
map(function (element[, index[, array]]) { /* … */ }[, thisArg])
コールバック関数の実装説明

map()関数は、arr配列の要素を順番に一度ずつ処理しながらfunction関数を呼び出し、関数の返り値を新しい配列に集めて返します。この過程で元の配列は変更されません。

返り値

配列の各要素に対して実行したfunctionの結果を集めた新しい配列を返します。

map()関数とfilter()関数は似た構文を使うため、混同しやすい点があります。 JavaScriptのmap()とfilter()関数の違いを参考にしてください。

さまざまな例

さまざまな例を通してmap()関数の使い方を見ていきましょう。

関数の実装を説明する簡単な例

JavaScript 
const numbers = [1, 2, 3, 4, 5];

const squaredNumbers = numbers.map(function(number) {
    return number * number;
});

console.log(squaredNumbers);
// 出力: [1, 4, 9, 16, 25]

配列要素の小文字変換

文字列で構成された配列を扱う状況は非常に一般的です。 以下はmap()関数を使って、文字列で構成された配列の要素をすべて小文字に変換し、新しい配列として返す例です。このとき、元の配列はそのまま保持されます。

JavaScript 
const fruits = ["Apple", "Banana", "Cherry"];

const lowercaseFruits = fruits.map(function(fruit) {
    return fruit.toLowerCase(); // 文字列を小文字に変換
});

console.log(lowercaseFruits);
// 出力: ['apple', 'banana', 'cherry']

コード補足説明
toLowerCase()関数は文字列を小文字に変換して返す関数です。

配列の要素がオブジェクトの場合

map()関数を使って、オブジェクトの配列から特定のプロパティや値だけを抽出して新しい配列を作成できます。例えば、ユーザーオブジェクトの配列からユーザー名だけを抽出して新しい配列を作成したい場合、以下のように行います。

JavaScript 
const users = [
    {id: 1, name: "Alice"},
    {id: 2, name: "Bob"},
    {id: 3, name: "Charlie"}
];

const names = users.map(function(user) {
    return user.name;
});

console.log(names);
// 出力: ['Alice', 'Bob', 'Charlie']

配列要素の条件に応じた値の置き換え

条件に応じて配列の各要素を置き換えた新しい配列を作成する場合、map()関数を活用できます。

JavaScript 
const numbers = [1, 2, 3, 4, 5];

const modifiedNumbers = numbers.map(function(number) {
    if (number % 2 === 0) {
        return "Even";
    } else {
        return "Odd";
    }
});

console.log(modifiedNumbers);
// 出力: ['Odd', 'Even', 'Odd', 'Even', 'Odd']

map()関数とforEach()関数の違い

map()関数とforEach()関数はどちらも配列の要素を順に処理する関数です。
しかし、map()関数は各要素を指定したコールバック関数で変換し、新しい配列を返すのに対し、
forEach()関数は各要素を単に順に処理するだけで、新しい配列を作成して返さないという違いがあります。

補足説明
配列のforEach()関数は、配列を順に処理し、各要素に対してコールバック関数を実行するための関数です。配列の各要素に対して指定されたコールバック関数を順番に一度ずつ適用します。

以下はmap()関数とforEach()関数の違いを示すサンプルコードです。

JavaScript 
const numbers = [1, 2, 3, 4, 5];

// map() 関数の使用例
const squaredNumbersMap = numbers.map(function(number) {
    return number * number;
});

console.log("Using map():", squaredNumbersMap);
// 出力: "Using map():" [1, 4, 9, 16, 25]

// forEach() 関数の使用例
const squaredNumbersForEach = [];

numbers.forEach(function(number) {
    squaredNumbersForEach.push(number * number);
});

console.log("Using forEach():", squaredNumbersForEach);
// 出力: "Using forEach():" [1, 4, 9, 16, 25]

上記の例では、map()関数は各要素を二乗し、新しい配列squaredNumbersMapを生成します。map()関数は変換処理の結果を新しい配列として返します。

一方、forEach()関数は各要素を順に処理し、二乗した値をsquaredNumbersForEach配列に追加します。forEach()関数は戻り値がなく、元の配列を変更したり、別の配列に値を追加したりする必要があります。

これにより、map()関数とforEach()関数の使用方法と結果の違いを比較できます。
map()関数は変換処理を通じて新しい配列を生成し、forEach()関数は各要素に対して処理を行いながら配列を変更したり別の配列に値を追加したりします。

ブラウザ互換性

map()関数のブラウザ対応状況
メソッド
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
map() 1 12 1.5 3

仕様書

map()関数の仕様
仕様書
map() ECMAScript Language Specification
#sec-array.prototype.map

参考資料