本記事では、JavaScriptのmapメソッドの使い方について解説しています。
JavaScriptの学習におすすめ参考書
改訂3版JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで
| 出版社 | 技術評論社 |
|---|---|
| 著者 | 山田 祥寛 |
| 発売日 | 2023/2/13 |
| ページ数 | 624ページ |
| レビュー (Amazon) | (4件) |
先輩くん
10万部突破したJavaScriptの本が大幅増補改訂し7年ぶりに発売されたよ！
後輩ちゃん
最新の基本文法から、開発に欠かせない応用トピックまで学ぶことが出来るよ！
綺麗なコードが書けるようになる！
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック
| 出版社 | オライリージャパン |
|---|---|
| 著者 | Dustin Boswell / Trevor Foucher |
| 発売日 | 2012/6/23 |
| ページ数 | 260ページ |
| レビュー (Amazon) | (620件) |
先輩くん
より良いコードを書きたい人におすすめの本だよ！
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです！
mapメソッド
mapメソッドは、配列を加工して新たな配列を生成することが出来ます。基本的な使い方は以下のとおりです。
let result = Array.map(callbackfn(value, index, array));構文解説
- result：新しい配列が代入される
- Array：対象の配列
- callbackfn：コールバック関数
- value(第一引数)：配列要素
- index(第二引数)：インデックス番号(添え字)
- array：対象の配列
forEachメソッドとmapメソッドは、使い方が似ているのに加えコールバック関数に渡される引数も同じなため、違いが分からないという方も中にはいらっしゃると思います。
forEachメソッドとmapメソッドの明確な違いは、新しい配列を生成するかしないかの違いです。forEachメソッドは配列のループに特化したメソッドですが、mapメソッドは配列に何かしらの処理を加え新たな配列を生成させることに特化したメソッドです。
コールバック関数の引数を確認する
コールバック関数に渡される引数の中身を実際に見てみましょう！
let numArr = [1, 2, 3, 4, 5];
let mul2Arr = numArr.map(function (value, index, array) {
console.log(`value:${value}\nindex:${index}\narray:${array}`);
});
/* コンソールログ *
* value:1
* index:0
* array:1,2,3,4,5
*
* value:2
* index:1
* array:1,2,3,4,5
*
* value:3
* index:2
* array:1,2,3,4,5
*
* value:4
* index:3
* array:1,2,3,4,5
*
* value:5
* index:4
* array:1,2,3,4,5
*/コンソールログの結果を確認すると、valueには配列要素が、indexにはインデックス番号が、arrayに対象の配列が代入されていることが確認できます。
サンプルコード
mapメソッドを使用したサンプルコードを用意したので、動作確認してみましょう！
let numArr = [1, 2, 3, 4, 5];
// アロー関数 ver
let mul2Arr = numArr.map((value) => value * 2);
// function ver
let mul2Arr = numArr.map(function (value) {
return value * 2;
});
console.log(mul2Arr); // => [2, 4, 6, 8, 10]サンプルコードでは、元の配列に代入されている値を×2倍した値を新しい配列として生成しています。新しく生成された配列を確認すると「[2, 4, 6, 8, 10]」と2倍された数値が代入されていることが確認できます。
DMM WEBCAMP 
CodeCamp 
TechAcademy 
