【JavaScript入門】mapメソッドの使い方とMapオブジェクトの使い方をそれぞれ解説

配列を使用する際に、各要素に対して何らの処理を行いたい場合があると思います。
for文などのループ処理を使って行うことも勿論可能ですが、そうしたケースで活用できるのがmapメソッドです。

今回は、JavaScriptのmapメソッドの使い方について詳しく解説していきたいと思います。

JavaScriptのmapメソッドとは？

mapメソッドは、対象の配列の各要素に対して指定の関数を実行し、その結果を新たな配列として返却するメソッドです。

通常、配列の各要素に対して何かしらの処理を行う場合、for文などを使用して要素にアクセスします。

【サンプルコード】

const numArray = [1, 2, 3, 4, 5];
const resultArray = [];

for (let i = 0; i < numArray.length; i++) {
  resultArray.push(numArray[i] + 10);
}

console.log(resultArray);

mapメソッドを使用することで、コードをより簡潔に記述することができます。

【サンプルコード】

const numArray = [1, 2, 3, 4, 5];
const resultArray = numArray(num => num + 10);

console.log(resultArray);

また、処理後の結果が新しい配列で返されるため、元の要素の値を変更したくない場合にも活用できます。

mapメソッドの使い方

さっそく、mapメソッドの詳しい使い方について解説していきます。

基本構文

まずは、基本構文から見ていきましょう。

mapメソッドを使用する際は、以下のような構文で記述します。

【基本構文】

配列名.map( コールバック関数 );

コールバック関数は、以下のような形式で記述します。

【基本構文】

配列名.map(function(引数名) {
    //処理内容
    return 処理結果
});

または、アロー関数式で記述することも可能です。

【基本構文】

配列名.map(引数名 => 処理内容);

処理内容が短いコードで済む場合には、アロー関数式を使用する方がより簡潔に記述できます。

配列を繰り返し処理する

基本構文を確認し終えたところで、実際に mapメソッドを使用した場合の動作を確認してみましょう。

【サンプルコード】

const sampleArray = [1, 2, 3, 4, 5];
const resultArray = sampleArray.map(num => num * 10);

console.log(resultArray);

【実行結果】

[ 10, 20, 30, 40, 50 ]

結果を見ると、関数内に記述した処理が全ての要素に対して実行されているのが分かりますね。
for文で各要素にアクセスしても同様の処理は行えますが、処理後の値を格納するための配列を別途で宣言したり、各要素にアクセスするための記述が必要だったりと、mapメソッドを使用するよりも記述量が多くなりがちです。

mapメソッドの場合はそうした必要処理の数が減るだけでなく、どの配列に対して処理を行っているかが視覚的に分かりやすいというメリットもあります。

forEachメソッドとの違いについて

mapメソッドと同じように、全ての要素に対して特定の処理を行うことができる 「forEach」 というメソッドが、Javascriptには存在します。

最終的に同じ結果を得る処理を、mapメソッドで記述した場合と、forEachメソッドで記述した場合で見比べてみましょう。

【サンプルコード】

const sampleArray = [1, 2, 3, 4, 5];

// mapメソッドの場合
sampleArray.map(function(num) {
    console.log(num);
});

// forEachメソッドの場合
sampleArray.forEach(function(num) {
    console.log(num);
});

これだけで見ると、両者のメソッドに大きな違いは無いように見えますね。
上述の通り、コードを実行した結果もどちらも同じものになります。

これら２つのメソッドで最も違う点は、戻り値を返すことが可能か否かにあります。

まずは、以下のサンプルコードを見てください。

【サンプルコード】

const sampleArray = [1, 2, 3, 4, 5];

const resultArray = sampleArray.forEach(num => {
    return num * 10;
});

console.log(resultArray);

【実行結果】

undefined

同じくループ処理の１つであるfor文では、 returnを実行した段階で処理が中断されループから抜け出しますが、forEachメソッドの場合は全ての要素を処理し終わるまでループを抜けることはありません。
また、for文の場合は returnで指定した値を返すのに対し、forEachメソッドは必ず undefinedを返す仕様となっています。

配列の全要素に対して処理を行う場合に、for文よりも簡潔に記述できる forEachメソッドではありますが、上述の理由により、処理結果を関数のブロック外に渡したい場合は工夫が必要となります。
要素に対して行いたい処理の内容や、戻り値が必要かどうかなどに合わせて、それぞれのメソッドを使い分けるといいでしょう。

mapメソッドのコールバック関数について

メソッドの引数に渡すコールバック関数について、さらに詳しく見ていきましょう。

コールバック関数の引数を複数指定する

これまでのサンプルコードでは、コールバック関数に渡す引数を１つのみ指定していましたが、その他にも任意で指定できる引数があります。

mapメソッドのコールバック関数で指定できる引数は、以下の３つです。

• 第１引数 … 配列の要素
• 第２引数 … インデックス
• 第３引数 … メソッドで処理している配列

これらの引数を活用することで、より柔軟に処理を行うことができます。

例えば、インデックスを元に条件分岐を行えば、処理を適用する要素を簡単に限定することができます。

【サンプルコード】

const sampleArray = [1, 2, 3, 4, 5];

const resultArray = sampleArray.map((num, index) => {
    // インデックスが偶数の時のみ10倍にする
    if (index % 2 === 0){
        return num * 10;
    } else {
        return num;
    }
});

console.log(resultArray);

【実行結果】

[ 10, 2, 30, 4, 50 ]

カウント用の変数を別で宣言したりする必要が無くなるため、コードがより簡潔になります。

また、基本的には元の配列に変更が加わることはありませんが、引数で取得することで直接操作も可能になります。

【サンプルコード】

const sampleArray = [1, 2, 3, 4, 5];

const resultArray = sampleArray.map((num, index, array) => {

    if (index % 2 === 0) {
        return num * 10;
    } else {
        // 奇数の場合は元の配列の要素を変更
        array[index] = num * 10;
        return num
    }
});

console.log(sampleArray);
console.log(resultArray);

【実行結果】

[ 1, 20, 3, 40, 5 ]
[ 10, 2, 30, 4, 50 ]

このように、それぞれの引数を活用して、様々な処理を実行することが可能となります。

mapメソッドに類似したメソッドを紹介

実行する処理内容を自身で定義するため、様々なケースに柔軟に対応することができる mapメソッドですが、記述内容によっては他のメソッドで対応できる場合もあります。

用途が定められているメソッドを使用することによって、そのコードがどのような処理をするものであるかが一目で分かりやすくなるメリットがあるため、場合によってメソッドを使い分けるのがおすすめです。

ここからは、mapメソッドの代わりに使用可能ないくつかのメソッドを紹介していきたいと思います。

filterメソッドの使い方

１つ目は、filterメソッドです。
このメソッドでは、特定の条件を指定することによって、配列の中から該当するデータだけを抽出することができます。

以下のサンプルコードで、実際の動きを見てみましょう。

【サンプルコード】

const sampleArray = [1, 2, 3, 4, 5];

const resultArray = sampleArray.filter(num => num % 2 === 0);

console.log(resultArray);

【実行結果】

[ 2, 4 ]

コールバック関数に記述した条件式を元に、該当するデータだけが戻り値の配列に格納されています。

mapメソッドで同様の結果を得ようとする場合、条件に一致しない要素を省くための処理が複雑になってしまうため、データ抽出に関しては filterメソッドの方が使用に適しています。

reduceメソッドの使い方

２つ目は、reduceメソッドです。
このメソッドは、隣り合う要素に対して同時に関数を実行し、その演算結果を単一の値として取得することができるメソッドとなります。

文章だけでは少し分かりにくいかと思うので、以下のサンプルコードを元に解説してきます。

【サンプルコード】

const sampleArray = [1, 2, 3];

const result = sampleArray.reduce(function(num1, num2) {
    console.log("num1：" + num1);
    console.log("num2：" + num2);
    return num1 + num2;
});

console.log("合計：" + result)

【実行結果】

num1：1
num2：2
num1：3
num2：3
合計：6

reduceメソッドでは、コールバック関数に以下の４つの引数を指定することができます。

• 第1引数 … 処理中の要素の１つ前の要素か、１つ前のループで実行された関数結果、もしくは指定の初期値のいずれか
• 第2引数 … 処理中の要素
• 第3引数 … インデックス
• 第4引数 … メソッドで処理している配列

初回のループでは、配列の先頭の要素か、reduceメソッドの第２引数で指定できる初期値のどちらかが第１引数に渡されます。
上記のサンプルの場合は初期値の指定が無いため、配列の先頭の要素が渡されています。

２回目以降のループでは、前回のループで２つの要素を合算した結果が第１引数に渡され、第２引数には未処理の要素が順に渡されていきます。
これを繰り返すことにより、最終的に配列内の全ての要素を合計した数がメソッドの戻り値として返されています。

このように、配列内の要素を１つの値にまとめたい際などに活用できるのが、reduceメソッドです。

JavaScriptのMapオブジェクトとは？

JavaScriptでは、メソッドのmapとは別にMapオブジェクトというものが存在します。

こちらについても合わせて解説していきたいと思います。

Mapオブジェクトの宣言と要素の追加方法

Mapオブジェクトは、キーと値を１つのペアとして格納し、それぞれのペアを配列のようにまとめて管理するデータ構造のことを指します。
プログラミング全般においては、主に連想配列や辞書などと呼ばれるものと同じ構造で、データを管理します。

Mapオブジェクトを新たに宣言する際は、new を使ってインスタンスを生成します。

【サンプルコード】

const samlpeMap = new Map();

宣言したオブジェクトに要素を追加する場合は、setメソッドを使用して要素を格納します。

【サンプルコード】

samlpeMap.set("apple", 10);

メソッドには、要素に紐づけるキーと、格納する値を順に記述します。
この場合は、「apple」 がキー、「10」 が要素の値となります。

なお、インスタンスの 生成時に初期値を指定することも可能です。

【サンプルコード】

const samlpeMap = new Map([["apple", 10], ["orange", 15]]);

要素の取得・削除の方法

格納した要素を取得する際は、getメソッドを使用してアクセスします。

アクセスする際には、各要素に紐づけたキーを指定して対応する要素を取り出します。

【サンプルコード】

const samlpeMap = new Map([["apple", 10], ["orange", 15]]);

console.log("apple：" + samlpeMap.get("apple") + “個”);
console.log("orange：" + samlpeMap.get("orange") + “個”);

【実行結果】

apple：10個
orange：15個

対象のキーが存在するかを事前に確認したい場合は、hasメソッドを使用してキーの検索ができます。

【サンプルコード】

console.log(samlpeMap.has("apple"))

【実行結果】

true

格納済みの要素を削除したい場合は、deleteメソッドを使用します。

【サンプルコード】

const samlpeMap = new Map([["apple", 10], ["orange", 15]]);

console.log("削除前：");
console.log(samlpeMap);

samlpeMap.delete("apple");

console.log("削除後：");
console.log(samlpeMap);

【実行結果】

削除前：
Map(2) { 'apple' => 10, 'orange' => 15 }
削除後：
Map(1) { 'orange' => 15 }

Mapオブジェクトで繰り返し処理をする

配列の時と同じように、オブジェクト内の要素に全ての要素に対して処理を行いたいケースも中にはあるかと思います。
Mapオブジェクトの場合は、取得したいデータが要素のキーと値のどちらであるかによって、方法が少し異なります。

まず基本として、Mapオブジェクトの全ての要素に処理を行う際は、for…of文を使用してループ処理を行います。

【基本構文】

for (要素 of 対象オブジェクト) {
    // 処理内容
}

for…of文の記述時に、引数の指定の仕方を変えることによって、取得するデータを変更することができます。

【基本構文】

・キーを取得する場合
// keysメソッドを使用
for (let key of map.keys()) {
    // 処理内容
}

・値を取得する場合
// valuesメソッドを使用
for (let value of map.values()) {
    // 処理内容
}

・どちらも取得する場合
// オブジェクトの分割代入を使用
for (let [key, value] of map) {
    // 処理内容
}

以下のサンプルコードで、実際の動作を確認してみましょう。

【サンプルコード】

const samlpeMap = new Map([["apple", 10], ["orange", 15], ["banana", 5]]);

for(let [key, value] of samlpeMap) {
  console.log(key + "：" + value);
}

【実行結果】

apple：10
orange：15
banana：5

取得したい内容に応じて、処理を使い分けていきましょう。

まとめ

今回は、mapメソッドの使い方などについて解説を行いました。

配列は様々なケースで活用される機能なので、mapメソッドを含め、操作方法について知識を深めていくと今後に役立ちます。
ぜひこの機会に、mapメソッドの使い方にも慣れていきましょう。

JavaScriptの勉強方法は？

書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。

ただ、JavaScriptに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。

プログラミングスクールならテックマニアがおすすめ！

ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。

このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。