わかりやすくJavaScriptのmap()メソッドを説明

JavaScriptのmap()メソッドの基本をわかりやすく説明

今回は繰り返しのfor文とよく似ているmap()メソッドについて、初心者にわかりやすく説明をします。

公式説明:意義と使い方(構文)

map()メソッドについては、JavaScriptの公式リファレンスのMDN Web Docsには次のように書かれています。

map() メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。

MDN「Array.prototype.map()」

この日本語をおおざっぱに分析すると、

A:与えられた関数→なんらかの関数が必要
B:配列の→もともとのなんらかの配列が必要
C:すべての要素に対して呼び出し→(その配列の)各要素ごとに順番に呼び出された関数(コールバックと言う)が実行される
D:新しい配列を生成

ということになります。

使い方(構文)は、メソッドなのでなんらかの(配列)オブジェクトの後に「.(ピリオド)」を続けてから使います。基本的な構文は次のようになります。

新しい配列を格納する変数 = 配列オブジェクト.map( コールバック関数 );

コールバック関数とは、なんらかのメソッドや関数から呼び出される関数のことです。

では以上の点を意識しつつ、次の使用例を見てください。

基本的な使用例

See the Pen jOMzLYe by 1978works (@1978works) on CodePen.

さて、そもそもなんらかの配列が最初に必要となるので、まずは配列(ar)を作っています。この配列arは、

Index(何番目なのか?)要素
1番目2
2番目4
3番目6
4番目8
配列arについて

という対応になっています。

そして、「C:すべての要素に対して呼び出し→(その配列の)各要素ごとに順番に呼び出された関数(コールバック関数)が実行される」ので、まず、1番目の要素「2」に対して関数Kakezanが呼び出され(コールバックされ)、そしてKakezanの処理が実行されます。

その結果、関数Kakezanの引数であるxに「2」が代入され、さらに2倍(2*2という式)され、その結果である「4」という数字がmap()メソッド側へ渡されます。

そして、map()メソッドが作った新しい配列(new_ar)の1番目の要素に、その「4」を格納します。

次に配列arの2番目の要素「4」に対して関数Kakezanが呼び出され、その引数xに今度は「4」が代入され、それが2倍された結果「8」が配列new_arへ渡され、その2番目の要素として格納されます。

こういった処理が順番に、そして連続的に行われた結果、新しい配列new_arは[4,8,12,16]となり、つまりは、

Index(何番目なのか?)要素
1番目4
2番目8
3番目12
4番目16
新しい配列new_arについて

という配列になるわけですね。上のコードの中で、

let element=<p>新しい配列は[{new_ar[0]},{new_ar[1]},{new_ar[2]},{new_ar[3]}]です。</p>;

[0]とか[1]は、まさにnew_arが配列であることを如実にあらわしています。

・new_ar[0]は、new_arの1番目の要素である「4」
・new_ar[1]は、new_arの2番目の要素である「8」

というわけです。

配列を使って、新しい配列を作り出す。これがmap()メソッドの役割となります。

for文を利用しても同じ結果を作り出すことは可能ですが、おそらく多くの場合でmap()メソッドを使ったほうが表記が簡略化できると思います。

なお、上記公式リファレンスのMDNには、map()メソッドを使うべきではない場面として、

  • 返された配列を使用しない場合
  • コールバックから値を返さない場合

と書かれています。

map()メソッドの基本的なことさわかれば、これらの注意点も含めて公式リファレンスの説明も「意味不明な日本語」から「なんとなくわかる」へ変化すると思いますので、ぜひ公式リファレンスも読み込んで見てください。

稼げるプログラミングスキルを手に入れるために

Tech Academy

厚切りジェイソンのCMでおなじみのプログラミングスクール。自宅でオンライン受講OK。現役のプロが一人一人に専属メンターになってくれ、質問すればすぐに回答。転職保証あり

Udemy

世界最大級のオンライン学習動画サービス。AI・データサイエンスなど最先端のプログラミング講座からビジネススキル講座まで10万以上の講座から選び放題。講師に掲示板から直接に質問もできる。