VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:00今回はフラットを紹介します。
0:02これは、入れ子になった配列を指定の深さまで平坦化するための、配列のインスタンスメソッドです。
0:09フラットは平らにするという意味で、配列の中に入った配列の中身を取り出し、
0:13一つの配列に並べ直します。
0:16たとえば、グループごとに分かれた値を一つの一覧にまとめたい、という場面で役立ちます。
0:22この動画では、書き方と引数である深さ、戻り値、記事の基本例、深さを二や無制限に指定する使い方、
0:28空の要素とアンディファインドの違い、そして元の配列が変わらない点や、配列以外の値は展開されない注意点まで、
0:33実行結果と一緒に学びます。
0:38深さを自分で決められる点が、このメソッドの特徴です。
0:42まず動作環境を確認します。
0:44記事の互換性情報では、クロームでは六十九以降、エッジでは七十九以降、ファイアーフォックスでは六十二以降、
0:49サファリでは十二以降で使えます。
0:54ノード・ジェイエスでは十一・ゼロ・ゼロ以降に対応しています。
0:58これらの数値はエムディーエヌの互換性データに基づく目安です。
1:02フラットは現在の主要な環境では広く使えます。
1:06追加の読み込みは不要で、配列に最初から関数として備わっていることを、実機で確認済みです。
1:12古い環境を対象にする場合は、利用前にこの対応表を確認してください。
1:17対応開始の版は、推奨版という意味ではない点にも注意しましょう。
1:21書き方を確認します。
1:23対象の配列に続けてフラットと書き、カッコの中に深さを渡します。
1:28リファレンス名にあるプロトタイプは、実際の呼び出しで毎回書く必要はありません。
1:34引数の深さは、入れ子を何段まで展開するかを示します。
1:38省略した場合は一になり、一段だけが展開されます。
1:42すべての深さを展開したい場合は、インフィニティを指定します。
1:47戻り値は、平坦化した新しい配列で、元の配列は変更されません。
1:52スライドの例では、一と、配列に入った二が並び、一、二になることを実機で確認しました。
1:59深さは、このメソッドで唯一指定する値なので、意味をしっかり押さえましょう。
2:04記事の基本例を見ます。
2:06一と二のグループと、三と、さらに配列に入った四のグループがあります。
2:12引数を省略してフラットを呼ぶと、深さ一で展開され、一、二、三、そして配列のままの四、
2:17という結果が表示されます。
2:22これは記事の期待出力と一致し、ノードの実機結果とも一致しました。
2:28ポイントは、四を包む内側の配列は二段目にあるため、既定では展開されずに残ることです。
2:35グループ別の値を一覧にまとめる、という記事の説明どおりの動きですが、どこまで平らになるかは深さ次第です。
2:45深さが仕様として決まっているデータでは、その深さを明示すると意図が伝わりやすくなります。
2:52深さの指定で結果がどう変わるかを見ます。
2:56一の隣に、二と、さらに三を包んだ配列がある例で考えます。
3:02深さ一では、二までが取り出され、三を包む配列は残ります。
3:08深さ二を指定すると、三まで取り出され、一、二、三という平らな結果になることを実機で確認しました。
3:17反対に、深さゼロを指定すると、展開は一切行われず、元の構造のままのコピーが返ります。
3:26負の数を指定した場合も、深さゼロと同じ扱いになります。
3:31必要な深さはデータの構造で決まるため、まず入れ子が何段あるかを数え、それに合わせて深さを選ぶことが大切です。
3:42多すぎる指定は、次の無制限の指定と考え方をつなげて理解しましょう。
3:49記事の境界例を確認します。
3:51一だけの配列と、二と三を包んだ配列があり、深さにインフィニティを指定してフラットを呼ぶコードです。
3:59実行すると、一、二、三という結果になり、記事の期待出力と一致し、実機結果とも一致しました。
4:07インフィニティは無制限を意味し、何段の入れ子でもすべて展開されます。
4:12深さがあらかじめ分からないデータを扱う場合に便利ですが、意図せず深い構造まで平らにしてしまう可能性もあります。
4:22データの仕様が決まっている場合は、具体的な数値で深さを明示する方が、意図が読み取りやすくなります。
4:30成功例だけでなく、このような境界条件を確かめると、実際の処理へ組み込みやすくなります。
4:37グループ別の値を一覧にまとめる実例を見ます。
4:40エーとビーのグループ、シーだけのグループ、ディーとイーのグループがあり、
4:44これらをフラットで一段展開します。
4:48実行すると、エー、ビー、シー、ディー、イーという五つの文字列が、元の順序のまま一つの配列に並ぶことを実機で確認しました。
4:57グループごとのまとまりはなくなりますが、要素の順序は保たれます。
5:02タグの一覧や、分類ごとに集めたキーワードを一つのリストにしたい場面で、同じ書き方が使えます。
5:08空のグループが含まれていても、そのグループは結果に何も加えず、他の要素の順序には影響しません。
5:15まとめた後の形を先に思い描いてから使うと分かりやすいでしょう。
5:20空の要素の扱いを確認します。
5:22配列には、値が入っていない空き、いわゆる空スロットが生じることがあります。
5:27フラットで平坦化すると、その空きは除去され、結果には現れません。
5:31スライドの最初の例では、一と三の間の空きが消え、結果の長さが二になることを実機で確認しました。
5:38一方、アンディファインドは一つの値として扱われ、残ります。
5:42二番目の例では、外側と内側のアンディファインドがどちらも残り、長さが二のままになることを確認しました。
5:49見た目では区別しにくい二つですが、フラットを通すと扱いがはっきり分かれます。
5:54データを整える目的でフラットを使う場合は、この違いが結果の長さを変える点に注意してください。
6:01元の配列への影響を確認します。
6:03スライドの例では、グループの配列に対してフラットを呼び、結果として一、二、
6:07三、配列のままの四が返ります。
6:11その直後に元の配列を表示すると、二つのグループという元の入れ子構造のままであることを実機で確認しました。
6:19フラットは元の配列を変更せず、新しい配列を返すメソッドです。
6:23そのため、元の構造を残したまま、平らにした一覧だけを使いたい場合にも安心して使えます。
6:30ただし、結果の配列に含まれるオブジェクトなどは、元の要素と同じものを参照する場合があります。
6:37配列の構造自体は新しくなりますが、中身の参照まで複製されるわけではない点は、
6:41他の多くの配列メソッドと共通する注意点です。
6:46注意点を三つ確認します。
6:47まず、フラットが展開するのは配列だけです。
6:51スライドの例では、文字列のエービーは文字ごとに分解されず、そのまま一つの要素として残り、
6:57配列に入った三だけが取り出されることを実機で確認しました。
7:02数値やオブジェクトも同じで、配列でなければそのまま要素になります。
7:08次に、指定した深さを超えた入れ子は残るため、結果が完全に平らになるとは限りません。
7:14そして、変換は行われません。
7:16各要素を変えながら展開したい場合は、前回学んだフラットマップの出番です。
7:22展開だけならフラット、変換も必要ならフラットマップ、という使い分けを覚えておきましょう。
7:29例外は基本的に発生しませんが、対象が配列でない値の場合は呼び出し自体がエラーになります。
7:36まとめです。
7:37フラットは、入れ子の配列を指定の深さまで平坦化して、新しい配列を返すメソッドです。
7:44ポイントは三つです。
7:45まず、引数の深さを省略すると一段だけが展開され、数値で段数を、インフィニティですべての深さを指定できること。
7:54次に、元の配列は変更されず、要素の空きは除去されますが、アンディファインドは値として残ること。
8:01そして、展開されるのは配列だけで、文字列などが分解されることはないことです。
8:07まずは記事の基本例と境界例を実行し、深さを一、二、インフィニティと変えて、
8:12結果を予測してから確かめてみてください。
8:16お疲れさまでした。
8:18グループ別のデータを一つの一覧にしたい場面で、フラットを思い出してください。

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

この動画で学べること

Array.prototype.flat()で入れ子の配列を指定の深さまで平坦化する方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

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