WEBVTT

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

2
00:00:01.224 --> 00:00:04.691
今回はフラットマップを紹介します。

3
00:00:04.691 --> 00:00:14.074
これは、各要素を変換し、その結果を一段だけ平坦化するための、配列のインスタンスメソッドです。

4
00:00:14.074 --> 00:00:24.273
名前は、変換を意味するマップと、平らにするフラットを合わせたもので、その二つの働きを一度に行います。

5
00:00:24.273 --> 00:00:30.086
たとえば、一行の文章から複数の単語を取り出すような、入力一件から出力がゼロ件、

6
00:00:30.086 --> 00:00:35.900
一件、複数件へ変わる処理に向きます。

7
00:00:35.900 --> 00:00:45.996
この動画では、書き方と引数、戻り値、記事の基本例である単語の取り出し、マップとフラットの組み合わせとの違い、

8
00:00:45.996 --> 00:00:56.093
空の配列で要素を消す境界例、そして一段しか展開しない注意点まで、実行結果と一緒に学びます。

9
00:00:56.093 --> 00:01:04.660
変換した結果が配列の配列になってしまう、という場面で最初に思い出したいメソッドです。

10
00:01:04.660 --> 00:01:06.304
まず動作環境を確認します。

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

12
00:01:10.604 --> 00:01:14.903
サファリでは十二以降で使えます。

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

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

15
00:01:22.491 --> 00:01:27.423
フラットマップは比較的新しいメソッドですが、現在の主要な環境では広く使えます。

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

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

18
00:01:37.160 --> 00:01:38.871
書き方を確認します。

19
00:01:38.871 --> 00:01:45.029
対象の配列に続けてフラットマップと書き、カッコの中に変換関数を渡します。

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

21
00:01:51.700 --> 00:01:57.003
変換関数は、要素、インデックス、元の配列の三つを受け取ります。

22
00:01:57.003 --> 00:02:02.647
第二引数には、変換関数の中で使うディスを指定でき、これは任意です。

23
00:02:02.647 --> 00:02:09.148
戻り値は、変換と一段の平坦化を行った新しい配列で、元の配列は変更されません。

24
00:02:09.148 --> 00:02:13.766
スライドの例では、一と二のそれぞれを二つずつ並べた配列が返り、一、一、二、

25
00:02:13.766 --> 00:02:18.385
二になることを実機で確認しました。

26
00:02:18.385 --> 00:02:25.740
変換関数が配列を返せばその要素が展開され、配列でない値を返せばそのまま要素になります。

27
00:02:25.740 --> 00:02:27.494
記事の基本例を見ます。

28
00:02:27.494 --> 00:02:35.787
レッド・ブルーという二つの単語を含む行と、グリーンという一行があり、それぞれを行ごとに空白で分割します。

29
00:02:35.787 --> 00:02:42.166
分割した結果は行ごとの配列になるため、そのままでは配列の配列になってしまいます。

30
00:02:42.166 --> 00:02:51.415
フラットマップを使うと、その結果が一段だけ展開され、レッド、ブルー、グリーンという平らな三要素の配列が表示されます。

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

32
00:02:56.518 --> 00:03:04.173
一行から複数の単語を取り出す、という記事の説明どおり、入力一件から複数件を生む処理の代表例です。

33
00:03:04.173 --> 00:03:10.552
タグの一覧や、キーワードの集まりを一つにまとめる場面でも、同じ書き方が使えます。

34
00:03:10.552 --> 00:03:16.000
フラットマップの正体を、マップとフラットの組み合わせで確かめます。

35
00:03:16.000 --> 00:03:19.715
まず各要素を配列で包むマップを行い、続けてフラットで一段展開すると、一、

36
00:03:19.715 --> 00:03:23.429
二、三が返ります。

37
00:03:23.429 --> 00:03:31.354
同じ変換をフラットマップで書いても、結果はまったく同じ一、二、三になることを実機で確認しました。

38
00:03:31.354 --> 00:03:38.122
つまりフラットマップは、マップの後に深さ一のフラットを行う処理の、短い書き方です。

39
00:03:38.122 --> 00:03:45.882
二つのメソッドを続けて書くより意図が伝わりやすく、中間の配列の配列を意識する必要もありません。

40
00:03:45.882 --> 00:03:55.292
逆に、二段以上を展開したい場合は、フラットマップでは足りないため、フラットの深さを指定する書き方を選んでください。

41
00:03:55.292 --> 00:03:58.479
入力一件から件数を変える使い方を見ます。

42
00:03:58.479 --> 00:04:03.418
変換関数が複数要素の配列を返せば、出力は元の件数より増えます。

43
00:04:03.418 --> 00:04:11.544
スライドの例では、各数値とその十倍を並べ、一、十、二、二十という四要素になることを実機で確認しました。

44
00:04:11.544 --> 00:04:18.236
反対に、変換関数が空の配列を返せば、その要素の出力はゼロ件になり、結果から消えます。

45
00:04:18.236 --> 00:04:22.379
これは、絞り込みと変換を同時に行えるということです。

46
00:04:22.379 --> 00:04:27.318
従来はフィルターで不要な要素を除き、続けてマップで変換する、という二段階が必要でしたが、

47
00:04:27.318 --> 00:04:32.258
フラットマップなら一段階で書けます。

48
00:04:32.258 --> 00:04:38.472
残す要素では値を返し、除く要素では空配列を返す、という条件分けが基本の形です。

49
00:04:38.472 --> 00:04:40.820
記事の境界例を確認します。

50
00:04:40.820 --> 00:04:45.696
一、二、三という配列に対して、奇数ならその数と十倍の数を並べた配列を返し、

51
00:04:45.696 --> 00:04:50.573
偶数なら空の配列を返すコードです。

52
00:04:50.573 --> 00:04:59.242
実行すると、一、十、三、三十という結果になり、記事の期待出力と一致し、実機結果とも一致しました。

53
00:04:59.242 --> 00:05:06.105
二という偶数は空配列によって消え、残った奇数はそれぞれ二件に広がっています。

54
00:05:06.105 --> 00:05:10.982
余りを調べる演算で条件分けをし、残す場合と消す場合を一つの変換関数にまとめている点が、

55
00:05:10.982 --> 00:05:15.858
この例のポイントです。

56
00:05:15.858 --> 00:05:25.972
成功例だけでなく、このように該当なしや空の出力を含む条件を確かめると、実際のデータ処理へ組み込みやすくなります。

57
00:05:25.972 --> 00:05:28.303
平坦化の深さに関する注意です。

58
00:05:28.303 --> 00:05:32.498
フラットマップが展開するのは、常に外側の一段だけです。

59
00:05:32.498 --> 00:05:37.703
スライドの最初の例では、各数値を二重の配列で包んで返しているため、一段だけが外れ、

60
00:05:37.703 --> 00:05:42.908
一重の配列が要素として残ることを実機で確認しました。

61
00:05:42.908 --> 00:05:47.725
記事も、任意の深さまで展開する機能ではない、と注意しています。

62
00:05:47.725 --> 00:05:53.474
二番目の例のように、もともと一重の入れ子であれば、その一段は展開されます。

63
00:05:53.474 --> 00:05:57.514
もしすべての入れ子を取り除きたい場合は、フラットにインフィニティを指定する方法など、

64
00:05:57.514 --> 00:06:01.554
別の手段が必要です。

65
00:06:01.554 --> 00:06:06.992
変換関数が返す配列の深さを、結果の形から逆算して考えることが大切です。

66
00:06:06.992 --> 00:06:10.088
変換関数の詳しい受け取り方を確認します。

67
00:06:10.088 --> 00:06:15.196
変換関数は、要素だけでなく、インデックスと元の配列も受け取れます。

68
00:06:15.196 --> 00:06:18.447
位置によって処理を変えたい場合に使えます。

69
00:06:18.447 --> 00:06:22.782
また、第二引数のディスアーグを指定すると、通常の関数式で書いた変換関数の中で、

70
00:06:22.782 --> 00:06:27.116
その値をディスとして参照できます。

71
00:06:27.116 --> 00:06:33.618
スライドの例では、倍率を十に固定し、一と二が十と二十になることを実機で確認しました。

72
00:06:33.618 --> 00:06:40.429
ただし、アロー関数ではディスは外側のものが使われるため、ディスアーグは効果がありません。

73
00:06:40.429 --> 00:06:48.324
ディスアーグが必要な場合は、アロー関数ではなく通常の関数式で書く、という使い分けを覚えておきましょう。

74
00:06:48.324 --> 00:06:50.374
注意点を三つ確認します。

75
00:06:50.374 --> 00:06:56.865
まず、フラットマップは新しい配列を返すメソッドで、元の配列は変更されません。

76
00:06:56.865 --> 00:07:05.577
スライドの例でも、変換後も元の配列はエー・ビーとシーという二要素のままであることを実機で確認しました。

77
00:07:05.577 --> 00:07:09.848
次に、要素が空いた、いわゆる疎な配列では、空きの位置で変換関数は呼ばれず、

78
00:07:09.848 --> 00:07:14.118
結果にも空きは現れません。

79
00:07:14.118 --> 00:07:18.901
そして、結果の長さは入力の長さと一致するとは限りません。

80
00:07:18.901 --> 00:07:28.297
空配列で消したり、複数要素を返して増やしたりするため、長さを前提にした処理とは相性が悪い点に注意してください。

81
00:07:28.297 --> 00:07:36.496
変換関数の中で例外が発生すると全体が止まるため、失敗しうる変換は事前の検証と組み合わせましょう。

82
00:07:36.496 --> 00:07:37.430
まとめです。

83
00:07:37.430 --> 00:07:44.438
フラットマップは、各要素を変換し、結果を一段だけ平坦化して、新しい配列を返すメソッドです。

84
00:07:44.438 --> 00:07:45.995
ポイントは三つです。

85
00:07:45.995 --> 00:07:52.536
まず、マップの後に深さ一のフラットを行う処理と等しく、変換と展開を一度に書けること。

86
00:07:52.536 --> 00:07:59.077
次に、変換関数が空の配列を返せば要素を消せるため、絞り込みと変換を同時にできること。

87
00:07:59.077 --> 00:08:03.593
そして、展開は一段だけで、元の配列は変更されないことです。

88
00:08:03.593 --> 00:08:12.002
まずは記事の基本例と境界例を実行し、入力を一つ変えて、件数がどう変わるかを予測してから確かめてみてください。

89
00:08:12.002 --> 00:08:13.404
お疲れさまでした。

90
00:08:13.404 --> 00:08:22.436
一件から複数件へ広げたい、あるいは不要な要素を消しながら変換したい、という場面でフラットマップを思い出してください。