WEBVTT

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

2
00:00:01.065 --> 00:00:07.097
今回はジャバスクリプトの配列メソッド、ファインドラストを紹介します。

3
00:00:07.097 --> 00:00:15.792
ファインドラストは、配列を末尾から先頭へ向かって調べ、条件に合った要素を一つだけ返すメソッドです。

4
00:00:15.792 --> 00:00:23.954
たとえば処理の履歴が並んだ配列から、最後に成功した記録を取り出す、といった場面で活躍します。

5
00:00:23.954 --> 00:00:33.181
よく似たメソッドにファインドがありますが、こちらは先頭から探すため、得られる答えが変わることがあります。

6
00:00:33.181 --> 00:00:38.149
この動画では、基本の書き方、引数と戻り値、ファインドとの違い、履歴検索の実例、

7
00:00:38.149 --> 00:00:43.117
そして注意点までを順に解説します。

8
00:00:43.117 --> 00:00:47.908
最後まで見れば、後ろから探す理由がはっきり分かります。

9
00:00:47.908 --> 00:00:50.085
なぜ末尾から探すのでしょうか。

10
00:00:50.085 --> 00:00:55.309
操作履歴や処理結果は、起きた順番に配列へ追加していくことが多いからです。

11
00:00:55.309 --> 00:01:00.534
新しい記録ほど後ろに並ぶので、最新の成功や直近の操作は末尾側にあります。

12
00:01:00.534 --> 00:01:03.437
末尾の要素を直接読むだけでは不十分です。

13
00:01:03.437 --> 00:01:09.532
最後の記録が失敗だった場合、その一つ前、さらに前へとさかのぼって探す必要があります。

14
00:01:09.532 --> 00:01:14.031
ファインドラストは、このさかのぼる検索をそのまま表現できます。

15
00:01:14.031 --> 00:01:22.158
条件に合う要素が見つかれば、その時点で検索を終えるので、一致する要素をすべて集める必要がない用途に向いています。

16
00:01:22.158 --> 00:01:25.496
探す方向が意図としてコードに残る点も利点です。

17
00:01:25.496 --> 00:01:27.669
基本の書き方を見ましょう。

18
00:01:27.669 --> 00:01:33.351
配列に続けてファインドラストと書き、かっこの中に判定関数を渡します。

19
00:01:33.351 --> 00:01:41.038
判定関数は必須の引数で、要素ごとに呼び出され、条件に合うときにトゥルーを返すように書きます。

20
00:01:41.038 --> 00:01:47.723
判定関数には、現在の要素、その添字、対象の配列そのものが、この順番で渡されます。

21
00:01:47.723 --> 00:01:55.912
第二引数のディスアーグは省略でき、通常の関数で書いた場合にディスの値として使うものを指定できます。

22
00:01:55.912 --> 00:01:58.419
アロー関数では変更できません。

23
00:01:58.419 --> 00:02:01.427
戻り値は、一致した要素そのものです。

24
00:02:01.427 --> 00:02:03.766
添字でも配列でもありません。

25
00:02:03.766 --> 00:02:10.284
一致がなければアンデファインドが返り、空の配列でも同じくアンデファインドです。

26
00:02:10.284 --> 00:02:13.885
ここで大切なのは、最後という言葉の意味です。

27
00:02:13.885 --> 00:02:20.106
ファインドラストが返すのは、条件に合う要素のうち、添字が最も大きいものです。

28
00:02:20.106 --> 00:02:24.362
日時を比べて最も新しいものを選ぶ処理ではありません。

29
00:02:24.362 --> 00:02:30.583
履歴を古い順に追加しているなら、末尾側ほど新しいという前提が成り立ちますが、

30
00:02:30.583 --> 00:02:36.804
受け取ったデータの並び順が保証されない場合は、そのままでは最新を選べません。

31
00:02:36.804 --> 00:02:41.224
先頭から探すファインドとの違いは、まさにこの方向です。

32
00:02:41.224 --> 00:02:49.573
同じ配列、同じ条件でも、ファインドは前から最初の一致、ファインドラストは後ろから最初の一致を返します。

33
00:02:49.573 --> 00:02:52.192
用途に合わせて選び分けましょう。

34
00:02:52.192 --> 00:02:53.837
対応環境を確認しましょう。

35
00:02:53.837 --> 00:02:57.128
ファインドラストは、二千二十二年八月以降に主要ブラウザーで利用できるようになった、

36
00:02:57.128 --> 00:03:00.419
比較的新しい機能です。

37
00:03:00.419 --> 00:03:03.836
ノードジェイエスでは、バージョン十八で導入されました。

38
00:03:03.836 --> 00:03:08.899
ドムに依存しないため、ブラウザーでもノードジェイエスでも、同じコードが動きます。

39
00:03:08.899 --> 00:03:13.455
ただし古いブラウザーや組み込みのウェブビューでは使えないことがあります。

40
00:03:13.455 --> 00:03:19.784
利用前に、タイプオフでアレイのプロトタイプにファインドラストが関数として存在するか確かめてください。

41
00:03:19.784 --> 00:03:22.821
未対応のまま呼び出すと、タイプエラーになります。

42
00:03:22.821 --> 00:03:27.884
新しく環境を用意する場合は、サポート中のエルティーエス版を使うのがおすすめです。

43
00:03:27.884 --> 00:03:29.279
ここからは実例です。

44
00:03:29.279 --> 00:03:34.300
成功と失敗が混ざった実行履歴から、ステータスがサクセスの記録を探します。

45
00:03:34.300 --> 00:03:39.879
履歴は四件で、ジョブエーとジョブシーが成功、ジョブビーとジョブディーが失敗です。

46
00:03:39.879 --> 00:03:45.877
コードは外部通信も追加ライブラリーも使わない、コピーしてそのまま実行できる形にします。

47
00:03:45.877 --> 00:03:50.201
判定関数では、各要素のステータスがサクセスかどうかを比べます。

48
00:03:50.201 --> 00:03:52.990
検索は末尾のジョブディーから始まります。

49
00:03:52.990 --> 00:03:59.407
ジョブディーは失敗なので条件に合わず、一つ前のジョブシーで一致して、そこで検索が終わります。

50
00:03:59.407 --> 00:04:03.312
スライドのコードと一緒に、探す順番を追ってみてください。

51
00:04:03.312 --> 00:04:05.189
実行結果を確認しましょう。

52
00:04:05.189 --> 00:04:08.798
取り出されるのはジョブシーで、処理件数は八件です。

53
00:04:08.798 --> 00:04:12.841
調べた添字は三、二の順で、先頭側の二件は調べていません。

54
00:04:12.841 --> 00:04:16.450
一致した時点で終わるため、無駄な走査がありません。

55
00:04:16.450 --> 00:04:21.215
また、元の配列の並びはエー、ビー、シー、ディーのまま変わりません。

56
00:04:21.215 --> 00:04:25.690
ファインドラストは配列を反転させるような操作をしないからです。

57
00:04:25.690 --> 00:04:31.321
さらに、取り出したオブジェクトはコピーではなく、元の配列の要素と同じ参照です。

58
00:04:31.321 --> 00:04:37.529
あとからプロパティを書き換えると、元の配列から見える値も変わる点は覚えておきましょう。

59
00:04:37.529 --> 00:04:41.572
待機中の記録を探した場合は、アンデファインドが返ります。

60
00:04:41.572 --> 00:04:45.088
見つからない場合の扱いは、実務でとても重要です。

61
00:04:45.088 --> 00:04:47.872
検索結果が必ず存在するとは限りません。

62
00:04:47.872 --> 00:04:52.999
成功の記録が一つもない配列で探せば、結果はアンデファインドになります。

63
00:04:52.999 --> 00:04:58.567
そのままプロパティを読もうとすると、タイプエラーが発生して処理が止まります。

64
00:04:58.567 --> 00:05:04.866
必ず、結果がアンデファインドかどうかを先に確認してから、プロパティを参照してください。

65
00:05:04.866 --> 00:05:11.166
また判定関数の中で例外が発生した場合も、検索は中断され、例外は呼び出し元へ伝わります。

66
00:05:11.166 --> 00:05:16.147
なお、要素としてアンデファインド自体が保存されている配列では、戻り値だけでは見つからなかったのか、

67
00:05:16.147 --> 00:05:21.128
その値を見つけたのかを区別できません。

68
00:05:21.128 --> 00:05:23.912
データの設計も合わせて確認しましょう。

69
00:05:23.912 --> 00:05:27.137
次は、非同期の判定関数を渡す落とし穴です。

70
00:05:27.137 --> 00:05:32.051
判定関数をエイシンク付きで書くと、一見正しく動きそうに見えます。

71
00:05:32.051 --> 00:05:39.422
しかしエイシンク関数はプロミスを返し、プロミスのオブジェクト自体は真として評価されてしまいます。

72
00:05:39.422 --> 00:05:44.335
そのため条件の内容にかかわらず、末尾の要素が選ばれてしまいます。

73
00:05:44.335 --> 00:05:50.631
ファインドラストの結果にアウェイトを付けても、判定関数を待つ動作には変わりません。

74
00:05:50.631 --> 00:05:59.999
通信の結果で判定したい場合は、先に結果を取得して通常の値にそろえるか、末尾から回すループの中でアウェイトを使ってください。

75
00:05:59.999 --> 00:06:03.684
判定は同期処理で書く、という原則を守りましょう。

76
00:06:03.684 --> 00:06:06.158
細かな注意点を二つ押さえます。

77
00:06:06.158 --> 00:06:08.632
一つ目は、空き要素の扱いです。

78
00:06:08.632 --> 00:06:16.219
要素が抜けた疎な配列では、空き要素も判定の対象になり、値はアンデファインドとして扱われます。

79
00:06:16.219 --> 00:06:22.322
そのため、判定関数で無条件にプロパティを読むと、例外になることがあります。

80
00:06:22.322 --> 00:06:24.631
二つ目は、検索中の変更です。

81
00:06:24.631 --> 00:06:30.074
判定関数の中で配列や要素を書き換えると、結果を追いにくくなります。

82
00:06:30.074 --> 00:06:34.693
検索と更新は分けて書くのが、実務では扱いやすい設計です。

83
00:06:34.693 --> 00:06:40.466
また、条件に合う要素が先頭側にしかない場合は、結局配列全体を調べます。

84
00:06:40.466 --> 00:06:50.032
巨大な履歴を同じ条件で何度も検索するなら、記録を追加する時点で最後の該当要素も一緒に保持する方法を検討してください。

85
00:06:50.032 --> 00:06:52.153
最後に活用場面とまとめです。

86
00:06:52.153 --> 00:06:57.102
ファインドラストは、追加順が保証されたジョブ履歴から最後の成功記録を選ぶ、

87
00:06:57.102 --> 00:07:02.051
操作ログから特定の利用者が最後に行った操作を取り出す、古い順に並んだ通知から最後の未読を選ぶ、

88
00:07:02.051 --> 00:07:07.000
といった場面に向いています。

89
00:07:07.000 --> 00:07:10.334
導入するときは、三つの点を確認してください。

90
00:07:10.334 --> 00:07:12.909
後ろほど新しいという前提があるか。

91
00:07:12.909 --> 00:07:16.242
見つからなかった場合の処理を用意しているか。

92
00:07:16.242 --> 00:07:18.515
判定が同期処理になっているか。

93
00:07:18.515 --> 00:07:23.060
この三点がそろえば、履歴検索を短く読みやすくまとめられます。

94
00:07:23.060 --> 00:07:26.241
配列を壊さず、方向を明示して一件だけ取る。

95
00:07:26.241 --> 00:07:28.968
それがファインドラストの持ち味です。

96
00:07:28.968 --> 00:07:30.332
お疲れさまでした。