VIDEO LESSON

JavaScriptのArray.prototype.map()の使い方：引数・戻り値・実例と注意点の解説動画

再生時間 8:03動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00今回はマップを紹介します。
0:03これは、配列の各要素を変換して、新しい配列を作るメソッドです。
0:08すべての要素を一つずつ変換関数に渡し、その戻り値を順番に並べた配列が結果になります。
0:15たとえば、価格の一覧を税込み価格に換算したり、数値の一覧を二倍にしたりできます。
0:21この動画では、書き方と引数、戻り値、記事の基本例、変換関数の引数、波括弧とリターンの注意点、
0:27そして応用例まで、実行結果と一緒に学びます。
0:32元の配列を書き換えずに変換できる点が、マップの大きな特長です。
0:37要素の数は変わらないため、変換前と変換後を対応付けて考えやすいメソッドです。
0:44まず動作環境を確認します。
0:45記事の互換性情報では、クロームでは一以降、エッジでは十二以降、ファイアーフォックスでは一・五以降、
0:50サファリでは三以降で使えます。
0:54ノード・ジェイエスではゼロ・一〇・ゼロ以降に対応しています。
0:58これらの数値はエムディーエヌの互換性データに基づく目安です。
1:02マップは非常に古くから使えるメソッドで、現在の主要な環境では広く対応しています。
1:07追加の読み込みは不要で、配列に最初から関数として備わっていることを実機で確認済みです。
1:13対応開始の版は推奨版という意味ではない点にも注意しましょう。
1:17ブラウザーでもノードでも同じ書き方で動くため、学習したコードをそのまま試せます。
1:23書き方を確認します。
1:24対象の配列に続けてマップと書き、カッコの中に変換関数を渡します。
1:29リファレンス名にあるプロトタイプは、実際の呼び出しで毎回書く必要はありません。
1:35変換関数は各要素に対して先頭から順番に呼ばれ、その戻り値が新しい配列の同じ位置に入ります。
1:42変換関数には、今の要素、その位置、配列自体が渡されます。
1:47第二引数にディスアーグを指定すると、変換関数の中で使うディスの値を決められます。
1:53戻り値は変換結果を並べた新しい配列で、長さは元の配列と同じになり、元の配列自体は変更されません。
2:01まずは、この基本の形と、戻り値が常に配列になることを押さえましょう。
2:06記事の基本例を見ます。
2:08百、二百、三百という価格の配列があります。
2:11この配列にマップを呼び、各価格に一・一を掛けて税込みの金額へ変換します。
2:18さらに、小数になる場合に備えて、結果にもう一度マップでラウンドを適用し、
2:21四捨五入します。
2:25実行すると、百十、二百二十、三百三十という配列が表示され、記事の期待出力と一致し、
2:30ノードの実機結果とも一致しました。
2:35元の価格の配列は百、二百、三百のまま変わりません。
2:39一つの要素をどう変えるかだけを書けば、配列全体へ適用される点がポイントです。
2:46まずはこの形を、変換の基本として覚えてください。
2:50変換関数に渡される引数を詳しく見ます。
2:53変換関数は三つの引数を受け取ります。
2:57一つ目は今変換している要素の値、二つ目はその要素の位置、三つ目は対象の配列自体です。
3:04スライドの例では、エー、ビー、シーという配列について、位置と値を連結した文字列へ変換し、
3:10結果はゼロコロンエー、一コロンビー、二コロンシーになりました。
3:17実機でも同じ結果でした。
3:19通常は値だけを使うことが多いのですが、番号付きの表示を作りたい場合に二つ目の引数が役立ちます。
3:27必要な引数だけを書けばよく、途中までで省略しても構いません。
3:32引数の順番は、値、位置、配列の順と覚えてください。
3:36実例として、数値の変換を見ます。
3:39一、二、三の配列について、各要素を二倍にする変換をマップで適用すると、二、
3:43四、六という配列が得られます。
3:47実機でも同じ結果でした。
3:49別の例では、十と二十を文字列へ変換し、文字列の十と二十が返りました。
3:54このように、計算結果だけでなく、型を変える変換も同じ書き方で表せます。
4:00マップの結果は必ず元の配列と同じ長さになります。
4:03要素を減らしたい場合はフィルター、要素をまとめたい場合はリデュースと、目的で使い分けてください。
4:11変換の式を短く書くほど、読み返したときに意図が伝わりやすくなります。
4:16オブジェクトとディスアーグの例を見ます。
4:20まず、価格を持つオブジェクトの配列から、各オブジェクトの価格を二倍にした数値だけを取り出すと、
4:24二百と四百が返ります。
4:29実機でも同じ結果でした。
4:31元のオブジェクトから表示に必要な値だけを抜き出す整形は、実務で特によく使う形です。
4:38次に、加算値五を持つオブジェクトをディスアーグとして渡す例です。
4:43通常の関数で書いた変換関数の中でディスを参照すると、その加算値を使って変換できます。
4:50結果は十五、二十五、三十五でした。
4:53アロー関数ではディスが外側の値になるため、ディスアーグを使いたいときは通常の関数で書く点がポイントです。
5:02記事の境界例で、波括弧とリターンの仕様を確かめます。
5:06一と二の配列に、波括弧で書いた変換関数を渡し、中で二倍の計算だけをしています。
5:13しかし、波括弧で本体を書いた場合は、値を返すためにリターンを明示しなければなりません。
5:20リターンがないため、変換結果はアンディファインドが二つ並んだ配列になり、
5:25すべてアンディファインドかどうかを調べるとトゥルーが返ります。
5:31実機でも同じ結果で、記事の期待出力と一致しました。
5:35短い式なら波括弧なしでそのまま値が返りますが、複数行で書くときはリターンの書き忘れに注意してください。
5:44これは初心者が最もつまずきやすい点です。
5:47注意する仕様を確認します。
5:49まず、元の配列に穴、つまり要素が存在しない位置がある場合、その位置では変換関数は呼ばれず、
5:54結果の配列でも穴のまま残ります。
6:00スライドの例では長さは三のままで、位置一には要素が存在しません。
6:05実機でも同じ結果でした。
6:07次に、空の配列にマップを使うと、空の配列が返り、エラーにはなりません。
6:13また、非同期関数を渡すと、戻り値は値そのものではなく、プロミスの配列になります。
6:20完了を待つ処理が別途必要になる点に注意してください。
6:24さらに、変換関数の中で元のオブジェクト自体を書き換えると、その変更は元の配列側にも及ぶため、
6:30書き換えではなく新しい値を返す書き方を心がけましょう。
6:36応用例として、メソッドチェーンを見ます。
6:39一から四までの配列に、まずフィルターで二以上の要素だけを残し、続けてマップで各要素を十倍に変換すると、
6:45二十、三十、四十という配列が得られます。
6:50実機でも同じ結果でした。
6:52絞ってから変換するという流れは、データ処理で最もよく使う組み合わせの一つです。
6:58似たメソッドとの違いも整理しましょう。
7:01フォーイーチは各要素に処理を実行するだけで戻り値はアンディファインドですが、
7:05マップは変換結果の配列を返します。
7:09結果の配列が必要かどうかで使い分けてください。
7:13処理の順番を言葉で説明できるようになると、チェーンの読み書きで迷いにくくなります。
7:19まとめです。
7:20マップは、配列の要素を変換関数で一つずつ変換し、その戻り値を並べた新しい配列を作るメソッドです。
7:28ポイントは三つです。
7:30まず、変換関数には値と位置と配列が渡され、戻り値がそのまま結果の要素になること。
7:37次に、結果の長さは元の配列と同じで、元の配列は変更されず、穴は穴として残ること。
7:44そして、波括弧で書く場合はリターンを忘れるとアンディファインドが並んでしまうことです。
7:51まずは記事の基本例と境界例を実行し、結果を予測してから確かめてみてください。
7:57これで配列の変換が一通り使えるようになりました。
8:01お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

Array.prototype.map()で配列の各要素を変換して新しい配列を作る方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

解説記事・サンプルコードを読む：JavaScriptのArray.prototype.map()の使い方：引数・戻り値・実例と注意点 →