JavaScriptを学ぶ上で、配列やその操作方法を理解することはとても大切です。
この記事では、配列を扱う上でよく使う「mapメソッド」について、現役のエンジニア兼プログラミングスクール講師としてわかりやすく解説します！
また、似ている名前の「Mapオブジェクト」とはどう違うのかも説明します。
JavaScriptの「配列」とは
配列とは、いくつかのデータを一つにまとめたものです。
[1, 2, 4, 8, 16];例えば、友達の名前を一覧にする時、それぞれの名前を配列に入れることができます。
let friends = ['田中', '鈴木', '佐藤'];JavaScriptでは、この配列を使って色々な操作ができるようになっています。
mapメソッドとは
「mapメソッド」とは、配列の各要素に同じ操作を行って、新しい配列を作る方法です。
例えば、全ての数に2を足す、全ての文字に「さん」をつけるといったことが簡単にできます。
今回は、mapメソッドの基本的な使い方、繰り返し処理の仕方を学んでいきましょう。
mapメソッドの基本的な使い方
「map」の構文について
「map」メソッドの使い方を一緒に見ていきましょう！
まず、基本の形を覚えましょう。
let array = [ 配列データ ];
array.map( 関数 );この「map」は、配列の中のそれぞれの要素に対して、実行したい「関数」を使って処理をします。
ここでの「関数」とは、「コールバック関数」と呼ばれるもので、「map」メソッドの引数に渡す関数のことを指します。
たとえば、次のようなコードを見てみましょう。
let array = [1,2,3,4,5];
array.map(function( value ) {
//配列の各要素を2倍にする
return value * 2;
});このコードでは、配列の各要素を2倍にする処理を行っています。
この処理を「コールバック関数」として「map」メソッドに渡しているのが分かりますね。
そして、その結果を新しい配列として出してくれます。
つまり、配列の中の各要素に同じ操作をして、新しい配列を作ることができるのです。
配列を繰り返し処理する方法
「map」メソッドを使って、配列の中のデータを一つずつ処理する方法を見てみましょう！
こちらが「map」メソッドを使った具体的な例です。
let items = [1, 2, 3, 4, 5];
let result = items.map(function( value ) {
// 配列の各要素を2倍にする
return value * 2;
});
console.log(result);
// 出力結果:
// => [2, 4, 6, 8, 10]この例では、1から5までの数字が入った配列「items」に「map」メソッドを使っています。
このメソッドの中で、配列の各要素を2倍にする処理をしています。
その結果、新しい配列「result」には、元の数字が2倍になった数値が入ります。
普通にループ処理を書くときは「for文」や「while文」を使いますが、このように「map」メソッドを使うと、もっと簡単に配列の中のデータを一つずつ処理することができます。
よくある質問：forEachとmapの違いは？
「map」メソッドの使い方を学んだ後、似たような「forEach」メソッドとの違いについて疑問に思うかもしれませんね。
次に、同じ処理を「forEach」と「map」で試した例を見てみましょう。
//「forEach」で試した例
[1, 2, 3].forEach(function( value ) {
console.log(value);
});//「map」で試した例
[1, 2, 3].map(function( value ) {
console.log(value);
});どちらの場合も、出力結果は以下のようになります。
1
2
3このサンプルから分かるように、「forEach」と「map」を使っても、出力結果は同じです。
では、違いは何でしょうか？ 一番の違いは「返り値」があるかどうかです。
つまり、「forEach」はただ処理を実行するだけで、何も返さないのに対し、「map」は処理の結果を新しい配列として返します。
次に、具体的な例を見てみましょう。
let result = [1, 2, 3].forEach(function( value ) {
return value * 2;
});
console.log(result);
// 出力結果:
// => undefinedこの例では、「forEach」を使っても、返り値はありません。
次に、「map」の例です。
let result = [1, 2, 3].map(function( value ) {
return value * 2;
});
console.log(result);
// 出力結果:
// => [2, 4, 6]こちらでは、処理の結果が新しい配列として返されています。
このように、「forEach」は単に繰り返し処理を行うだけで、結果を返しません。
一方で、「map」は繰り返し処理の結果を新しい配列として返すという違いがあります。
mapメソッドの使いどころ
「map」メソッドは、特定の状況でとても役立ちます。どんな時に使うといいのか、具体的に見ていきましょう。
配列の各要素に対して、何らかの処理を行いたい時
配列の中の各要素に同じ操作をしたい時に「map」メソッドは便利です。
例えば、全ての数字を2倍にしたい、全ての文字列に「さん」をつけたい、といった場合です。
let members = ['田中', '鈴木', '佐藤'];
let membersWithSan = members.map(function( value ) {
return value + 'さん';
});
console.log(membersWithSan);
// 出力結果:
// => ["田中さん", "鈴木さん", "佐藤さん"]このメソッドを使うと、元の配列はそのままで、新しい配列に変更した結果を保存できます。
配列の各要素を加工して、新しい配列を作りたい時
「map」メソッドは、元の配列の各要素を加工して、新しい配列を作るのにも適しています。
例えば、商品の価格リストがあるとき、それぞれの価格に消費税を加えた新しい価格リストを作ることができます。
let prices = [100, 200, 300];
let pricesWithTax = prices.map(function( value ) {
return value * 1.08;
});
console.log(pricesWithTax);
// 出力結果:
// => [108, 216, 324]このように、「map」メソッドは、配列の各要素に何かしらの処理を施して、その結果を新しい配列として得たい場合に最適な方法です。
mapに似ているメソッドとの違い
「map」メソッドは配列を扱う際に非常に便利ですが、他にも似たようなメソッドがあります。
ここでは、mapメソッドと似ているメソッドとの違いを見ていきましょう。
mapメソッドとfilterメソッドとの違い
「filter」メソッドは、特定の条件に合う要素だけを選んで新しい配列を作ります。
このメソッドは、条件に合う要素を「選ぶ」ことに特化しています。
例えば、特定の条件を満たす数値だけを集める、特定の文字を含む文字列だけを選ぶなどの処理ができます。
let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(function(number) {
return number % 2 === 0;
});
console.log(evenNumbers); // 出力結果: [2, 4]「map」は配列の全ての要素を変更して新しい配列を作るのに対し、「filter」は条件に合う要素だけを抽出して新しい配列を作るという違いがあります。
mapメソッドとforEachメソッドとの違い
「forEach」メソッドも配列の各要素に対して処理を行いますが、その目的と使い方は「map」とは異なります。
「forEach」は配列の各要素に対して関数を実行しますが、新しい配列を作成しません。
代わりに、各要素に何らかの副作用（例えば、外部の変数を変更する）を与えるのに使われます。
let numbers = [1, 2, 3];
numbers.forEach(function(number) {
console.log(number);
});
// 出力結果: 1, 2, 3この例では、forEachを使って配列の各要素を単に表示していますが、新しい配列は作成されません。
「map」は新しい配列を生成するのに対し、「forEach」は元の配列を変更せずに各要素に対して処理を行う点が異なります。
mapメソッドとreduceメソッドとの違い
「reduce」メソッドは、配列の各要素に関数を適用して、単一の値にまとめるのに使います。
このメソッドは、配列の要素を合計する、配列の要素から最大値を見つけるなど、配列全体を一つの値「だけ」を扱う処理に適しています。
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(total, number) {
return total + number;
}, 0);
console.log(sum); // 出力結果: 15この例では、reduceを使って配列の数値を合計しています。
このように、「reduce」は配列の要素全体を一つの値にまとめるのに対し、「map」は各要素を変更して新しい配列を作るという違いがあります。
mapメソッドの色々な書き方
JavaScriptの「map」メソッドは、さまざまな書き方で使うことができます。
特に、アロー関数を使った書き方や、コードを1行で書く方法は、コードをより簡潔にし、読みやすくするのに役立ちます。
アロー関数を使った書き方
アロー関数は、JavaScriptのES6以降で導入された関数の短縮形です。
mapメソッドと組み合わせることで、より簡潔なコードを書くことができます。
let numbers = [1, 2, 3, 4, 5];
let doubled = numbers.map(number => number * 2);
console.log(doubled); // 出力結果: [2, 4, 6, 8, 10]この例では、アロー関数を使って各要素を2倍にしています。
アロー関数を使うと、functionキーワードを省略でき、コードがすっきりします。
1行で書く書き方
mapメソッドは、処理が短い場合には1行で書くことも可能です。
これは、特にアロー関数と組み合わせると効果的です。
let numbers = [1, 2, 3, 4, 5];
let doubled = numbers.map(number => number * 2);この例では、mapメソッドのコールバック関数の中身が非常に短いため、1行で書くことができます。
このように書くと、コードが非常にシンプルで読みやすくなります。
Mapオブジェクトについて
JavaScriptには「mapメソッド」とは全く異なる「Mapオブジェクト」というものも存在します。
これらは名前が似ているものの、用途と機能が全く異なるので、混同しないように注意が必要です。
Mapオブジェクトとは
Mapオブジェクトは、キーと値のペアを保存するためのコレクションです。
ここでいう「コレクション」とは、複数の値をまとめて管理するためのデータ構造のことです。
配列やオブジェクトもコレクションの一種です。
let myMap = new Map();通常のオブジェクトとは異なり、Mapオブジェクトでは任意の型の値（オブジェクトやプリミティブ値）をキーとして使用できます。
これにより、より柔軟なデータ構造を作ることが可能になります。
Mapオブジェクトの使い方
Mapオブジェクトの基本的な使い方は、新しいMapを作成し、その後、キーと値のペアを追加することです。
また、既存のキーに対する値を取得したり、キーがMapに存在するかどうかを確認したりすることもできます。
let myMap = new Map();
// キーと値を追加
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');
// キーに対する値を取得
console.log(myMap.get('key1')); // 出力結果: value1
// キーがMapに存在するか確認
console.log(myMap.has('key3')); // 出力結果: false
// キーに対する値を削除
myMap.delete('key1');
// Mapのサイズを取得
console.log(myMap.size); // 出力結果: 1Mapオブジェクトは、キーと値のペアを効率的に管理する必要がある場合に特に便利です。
例えば、ユーザーIDとユーザー情報を関連付けて保存する場合などに使われます。
また、Mapオブジェクトは、キーの順序を保持するという特徴もあります。
これは、オブジェクトリテラルでは保証されないため、順序が重要な場合にはMapオブジェクトが適しています。
※「オブジェクトリテラル」とは、オブジェクトを作成するための記法のことです。
Mapオブジェクトの使用例
Mapオブジェクトは、キーと値のペアを扱う際に非常に便利です。
ここでは、Mapオブジェクトについて「要素を追加」「要素を取得」「要素を削除」する方法について、具体的な例を見ていきましょう。
Mapオブジェクトに要素を追加する
Mapオブジェクトに新しい要素（キーと値のペア）を追加するには、setメソッドを使用します。
以下の例では、二つの異なるキーと値のペアをMapに追加しています。
let myMap = new Map();
// キーと値を追加
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');
console.log(myMap); // 出力結果: Map { 'key1' => 'value1', 'key2' => 'value2' }Mapオブジェクトの要素を取得する
Mapオブジェクトから特定のキーに対応する値を取得するには、getメソッドを使用します。
キーがMap内に存在する場合、そのキーに対応する値が返されます。
// キーに対する値を取得
console.log(myMap.get('key1')); // 出力結果: value1Mapオブジェクトの要素を削除する
Mapオブジェクトから特定のキーとそれに対応する値を削除するには、deleteメソッドを使用します。
この操作は、そのキーがMap内に存在する場合にのみ効果があります。
// キーに対する値を削除
myMap.delete('key1');
console.log(myMap); // 出力結果: Map { 'key2' => 'value2' }これらの基本的な操作をマスターすることで、Mapオブジェクトを効果的に使用することができます。
Mapはキーと値のペアを効率的に管理するための強力なツールであり、多くの場面で役立つので覚えておくことをおすすめします。
JavaScript を挫折せず学習するならプログラミングスクールがおすすめ！
この記事を読んでくれた方は、JavaScript を学習中、もしくは使い始めている人かと思います。
ただ、JavaScript は「知らないと困る知識・コツ」が多く、私も最初は苦労しました…。
そのため確実に就職・転職を目指すのならばプログラミングスクールでの学習を検討してみませんか？
JavaScript はフロントエンドのすべてに通じますので、体系的に学んでおくと給与アップにもつながりますよ。
おすすめのプログラミングスクールについては、別の記事でまとめていますので是非ご覧ください。
現役のエンジニア兼プログラミングスクール講師として、自信を持っておすすめできるスクールだけを紹介しています！
