VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:01今回はフラットマップを紹介します。
0:04これは、各要素を変換し、その結果を一段だけ平坦化するための、配列のインスタンスメソッドです。
0:14名前は、変換を意味するマップと、平らにするフラットを合わせたもので、その二つの働きを一度に行います。
0:24たとえば、一行の文章から複数の単語を取り出すような、入力一件から出力がゼロ件、
0:30一件、複数件へ変わる処理に向きます。
0:35この動画では、書き方と引数、戻り値、記事の基本例である単語の取り出し、マップとフラットの組み合わせとの違い、
0:45空の配列で要素を消す境界例、そして一段しか展開しない注意点まで、実行結果と一緒に学びます。
0:56変換した結果が配列の配列になってしまう、という場面で最初に思い出したいメソッドです。
1:04まず動作環境を確認します。
1:06記事の互換性情報では、クロームでは六十九以降、エッジでは七十九以降、ファイアーフォックスでは六十二以降、
1:10サファリでは十二以降で使えます。
1:14ノード・ジェイエスでは十一・ゼロ・ゼロ以降に対応しています。
1:18これらの数値はエムディーエヌの互換性データに基づく目安です。
1:22フラットマップは比較的新しいメソッドですが、現在の主要な環境では広く使えます。
1:27追加の読み込みは不要で、配列に最初から関数として備わっていることを、実機で確認済みです。
1:32古い環境を対象にする場合は、利用前にこの対応表を確認してください。
1:37書き方を確認します。
1:38対象の配列に続けてフラットマップと書き、カッコの中に変換関数を渡します。
1:45リファレンス名にあるプロトタイプは、実際の呼び出しで毎回書く必要はありません。
1:51変換関数は、要素、インデックス、元の配列の三つを受け取ります。
1:57第二引数には、変換関数の中で使うディスを指定でき、これは任意です。
2:02戻り値は、変換と一段の平坦化を行った新しい配列で、元の配列は変更されません。
2:09スライドの例では、一と二のそれぞれを二つずつ並べた配列が返り、一、一、二、
2:13二になることを実機で確認しました。
2:18変換関数が配列を返せばその要素が展開され、配列でない値を返せばそのまま要素になります。
2:25記事の基本例を見ます。
2:27レッド・ブルーという二つの単語を含む行と、グリーンという一行があり、それぞれを行ごとに空白で分割します。
2:35分割した結果は行ごとの配列になるため、そのままでは配列の配列になってしまいます。
2:42フラットマップを使うと、その結果が一段だけ展開され、レッド、ブルー、グリーンという平らな三要素の配列が表示されます。
2:51これは記事の期待出力と一致し、ノードの実機結果とも一致しました。
2:56一行から複数の単語を取り出す、という記事の説明どおり、入力一件から複数件を生む処理の代表例です。
3:04タグの一覧や、キーワードの集まりを一つにまとめる場面でも、同じ書き方が使えます。
3:10フラットマップの正体を、マップとフラットの組み合わせで確かめます。
3:16まず各要素を配列で包むマップを行い、続けてフラットで一段展開すると、一、
3:19二、三が返ります。
3:23同じ変換をフラットマップで書いても、結果はまったく同じ一、二、三になることを実機で確認しました。
3:31つまりフラットマップは、マップの後に深さ一のフラットを行う処理の、短い書き方です。
3:38二つのメソッドを続けて書くより意図が伝わりやすく、中間の配列の配列を意識する必要もありません。
3:45逆に、二段以上を展開したい場合は、フラットマップでは足りないため、フラットの深さを指定する書き方を選んでください。
3:55入力一件から件数を変える使い方を見ます。
3:58変換関数が複数要素の配列を返せば、出力は元の件数より増えます。
4:03スライドの例では、各数値とその十倍を並べ、一、十、二、二十という四要素になることを実機で確認しました。
4:11反対に、変換関数が空の配列を返せば、その要素の出力はゼロ件になり、結果から消えます。
4:18これは、絞り込みと変換を同時に行えるということです。
4:22従来はフィルターで不要な要素を除き、続けてマップで変換する、という二段階が必要でしたが、
4:27フラットマップなら一段階で書けます。
4:32残す要素では値を返し、除く要素では空配列を返す、という条件分けが基本の形です。
4:38記事の境界例を確認します。
4:40一、二、三という配列に対して、奇数ならその数と十倍の数を並べた配列を返し、
4:45偶数なら空の配列を返すコードです。
4:50実行すると、一、十、三、三十という結果になり、記事の期待出力と一致し、実機結果とも一致しました。
4:59二という偶数は空配列によって消え、残った奇数はそれぞれ二件に広がっています。
5:06余りを調べる演算で条件分けをし、残す場合と消す場合を一つの変換関数にまとめている点が、
5:10この例のポイントです。
5:15成功例だけでなく、このように該当なしや空の出力を含む条件を確かめると、実際のデータ処理へ組み込みやすくなります。
5:25平坦化の深さに関する注意です。
5:28フラットマップが展開するのは、常に外側の一段だけです。
5:32スライドの最初の例では、各数値を二重の配列で包んで返しているため、一段だけが外れ、
5:37一重の配列が要素として残ることを実機で確認しました。
5:42記事も、任意の深さまで展開する機能ではない、と注意しています。
5:47二番目の例のように、もともと一重の入れ子であれば、その一段は展開されます。
5:53もしすべての入れ子を取り除きたい場合は、フラットにインフィニティを指定する方法など、
5:57別の手段が必要です。
6:01変換関数が返す配列の深さを、結果の形から逆算して考えることが大切です。
6:06変換関数の詳しい受け取り方を確認します。
6:10変換関数は、要素だけでなく、インデックスと元の配列も受け取れます。
6:15位置によって処理を変えたい場合に使えます。
6:18また、第二引数のディスアーグを指定すると、通常の関数式で書いた変換関数の中で、
6:22その値をディスとして参照できます。
6:27スライドの例では、倍率を十に固定し、一と二が十と二十になることを実機で確認しました。
6:33ただし、アロー関数ではディスは外側のものが使われるため、ディスアーグは効果がありません。
6:40ディスアーグが必要な場合は、アロー関数ではなく通常の関数式で書く、という使い分けを覚えておきましょう。
6:48注意点を三つ確認します。
6:50まず、フラットマップは新しい配列を返すメソッドで、元の配列は変更されません。
6:56スライドの例でも、変換後も元の配列はエー・ビーとシーという二要素のままであることを実機で確認しました。
7:05次に、要素が空いた、いわゆる疎な配列では、空きの位置で変換関数は呼ばれず、
7:09結果にも空きは現れません。
7:14そして、結果の長さは入力の長さと一致するとは限りません。
7:18空配列で消したり、複数要素を返して増やしたりするため、長さを前提にした処理とは相性が悪い点に注意してください。
7:28変換関数の中で例外が発生すると全体が止まるため、失敗しうる変換は事前の検証と組み合わせましょう。
7:36まとめです。
7:37フラットマップは、各要素を変換し、結果を一段だけ平坦化して、新しい配列を返すメソッドです。
7:44ポイントは三つです。
7:45まず、マップの後に深さ一のフラットを行う処理と等しく、変換と展開を一度に書けること。
7:52次に、変換関数が空の配列を返せば要素を消せるため、絞り込みと変換を同時にできること。
7:59そして、展開は一段だけで、元の配列は変更されないことです。
8:03まずは記事の基本例と境界例を実行し、入力を一つ変えて、件数がどう変わるかを予測してから確かめてみてください。
8:12お疲れさまでした。
8:13一件から複数件へ広げたい、あるいは不要な要素を消しながら変換したい、という場面でフラットマップを思い出してください。

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

この動画で学べること

Array.prototype.flatMap()で各要素を変換し、結果を1段だけ平坦化する方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

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