WEBVTT

1
00:00:00.000 --> 00:00:00.865
こんにちは。

2
00:00:00.865 --> 00:00:02.882
今回はフラットを紹介します。

3
00:00:02.882 --> 00:00:09.510
これは、入れ子になった配列を指定の深さまで平坦化するための、配列のインスタンスメソッドです。

4
00:00:09.510 --> 00:00:13.041
フラットは平らにするという意味で、配列の中に入った配列の中身を取り出し、

5
00:00:13.041 --> 00:00:16.571
一つの配列に並べ直します。

6
00:00:16.571 --> 00:00:22.623
たとえば、グループごとに分かれた値を一つの一覧にまとめたい、という場面で役立ちます。

7
00:00:22.623 --> 00:00:28.050
この動画では、書き方と引数である深さ、戻り値、記事の基本例、深さを二や無制限に指定する使い方、

8
00:00:28.050 --> 00:00:33.478
空の要素とアンディファインドの違い、そして元の配列が変わらない点や、配列以外の値は展開されない注意点まで、

9
00:00:33.478 --> 00:00:38.906
実行結果と一緒に学びます。

10
00:00:38.906 --> 00:00:42.652
深さを自分で決められる点が、このメソッドの特徴です。

11
00:00:42.652 --> 00:00:44.518
まず動作環境を確認します。

12
00:00:44.518 --> 00:00:49.400
記事の互換性情報では、クロームでは六十九以降、エッジでは七十九以降、ファイアーフォックスでは六十二以降、

13
00:00:49.400 --> 00:00:54.281
サファリでは十二以降で使えます。

14
00:00:54.281 --> 00:00:58.588
ノード・ジェイエスでは十一・ゼロ・ゼロ以降に対応しています。

15
00:00:58.588 --> 00:01:02.896
これらの数値はエムディーエヌの互換性データに基づく目安です。

16
00:01:02.896 --> 00:01:06.054
フラットは現在の主要な環境では広く使えます。

17
00:01:06.054 --> 00:01:12.371
追加の読み込みは不要で、配列に最初から関数として備わっていることを、実機で確認済みです。

18
00:01:12.371 --> 00:01:17.109
古い環境を対象にする場合は、利用前にこの対応表を確認してください。

19
00:01:17.109 --> 00:01:21.560
対応開始の版は、推奨版という意味ではない点にも注意しましょう。

20
00:01:21.560 --> 00:01:23.174
書き方を確認します。

21
00:01:23.174 --> 00:01:28.178
対象の配列に続けてフラットと書き、カッコの中に深さを渡します。

22
00:01:28.178 --> 00:01:34.473
リファレンス名にあるプロトタイプは、実際の呼び出しで毎回書く必要はありません。

23
00:01:34.473 --> 00:01:38.670
引数の深さは、入れ子を何段まで展開するかを示します。

24
00:01:38.670 --> 00:01:42.544
省略した場合は一になり、一段だけが展開されます。

25
00:01:42.544 --> 00:01:47.386
すべての深さを展開したい場合は、インフィニティを指定します。

26
00:01:47.386 --> 00:01:52.228
戻り値は、平坦化した新しい配列で、元の配列は変更されません。

27
00:01:52.228 --> 00:01:59.008
スライドの例では、一と、配列に入った二が並び、一、二になることを実機で確認しました。

28
00:01:59.008 --> 00:02:04.980
深さは、このメソッドで唯一指定する値なので、意味をしっかり押さえましょう。

29
00:02:04.980 --> 00:02:06.933
記事の基本例を見ます。

30
00:02:06.933 --> 00:02:12.969
一と二のグループと、三と、さらに配列に入った四のグループがあります。

31
00:02:12.969 --> 00:02:17.851
引数を省略してフラットを呼ぶと、深さ一で展開され、一、二、三、そして配列のままの四、

32
00:02:17.851 --> 00:02:22.733
という結果が表示されます。

33
00:02:22.733 --> 00:02:28.413
これは記事の期待出力と一致し、ノードの実機結果とも一致しました。

34
00:02:28.413 --> 00:02:35.870
ポイントは、四を包む内側の配列は二段目にあるため、既定では展開されずに残ることです。

35
00:02:35.870 --> 00:02:45.101
グループ別の値を一覧にまとめる、という記事の説明どおりの動きですが、どこまで平らになるかは深さ次第です。

36
00:02:45.101 --> 00:02:52.912
深さが仕様として決まっているデータでは、その深さを明示すると意図が伝わりやすくなります。

37
00:02:52.912 --> 00:02:56.936
深さの指定で結果がどう変わるかを見ます。

38
00:02:56.936 --> 00:03:02.569
一の隣に、二と、さらに三を包んだ配列がある例で考えます。

39
00:03:02.569 --> 00:03:08.202
深さ一では、二までが取り出され、三を包む配列は残ります。

40
00:03:08.202 --> 00:03:17.859
深さ二を指定すると、三まで取り出され、一、二、三という平らな結果になることを実機で確認しました。

41
00:03:17.859 --> 00:03:26.309
反対に、深さゼロを指定すると、展開は一切行われず、元の構造のままのコピーが返ります。

42
00:03:26.309 --> 00:03:31.741
負の数を指定した場合も、深さゼロと同じ扱いになります。

43
00:03:31.741 --> 00:03:42.605
必要な深さはデータの構造で決まるため、まず入れ子が何段あるかを数え、それに合わせて深さを選ぶことが大切です。

44
00:03:42.605 --> 00:03:49.244
多すぎる指定は、次の無制限の指定と考え方をつなげて理解しましょう。

45
00:03:49.244 --> 00:03:51.423
記事の境界例を確認します。

46
00:03:51.423 --> 00:03:59.635
一だけの配列と、二と三を包んだ配列があり、深さにインフィニティを指定してフラットを呼ぶコードです。

47
00:03:59.635 --> 00:04:07.177
実行すると、一、二、三という結果になり、記事の期待出力と一致し、実機結果とも一致しました。

48
00:04:07.177 --> 00:04:12.875
インフィニティは無制限を意味し、何段の入れ子でもすべて展開されます。

49
00:04:12.875 --> 00:04:22.093
深さがあらかじめ分からないデータを扱う場合に便利ですが、意図せず深い構造まで平らにしてしまう可能性もあります。

50
00:04:22.093 --> 00:04:30.305
データの仕様が決まっている場合は、具体的な数値で深さを明示する方が、意図が読み取りやすくなります。

51
00:04:30.305 --> 00:04:37.512
成功例だけでなく、このような境界条件を確かめると、実際の処理へ組み込みやすくなります。

52
00:04:37.512 --> 00:04:40.753
グループ別の値を一覧にまとめる実例を見ます。

53
00:04:40.753 --> 00:04:44.657
エーとビーのグループ、シーだけのグループ、ディーとイーのグループがあり、

54
00:04:44.657 --> 00:04:48.560
これらをフラットで一段展開します。

55
00:04:48.560 --> 00:04:57.399
実行すると、エー、ビー、シー、ディー、イーという五つの文字列が、元の順序のまま一つの配列に並ぶことを実機で確認しました。

56
00:04:57.399 --> 00:05:02.113
グループごとのまとまりはなくなりますが、要素の順序は保たれます。

57
00:05:02.113 --> 00:05:08.890
タグの一覧や、分類ごとに集めたキーワードを一つのリストにしたい場面で、同じ書き方が使えます。

58
00:05:08.890 --> 00:05:15.813
空のグループが含まれていても、そのグループは結果に何も加えず、他の要素の順序には影響しません。

59
00:05:15.813 --> 00:05:20.380
まとめた後の形を先に思い描いてから使うと分かりやすいでしょう。

60
00:05:20.380 --> 00:05:22.318
空の要素の扱いを確認します。

61
00:05:22.318 --> 00:05:27.442
配列には、値が入っていない空き、いわゆる空スロットが生じることがあります。

62
00:05:27.442 --> 00:05:31.872
フラットで平坦化すると、その空きは除去され、結果には現れません。

63
00:05:31.872 --> 00:05:38.380
スライドの最初の例では、一と三の間の空きが消え、結果の長さが二になることを実機で確認しました。

64
00:05:38.380 --> 00:05:42.396
一方、アンディファインドは一つの値として扱われ、残ります。

65
00:05:42.396 --> 00:05:49.457
二番目の例では、外側と内側のアンディファインドがどちらも残り、長さが二のままになることを確認しました。

66
00:05:49.457 --> 00:05:54.719
見た目では区別しにくい二つですが、フラットを通すと扱いがはっきり分かれます。

67
00:05:54.719 --> 00:06:01.088
データを整える目的でフラットを使う場合は、この違いが結果の長さを変える点に注意してください。

68
00:06:01.088 --> 00:06:03.352
元の配列への影響を確認します。

69
00:06:03.352 --> 00:06:07.277
スライドの例では、グループの配列に対してフラットを呼び、結果として一、二、

70
00:06:07.277 --> 00:06:11.201
三、配列のままの四が返ります。

71
00:06:11.201 --> 00:06:19.050
その直後に元の配列を表示すると、二つのグループという元の入れ子構造のままであることを実機で確認しました。

72
00:06:19.050 --> 00:06:23.578
フラットは元の配列を変更せず、新しい配列を返すメソッドです。

73
00:06:23.578 --> 00:06:30.068
そのため、元の構造を残したまま、平らにした一覧だけを使いたい場合にも安心して使えます。

74
00:06:30.068 --> 00:06:37.012
ただし、結果の配列に含まれるオブジェクトなどは、元の要素と同じものを参照する場合があります。

75
00:06:37.012 --> 00:06:41.540
配列の構造自体は新しくなりますが、中身の参照まで複製されるわけではない点は、

76
00:06:41.540 --> 00:06:46.068
他の多くの配列メソッドと共通する注意点です。

77
00:06:46.068 --> 00:06:47.981
注意点を三つ確認します。

78
00:06:47.981 --> 00:06:51.328
まず、フラットが展開するのは配列だけです。

79
00:06:51.328 --> 00:06:57.147
スライドの例では、文字列のエービーは文字ごとに分解されず、そのまま一つの要素として残り、

80
00:06:57.147 --> 00:07:02.965
配列に入った三だけが取り出されることを実機で確認しました。

81
00:07:02.965 --> 00:07:08.226
数値やオブジェクトも同じで、配列でなければそのまま要素になります。

82
00:07:08.226 --> 00:07:14.762
次に、指定した深さを超えた入れ子は残るため、結果が完全に平らになるとは限りません。

83
00:07:14.762 --> 00:07:16.993
そして、変換は行われません。

84
00:07:16.993 --> 00:07:22.732
各要素を変えながら展開したい場合は、前回学んだフラットマップの出番です。

85
00:07:22.732 --> 00:07:29.746
展開だけならフラット、変換も必要ならフラットマップ、という使い分けを覚えておきましょう。

86
00:07:29.746 --> 00:07:36.760
例外は基本的に発生しませんが、対象が配列でない値の場合は呼び出し自体がエラーになります。

87
00:07:36.760 --> 00:07:37.711
まとめです。

88
00:07:37.711 --> 00:07:44.209
フラットは、入れ子の配列を指定の深さまで平坦化して、新しい配列を返すメソッドです。

89
00:07:44.209 --> 00:07:45.794
ポイントは三つです。

90
00:07:45.794 --> 00:07:54.353
まず、引数の深さを省略すると一段だけが展開され、数値で段数を、インフィニティですべての深さを指定できること。

91
00:07:54.353 --> 00:08:01.802
次に、元の配列は変更されず、要素の空きは除去されますが、アンディファインドは値として残ること。

92
00:08:01.802 --> 00:08:07.825
そして、展開されるのは配列だけで、文字列などが分解されることはないことです。

93
00:08:07.825 --> 00:08:12.342
まずは記事の基本例と境界例を実行し、深さを一、二、インフィニティと変えて、

94
00:08:12.342 --> 00:08:16.859
結果を予測してから確かめてみてください。

95
00:08:16.859 --> 00:08:18.285
お疲れさまでした。

96
00:08:18.285 --> 00:08:24.308
グループ別のデータを一つの一覧にしたい場面で、フラットを思い出してください。