WEBVTT

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

2
00:00:00.879 --> 00:00:03.955
今回はファインドインデックスを紹介します。

3
00:00:03.955 --> 00:00:09.522
これは、条件を満たす最初の要素が、配列の何番目にあるかを調べるメソッドです。

4
00:00:09.522 --> 00:00:13.477
戻り値は要素そのものではなく、ゼロから始まる位置です。

5
00:00:13.477 --> 00:00:16.993
条件に合う要素がなければ、マイナス一が返ります。

6
00:00:16.993 --> 00:00:22.120
たとえば、編集したいデータが何番目にあるかを知りたい場面で役立ちます。

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

8
00:00:27.149 --> 00:00:32.179
ゼロとマイナス一の落とし穴、スプライスとの組み合わせの注意点、そして似たメソッドとの違いまで、

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

10
00:00:37.208 --> 00:00:42.482
位置が分かれば、その要素を更新したり削除したりする処理につなげられます。

11
00:00:42.482 --> 00:00:49.660
要素そのものが欲しいのか、位置が欲しいのかを最初に区別しておくと、似たメソッドとの迷いが減ります。

12
00:00:49.660 --> 00:00:51.592
まず動作環境を確認します。

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

14
00:00:56.496 --> 00:01:01.400
サファリでは八以降で使えます。

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

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

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

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

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

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

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

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

23
00:01:41.562 --> 00:01:47.326
判定関数は各要素に対して順番に呼ばれ、最初に条件を満たした要素の位置が返ります。

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

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

26
00:01:55.396 --> 00:01:59.720
戻り値はゼロから始まる位置で、該当がなければマイナス一です。

27
00:01:59.720 --> 00:02:02.890
要素そのものが返るわけではない点が特徴です。

28
00:02:02.890 --> 00:02:05.628
まずは、この基本の形を押さえましょう。

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

30
00:02:07.548 --> 00:02:13.309
アイディーが十と二十の、二つのオブジェクトが入った配列があります。

31
00:02:13.309 --> 00:02:20.117
この配列にファインドインデックスを呼び、アイディーが十の要素の位置を調べます。

32
00:02:20.117 --> 00:02:27.449
実行するとゼロが表示され、記事の期待出力と一致し、ノードの実機結果とも一致しました。

33
00:02:27.449 --> 00:02:31.464
先頭の要素が条件に合ったため、位置はゼロです。

34
00:02:31.464 --> 00:02:38.447
あわせて、アイディーが二十の要素を探すと位置一になることも実機で確認しています。

35
00:02:38.447 --> 00:02:45.255
編集したい要素の位置が分かれば、その位置を使って値を書き換える処理に進めます。

36
00:02:45.255 --> 00:02:49.096
この短い一文が、対象を探す出発点になります。

37
00:02:49.096 --> 00:02:52.439
判定関数に渡される引数を詳しく見ます。

38
00:02:52.439 --> 00:02:55.605
判定関数は三つの引数を受け取ります。

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

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

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

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

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

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

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

46
00:03:33.956 --> 00:03:37.097
実例として、数値の条件検索を見ます。

47
00:03:37.097 --> 00:03:45.995
五、十二、八、百三十という配列について、十より大きい最初の値の位置をファインドインデックスで調べます。

48
00:03:45.995 --> 00:03:50.007
実行すると一になり、十二がある位置が返ります。

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

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

51
00:04:00.301 --> 00:04:08.676
このようにファインドインデックスは、条件に合う最初の一個の場所だけを知りたい場面に向いています。

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

53
00:04:14.957 --> 00:04:21.936
位置が分かれば、その要素を表示で目立たせたり、編集の対象として選んだりできます。

54
00:04:21.936 --> 00:04:25.546
記事の境界例で、該当がない場合を確かめます。

55
00:04:25.546 --> 00:04:33.095
十と二十の配列で、三十と等しい要素を探すと、条件に合う要素がないため、マイナス一が返ります。

56
00:04:33.095 --> 00:04:40.479
スライドの例では、その結果がマイナス一ではないかを比べ、フォルスになることを示しています。

57
00:04:40.479 --> 00:04:42.448
実機でも同じ結果でした。

58
00:04:42.448 --> 00:04:46.879
マイナス一は、見つからなかったことを表す約束の値です。

59
00:04:46.879 --> 00:04:52.950
そのため、結果を使う前に、マイナス一かどうかを必ず確認する習慣が大切です。

60
00:04:52.950 --> 00:04:58.365
次のセクションで、この確認の書き方を間違えやすい理由を説明します。

61
00:04:58.365 --> 00:05:03.124
空の配列で探した場合も、答えは同じくマイナス一になります。

62
00:05:03.124 --> 00:05:06.021
記事が強く注意する仕様を確認します。

63
00:05:06.021 --> 00:05:08.435
ここが一番間違えやすい点です。

64
00:05:08.435 --> 00:05:13.102
位置ゼロはフォルシー、つまり条件式では偽として扱われます。

65
00:05:13.102 --> 00:05:17.447
一方、マイナス一はトゥルーシーで、真として扱われます。

66
00:05:17.447 --> 00:05:23.482
そのため、イフ文に結果をそのまま書くと、先頭で見つかった場合は見つからなかった扱いになり、

67
00:05:23.482 --> 00:05:29.517
逆に見つからなかった場合は見つかった扱いになってしまいます。

68
00:05:29.517 --> 00:05:33.862
実機でも、ゼロがフォルス扱いになることを確認しました。

69
00:05:33.862 --> 00:05:39.012
正しくは、結果がマイナス一ではないかを明示的に比べる書き方です。

70
00:05:39.012 --> 00:05:42.392
この書き方を、必ずセットで覚えてください。

71
00:05:42.392 --> 00:05:46.229
もう一つの注意点は、スプライスとの組み合わせです。

72
00:05:46.229 --> 00:05:54.055
記事でも触れられているとおり、見つからなかったときのマイナス一を、そのままスプライスに渡すと危険です。

73
00:05:54.055 --> 00:06:02.035
スプライスではマイナス一は末尾の要素を指すため、意図せず最後の要素を削除したり変更したりしてしまいます。

74
00:06:02.035 --> 00:06:07.714
スライドの例では、一、二、三の配列で末尾が消えることを実機で確認しました。

75
00:06:07.714 --> 00:06:12.548
そのため、ファインドインデックスの結果は、まずマイナス一ではないかを確認し、

76
00:06:12.548 --> 00:06:17.382
確認できた場合だけスプライスなどに渡してください。

77
00:06:17.382 --> 00:06:21.372
探す処理と使う処理の間に、確認を挟むことが大切です。

78
00:06:21.372 --> 00:06:24.386
よく似たメソッドとの違いを整理します。

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

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

81
00:06:36.282 --> 00:06:40.882
どちらも実機で確認しました。

82
00:06:40.882 --> 00:06:47.068
また、インデックスオブは値そのもので探すため、条件式を使った検索はできません。

83
00:06:47.068 --> 00:06:53.254
値で探して位置が欲しいならインデックスオブ、条件で探して位置が欲しいならファインドインデックス、

84
00:06:53.254 --> 00:06:59.440
要素そのものが欲しいならファインド、と目的で選んでください。

85
00:06:59.440 --> 00:07:00.266
まとめです。

86
00:07:00.266 --> 00:07:07.563
ファインドインデックスは、条件を満たす最初の要素の位置を返し、該当がなければマイナス一を返すメソッドです。

87
00:07:07.563 --> 00:07:08.940
ポイントは三つです。

88
00:07:08.940 --> 00:07:12.658
まず、引数には要素と位置を受け取る判定関数を渡すこと。

89
00:07:12.658 --> 00:07:19.680
次に、位置ゼロはフォルシーで、マイナス一はトゥルーシーなため、判定は必ずマイナス一との比較で書くこと。

90
00:07:19.680 --> 00:07:24.636
そして、結果をスプライスなどに渡す前に、見つかったかを確認することです。

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

92
00:07:29.868 --> 00:07:31.108
お疲れさまでした。

93
00:07:31.108 --> 00:07:36.753
位置を正しく扱えるようになれば、編集や削除の対象を安全に特定できるようになります。

94
00:07:36.753 --> 00:07:42.260
迷ったときは、基本例に戻って、位置とマイナス一の二つの結果を思い出してください。