WEBVTT

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

2
00:00:01.049 --> 00:00:03.671
今回はフィルターを紹介します。

3
00:00:03.671 --> 00:00:10.839
これは、配列の中から条件に合う要素だけを取り出して、新しい配列を作るメソッドです。

4
00:00:10.839 --> 00:00:17.133
すべての要素を一つずつ判定関数に渡し、条件を満たした要素だけを残します。

5
00:00:17.133 --> 00:00:26.399
たとえば、タスクの一覧から未完了のものだけを抜き出したり、点数の一覧から合格点以上だけを残したりできます。

6
00:00:26.399 --> 00:00:32.081
この動画では、書き方と引数、戻り値、記事の基本例、判定関数の引数、浅いコピーの注意点、

7
00:00:32.081 --> 00:00:37.763
そして応用例まで、実行結果と一緒に学びます。

8
00:00:37.763 --> 00:00:43.183
元の配列を壊さずに絞り込める点が、フィルターの大きな特長です。

9
00:00:43.183 --> 00:00:50.351
条件を自分で書けるため、数値でも文字列でもオブジェクトでも、同じ考え方で使えます。

10
00:00:50.351 --> 00:00:52.097
まず動作環境を確認します。

11
00:00:52.097 --> 00:00:56.395
記事の互換性情報では、クロームでは一以降、エッジでは十二以降、ファイアーフォックスでは一・五以降、

12
00:00:56.395 --> 00:01:00.693
サファリでは三以降で使えます。

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

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

15
00:01:08.752 --> 00:01:14.393
フィルターは非常に古くから使えるメソッドで、現在の主要な環境では広く対応しています。

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

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

18
00:01:24.198 --> 00:01:29.571
ブラウザーでもノードでも同じ書き方で動くため、学習したコードをそのまま試せます。

19
00:01:29.571 --> 00:01:31.196
書き方を確認します。

20
00:01:31.196 --> 00:01:36.722
対象の配列に続けてフィルターと書き、カッコの中に判定関数を渡します。

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

22
00:01:43.060 --> 00:01:48.180
判定関数は各要素に対して先頭から順番に呼ばれ、結果がトゥルーシー、つまり真とみなされる値なら、

23
00:01:48.180 --> 00:01:53.299
その要素が新しい配列に残ります。

24
00:01:53.299 --> 00:01:57.850
判定関数には、今の要素、その位置、配列自体が渡されます。

25
00:01:57.850 --> 00:02:04.350
第二引数にディスアーグを指定すると、判定関数の中で使うディスの値を決められます。

26
00:02:04.350 --> 00:02:12.151
戻り値は条件を満たす要素の新しい配列で、該当がなければ空の配列になり、元の配列は変更されません。

27
00:02:12.151 --> 00:02:17.677
まずは、この基本の形と、戻り値が常に配列になることを押さえましょう。

28
00:02:17.677 --> 00:02:19.363
記事の基本例を見ます。

29
00:02:19.363 --> 00:02:25.339
学習という完了済みのタスクと、復習という未完了のタスクが入った配列があります。

30
00:02:25.339 --> 00:02:32.081
この配列にフィルターを呼び、ドーンがフォールスの要素、つまり未完了の要素だけを残します。

31
00:02:32.081 --> 00:02:39.896
実行すると、復習だけが入った配列が表示され、記事の期待出力と一致し、ノードの実機結果とも一致しました。

32
00:02:39.896 --> 00:02:43.573
判定はドーンの否定という短い式で書かれています。

33
00:02:43.573 --> 00:02:47.251
条件を一つの式で表すのが、この例のポイントです。

34
00:02:47.251 --> 00:02:51.235
まずはこの形を、絞り込みの基本として覚えてください。

35
00:02:51.235 --> 00:02:57.977
一段ずつ、どの要素が残り、どの要素が外れるのかを思い浮かべながら読むと理解が深まります。

36
00:02:57.977 --> 00:03:01.078
判定関数に渡される引数を詳しく見ます。

37
00:03:01.078 --> 00:03:04.017
判定関数は三つの引数を受け取ります。

38
00:03:04.017 --> 00:03:10.709
一つ目は今調べている要素の値、二つ目はその要素の位置、三つ目は対象の配列自体です。

39
00:03:10.709 --> 00:03:15.116
スライドの例では、十、二十、三十という配列から、位置が一ではない要素だけを残し、

40
00:03:15.116 --> 00:03:19.523
結果は十と三十になりました。

41
00:03:19.523 --> 00:03:21.482
実機でも同じ結果でした。

42
00:03:21.482 --> 00:03:28.664
通常は値だけを使うことが多いのですが、位置を条件にしたい場合に二つ目の引数が役立ちます。

43
00:03:28.664 --> 00:03:33.561
必要な引数だけを書けばよく、途中までで省略しても構いません。

44
00:03:33.561 --> 00:03:37.642
引数の順番は、値、位置、配列の順と覚えてください。

45
00:03:37.642 --> 00:03:43.192
配列自体の引数は、全体の長さと比べたい場合などに使うことがあります。

46
00:03:43.192 --> 00:03:46.259
実例として、数値の絞り込みを見ます。

47
00:03:46.259 --> 00:03:51.116
一から六までの配列について、二で割った余りがゼロという条件でフィルターをかけると、

48
00:03:51.116 --> 00:03:55.973
偶数の二、四、六だけが残ります。

49
00:03:55.973 --> 00:03:58.019
実機でも同じ結果でした。

50
00:03:58.019 --> 00:04:02.279
別の例では、十、二十、三十、四十の配列から、二十以上の要素だけを残し、二十、

51
00:04:02.279 --> 00:04:06.540
三十、四十が返りました。

52
00:04:06.540 --> 00:04:11.397
条件式を書き換えるだけで、偶数だけ、基準以上だけ、範囲の中だけといった、

53
00:04:11.397 --> 00:04:16.254
さまざまな絞り込みが同じ書き方で表せます。

54
00:04:16.254 --> 00:04:21.025
数値の検証や、合格者の抽出など、実務でもよく使う形です。

55
00:04:21.025 --> 00:04:27.331
条件は一つの式で短く書くほど、読み返したときに意図が伝わりやすくなります。

56
00:04:27.331 --> 00:04:30.105
文字列とディスアーグの例を見ます。

57
00:04:30.105 --> 00:04:34.675
まず、アップル、バナナ、キウイという単語の配列から、長さが五以上の単語だけを残すと、

58
00:04:34.675 --> 00:04:39.245
アップルとバナナが返ります。

59
00:04:39.245 --> 00:04:41.204
実機でも同じ結果でした。

60
00:04:41.204 --> 00:04:46.590
次に、基準値十五を持つオブジェクトをディスアーグとして渡す例です。

61
00:04:46.590 --> 00:04:53.445
通常の関数で書いた判定関数の中でディスを参照すると、その基準値を使って判定できます。

62
00:04:53.445 --> 00:04:55.403
結果は二十と三十でした。

63
00:04:55.403 --> 00:05:03.890
アロー関数ではディスが外側の値になるため、ディスアーグを使いたいときは通常の関数で書く点がポイントです。

64
00:05:03.890 --> 00:05:08.460
基準を外から渡せると、判定関数を再利用しやすくなります。

65
00:05:08.460 --> 00:05:14.662
文字列の長さや数値の範囲など、条件の材料はプロパティや値から自由に選べます。

66
00:05:14.662 --> 00:05:18.536
記事の境界例で、浅いコピーの仕様を確かめます。

67
00:05:18.536 --> 00:05:25.947
ドーンがフォールスのオブジェクトを一つ持つ配列から、フィルターでその要素を取り出します。

68
00:05:25.947 --> 00:05:33.358
取り出した先でドーンをトゥルーに書き換えると、元の配列側のドーンもトゥルーに変わります。

69
00:05:33.358 --> 00:05:38.243
スライドの例でも結果はトゥルーで、実機でも同じ結果でした。

70
00:05:38.243 --> 00:05:43.296
これは、フィルターが作るのは新しい配列の入れ物だけで、中のオブジェクト自体はコピーされず、

71
00:05:43.296 --> 00:05:48.349
同じ参照が共有されるためです。

72
00:05:48.349 --> 00:05:55.591
配列の入れ物と、中に入るオブジェクトの参照を分けて考えると、更新時の不具合を防げます。

73
00:05:55.591 --> 00:06:02.834
中身まで独立させたい場合は、取り出した後にオブジェクト自体をコピーする工夫が必要です。

74
00:06:02.834 --> 00:06:04.946
注意する仕様を確認します。

75
00:06:04.946 --> 00:06:11.121
まず、条件に合う要素が一つもない場合、エラーにはならず、空の配列が返ります。

76
00:06:11.121 --> 00:06:15.671
空の配列にフィルターをかけた場合も、同じく空の配列です。

77
00:06:15.671 --> 00:06:17.620
実機でも同じ結果でした。

78
00:06:17.620 --> 00:06:23.470
次に、判定はトゥルーそのものではなく、トゥルーシーかどうかで行われます。

79
00:06:23.470 --> 00:06:28.588
ゼロや空文字やヌルは残らず、値があるものだけが残るため、ブーリアンをそのまま渡すと、

80
00:06:28.588 --> 00:06:33.707
不要な値を取り除く定番の書き方になります。

81
00:06:33.707 --> 00:06:37.119
また、フィルターは元の配列を変更しません。

82
00:06:37.119 --> 00:06:41.344
結果を受け取る変数を用意し忘れないようにしましょう。

83
00:06:41.344 --> 00:06:48.006
空の配列が返る仕様のおかげで、結果をそのまま次の処理へ渡しても壊れにくくなります。

84
00:06:48.006 --> 00:06:50.705
応用例として、メソッドチェーンを見ます。

85
00:06:50.705 --> 00:06:55.495
一から五までの配列に、まずフィルターで三以上の要素だけを残し、続けてマップで各要素を十倍に変換すると、

86
00:06:55.495 --> 00:07:00.285
三十、四十、五十という配列が得られます。

87
00:07:00.285 --> 00:07:01.905
実機でも同じ結果でした。

88
00:07:01.905 --> 00:07:07.167
絞ってから変換するという流れは、データ処理で最もよく使う組み合わせの一つです。

89
00:07:07.167 --> 00:07:09.731
似たメソッドとの違いも整理しましょう。

90
00:07:09.731 --> 00:07:16.073
ファインドは条件に合う最初の一個だけを返しますが、フィルターは合う要素すべてを配列で返します。

91
00:07:16.073 --> 00:07:19.581
一個でよいのか、全件ほしいのかで使い分けてください。

92
00:07:19.581 --> 00:07:25.114
処理の順番を言葉で説明できるようになると、チェーンの読み書きで迷いにくくなります。

93
00:07:25.114 --> 00:07:26.041
まとめです。

94
00:07:26.041 --> 00:07:34.073
フィルターは、配列の要素を判定関数で一つずつ調べ、条件に合う要素だけを新しい配列へ取り出すメソッドです。

95
00:07:34.073 --> 00:07:35.618
ポイントは三つです。

96
00:07:35.618 --> 00:07:41.642
まず、判定関数には値と位置と配列が渡され、結果がトゥルーシーの要素が残ること。

97
00:07:41.642 --> 00:07:46.585
次に、該当がなければ空の配列が返り、元の配列は変更されないこと。

98
00:07:46.585 --> 00:07:54.155
そして、取り出したオブジェクトは元のものと参照が共有されるため、書き換えの影響に注意することです。

99
00:07:54.155 --> 00:08:00.024
まずは記事の基本例と境界例を実行し、結果を予測してから確かめてみてください。

100
00:08:00.024 --> 00:08:01.415
お疲れさまでした。

101
00:08:01.415 --> 00:08:08.366
絞り込みが書けるようになれば、検索や表示の切り替えなど、画面のデータ処理にも応用できます。