WEBVTT

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

2
00:00:00.961 --> 00:00:03.365
今回はファインドを紹介します。

3
00:00:03.365 --> 00:00:08.332
これは、条件を満たす最初の要素そのものを取得するメソッドです。

4
00:00:08.332 --> 00:00:15.703
前回学んだファインドインデックスが位置を返すのに対して、ファインドは要素そのものを返します。

5
00:00:15.703 --> 00:00:20.190
条件に合う要素がなければ、アンディファインドが返ります。

6
00:00:20.190 --> 00:00:25.477
たとえば、アイディーから利用者を一件だけ探したい場面で役立ちます。

7
00:00:25.477 --> 00:00:30.658
この動画では、書き方と引数、戻り値、記事の基本例、コールバックの引数、該当なしの扱い、

8
00:00:30.658 --> 00:00:35.839
アンディファインドの二つの意味、安全な読み取り方、そして似たメソッドとの違いまで、

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

10
00:00:41.020 --> 00:00:46.468
位置ではなく値そのものが欲しいときに選ぶメソッドだと覚えてください。

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

12
00:00:48.341 --> 00:00:53.097
記事の互換性情報では、クロームでは四十五以降、エッジでは十二以降、ファイアーフォックスでは二十五以降、

13
00:00:53.097 --> 00:00:57.853
サファリでは八以降で使えます。

14
00:00:57.853 --> 00:01:02.032
ノード・ジェイエスでは四・ゼロ・ゼロ以降に対応しています。

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

16
00:01:06.355 --> 00:01:12.408
ファインドは比較的古くから使えるメソッドで、現在の主要な環境では広く対応しています。

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

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

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

20
00:01:24.897 --> 00:01:30.949
対象の配列に続けてファインドと書き、カッコの中に判定する関数を渡します。

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

22
00:01:37.506 --> 00:01:45.071
判定関数は各要素に対して先頭から順番に呼ばれ、最初に条件を満たした要素そのものが返ります。

23
00:01:45.071 --> 00:01:49.441
判定関数には、要素の値、位置、配列自体が渡されます。

24
00:01:49.441 --> 00:01:54.485
任意で、判定関数の中のディスを決める第二引数も指定できます。

25
00:01:54.485 --> 00:02:02.050
戻り値は要素で、配列ではない点、そして該当がなければアンディファインドになる点が特徴です。

26
00:02:02.050 --> 00:02:05.244
まずは、この基本の形を押さえましょう。

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

28
00:02:06.820 --> 00:02:11.835
アイディーが一と二の、二つの利用者オブジェクトが入った配列があります。

29
00:02:11.835 --> 00:02:17.280
この配列にファインドを呼び、アイディーが二の要素を探し、その名前を読みます。

30
00:02:17.280 --> 00:02:23.870
実行すると空という名前が表示され、記事の期待出力と一致し、ノードの実機結果とも一致しました。

31
00:02:23.870 --> 00:02:30.032
疑問符とドットをつなぐ書き方のおかげで、見つからなかった場合でもエラーを避けられます。

32
00:02:30.032 --> 00:02:34.187
その安全な読み取り方は、後のセクションで詳しく説明します。

33
00:02:34.187 --> 00:02:37.912
この短い一文が、データを一件探す基本の形になります。

34
00:02:37.912 --> 00:02:40.835
判定関数に渡される引数を詳しく見ます。

35
00:02:40.835 --> 00:02:43.605
判定関数は三つの引数を受け取ります。

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

37
00:02:49.913 --> 00:02:56.991
スライドの例では、十、二十、三十という配列で、位置が二の要素を探し、結果は三十になりました。

38
00:02:56.991 --> 00:02:58.837
実機でも同じ結果でした。

39
00:02:58.837 --> 00:03:03.837
通常は値だけを使うことが多いのですが、位置そのものを条件にしたい場合や、

40
00:03:03.837 --> 00:03:08.838
配列の長さと組み合わせたい場合に、残りの引数が役立ちます。

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

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

43
00:03:17.300 --> 00:03:20.321
実例として、数値の条件検索を見ます。

44
00:03:20.321 --> 00:03:27.370
五、十二、八、百三十という配列について、十より大きい最初の値をファインドで調べます。

45
00:03:27.370 --> 00:03:31.901
実行すると十二になり、最初に条件に合った値が返ります。

46
00:03:31.901 --> 00:03:33.915
実機でも同じ結果でした。

47
00:03:33.915 --> 00:03:41.299
百三十も条件に合いますが、最初に見つかった時点で探索は終わるため、返るのは十二だけです。

48
00:03:41.299 --> 00:03:47.677
このようにファインドは、条件に合う最初の一個だけが欲しい場面に向いています。

49
00:03:47.677 --> 00:03:53.718
条件に合うすべてが欲しい場合は、後で学ぶフィルターを使うとよいでしょう。

50
00:03:53.718 --> 00:03:59.760
また、探すだけなので、元の配列は変更されないことも実機で確認しています。

51
00:03:59.760 --> 00:04:03.411
記事の境界例で、該当がない場合を確かめます。

52
00:04:03.411 --> 00:04:11.542
一と二の配列で、五より大きい要素を探すと、条件に合う要素がないため、アンディファインドが返ります。

53
00:04:11.542 --> 00:04:19.673
スライドの例では、その結果がアンディファインドと等しいかを比べ、トゥルーになることを示しています。

54
00:04:19.673 --> 00:04:21.664
実機でも同じ結果でした。

55
00:04:21.664 --> 00:04:26.808
アンディファインドは、見つからなかったことを表す約束の値です。

56
00:04:26.808 --> 00:04:32.616
そのため、結果を使う前に、見つかったかどうかを確認する習慣が大切です。

57
00:04:32.616 --> 00:04:38.092
空の配列で探した場合も、答えは同じくアンディファインドになります。

58
00:04:38.092 --> 00:04:43.900
ただし次のセクションで見るように、この判定には一つ落とし穴があります。

59
00:04:43.900 --> 00:04:46.038
記事が注意する仕様を確認します。

60
00:04:46.038 --> 00:04:49.780
ファインドが返すのは要素そのもので、配列ではありません。

61
00:04:49.780 --> 00:04:55.258
ここで大切なのは、配列の中にアンディファインドという要素自体が入っている場合です。

62
00:04:55.258 --> 00:04:59.935
スライドの例のように、アンディファインドを探して見つけた場合でも、返ってくる値はアンディファインドで、

63
00:04:59.935 --> 00:05:04.612
見つからなかった場合と区別できません。

64
00:05:04.612 --> 00:05:06.216
実機でも同じ結果でした。

65
00:05:06.216 --> 00:05:11.962
つまり、戻り値だけでは、見つけたのか見つからなかったのかが分からない場合があるのです。

66
00:05:11.962 --> 00:05:19.712
存在するかどうかや、その位置が正確に必要な場面では、前回学んだファインドインデックスを使って位置で判定してください。

67
00:05:19.712 --> 00:05:22.785
見つからなかった場合の安全な扱い方を見ます。

68
00:05:22.785 --> 00:05:29.490
ファインドの結果がアンディファインドのとき、そのままプロパティを読もうとするとエラーになります。

69
00:05:29.490 --> 00:05:34.378
そこで基本例でも使われていた、疑問符とドットをつなぐ書き方を使います。

70
00:05:34.378 --> 00:05:38.010
これを使うと、対象がアンディファインドの場合に、そのままアンディファインドが返り、

71
00:05:38.010 --> 00:05:41.642
エラーを避けられます。

72
00:05:41.642 --> 00:05:49.604
スライドの例では、登録されていないアイディー九十九を探し、名前がアンディファインドになることを実機で確認しました。

73
00:05:49.604 --> 00:05:55.470
結果がアンディファインドかどうかで、未登録の場合の表示や処理を分けることができます。

74
00:05:55.470 --> 00:05:59.940
探す処理と、なかった場合の処理をセットで書く習慣をつけましょう。

75
00:05:59.940 --> 00:06:02.999
よく似たメソッドとの違いを整理します。

76
00:06:02.999 --> 00:06:10.405
ファインドは条件に合う要素そのものを返しますが、ファインドインデックスはその位置を返します。

77
00:06:10.405 --> 00:06:15.073
スライドの例では、二十について、ファインドは二十、ファインドインデックスは位置一を返し、

78
00:06:15.073 --> 00:06:19.742
どちらも実機で確認しました。

79
00:06:19.742 --> 00:06:25.055
また、フィルターは条件に合う要素すべてを新しい配列として返します。

80
00:06:25.055 --> 00:06:32.782
五、十二、八、百三十から十より大きいものを集めると、十二と百三十の二つが返ることも確認済みです。

81
00:06:32.782 --> 00:06:38.095
要素そのものが一件欲しいならファインド、位置が欲しいならファインドインデックス、

82
00:06:38.095 --> 00:06:43.408
すべて欲しいならフィルター、と目的で選んでください。

83
00:06:43.408 --> 00:06:44.318
まとめです。

84
00:06:44.318 --> 00:06:52.201
ファインドは、条件を満たす最初の要素そのものを返し、該当がなければアンディファインドを返すメソッドです。

85
00:06:52.201 --> 00:06:53.717
ポイントは三つです。

86
00:06:53.717 --> 00:07:00.237
まず、引数には要素と位置を受け取る判定関数を渡し、最初に合った時点で探索が終わること。

87
00:07:00.237 --> 00:07:05.998
次に、見つからなかった結果は、疑問符とドットの書き方で安全に読み取れること。

88
00:07:05.998 --> 00:07:16.004
そして、要素自体がアンディファインドの場合と区別できないため、位置や有無を正確に知りたいときはファインドインデックスを使うことです。

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

90
00:07:21.765 --> 00:07:23.130
お疲れさまでした。

91
00:07:23.130 --> 00:07:28.436
一件探す処理が書けるようになれば、実務のデータ検索の土台が固まります。