WEBVTT

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

2
00:00:00.994 --> 00:00:05.465
今回はジャバスクリプトのプロミス・エニーを紹介します。

3
00:00:05.465 --> 00:00:13.912
これは、複数の非同期処理を同時に走らせて、その中で最初に成功した一件の結果を採用するための仕組みです。

4
00:00:13.912 --> 00:00:21.033
途中で失敗した処理があっても、すぐに全体が失敗にはならず、成功が出るまで待ち続けます。

5
00:00:21.033 --> 00:00:25.173
すべて失敗したときだけ、まとめてエラーになります。

6
00:00:25.173 --> 00:00:31.798
この動画では、書き方と引数、レースとの違い、記事の基本例と空入力の境界条件、

7
00:00:31.798 --> 00:00:38.422
すべて失敗したときの調べ方、そして間違えやすい注意点まで、実行結果と一緒に学びます。

8
00:00:38.422 --> 00:00:44.219
複数の候補から使える結果を一つ拾いたい場面で、中心になるメソッドです。

9
00:00:44.219 --> 00:00:48.028
この先の例は、すべて実行結果つきで紹介します。

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

11
00:00:49.990 --> 00:00:55.198
プロミス・エニーは比較的新しい機能で、クロームとエッジでは八十五以降、ファイアーフォックスでは七十九以降、

12
00:00:55.198 --> 00:01:00.406
サファリでは十四以降で使えます。

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

14
00:01:04.935 --> 00:01:09.312
記事の互換性情報はエムディーエヌのデータに基づく目安です。

15
00:01:09.312 --> 00:01:15.652
スライドの通り、プロミス・エニーは関数として備わっていることを実機でも確認済みです。

16
00:01:15.652 --> 00:01:20.256
追加のパッケージは不要ですが、古いブラウザーでは使えない場合があるため、

17
00:01:20.256 --> 00:01:24.860
公開するコードでは対象環境を先に確認してください。

18
00:01:24.860 --> 00:01:29.389
ブラウザーのコンソールでもノードでも、同じコードで試せます。

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

20
00:01:30.916 --> 00:01:35.193
プロミスのあとにドットを書き、エニーとカッコを続けます。

21
00:01:35.193 --> 00:01:41.762
引数は一つだけで、プロミスや通常の値を含む、反復可能なオブジェクト、代表例は配列です。

22
00:01:41.762 --> 00:01:48.635
戻り値は新しいプロミスで、渡した中の一つが最初に成功すると、その成功した値で履行されます。

23
00:01:48.635 --> 00:01:54.593
逆に、すべてが失敗すると、アグリゲートエラーという特別なエラーで拒否されます。

24
00:01:54.593 --> 00:02:01.314
スライドの例では、成功した値であるオーケーがそのまま取り出せることを実機で確認しました。

25
00:02:01.314 --> 00:02:08.493
引数を一つずつ並べるのではなく、配列にまとめて渡す点が、これまで学んだコールなどとの違いです。

26
00:02:08.493 --> 00:02:12.617
履行や拒否という言葉は、プロミスの状態を表す用語です。

27
00:02:12.617 --> 00:02:15.584
よく似たレースとの違いを整理します。

28
00:02:15.584 --> 00:02:21.682
レースは、成功でも失敗でも、最初に決着した一件の結果をそのまま採用します。

29
00:02:21.682 --> 00:02:27.121
そのため、最初に終わったのが失敗なら、レース全体も失敗になります。

30
00:02:27.121 --> 00:02:32.889
一方エニーは、失敗したものは読み飛ばして、最初の成功だけを採用します。

31
00:02:32.889 --> 00:02:40.306
スライドの通り、失敗と成功を並べた場合、エニーでは成功の値が返ることを実機で確認しました。

32
00:02:40.306 --> 00:02:47.723
選び方の目安は、失敗でも最初の結果が欲しいならレース、一つでも成功が欲しいならエニーです。

33
00:02:47.723 --> 00:02:52.832
名前と動きが似ているため、この一点に注目して区別してください。

34
00:02:52.832 --> 00:02:57.117
迷ったら、失敗を許容できるかどうかで選んでください。

35
00:02:57.117 --> 00:02:58.895
記事の基本例を見ます。

36
00:02:58.895 --> 00:03:03.744
非同期関数の中で、失敗するプロミスと、オーケーという文字列で成功するプロミスを配列に並べ、

37
00:03:03.744 --> 00:03:08.594
エニーに渡して結果を待ちます。

38
00:03:08.594 --> 00:03:13.281
実行結果はオーケーで、ノードの実機結果とも一致しています。

39
00:03:13.281 --> 00:03:21.202
配列の先頭が失敗していても、エニーはそこで諦めず、次の候補の成功を採用してくれることが分かります。

40
00:03:21.202 --> 00:03:28.314
複数のサーバーや複数の取得方法など、候補が複数ある処理で、この動きがそのまま役立ちます。

41
00:03:28.314 --> 00:03:35.588
まずはこの例をコンソールで実行し、成功する値や並び順を変えて、結果を予測してみてください。

42
00:03:35.588 --> 00:03:41.569
失敗の順番を入れ替えても結果が変わらない点も、合わせて確かめてみましょう。

43
00:03:41.569 --> 00:03:43.608
記事の境界条件の例を見ます。

44
00:03:43.608 --> 00:03:50.160
空の配列をエニーに渡すと、成功する候補が一つも存在しないため、待つまでもなく拒否されます。

45
00:03:50.160 --> 00:03:56.421
そのときに返るエラーの名前はアグリゲートエラーで、スライドの出力も実機で確認済みです。

46
00:03:56.421 --> 00:04:00.935
空入力は、すべて失敗した場合と同じ扱いになると覚えてください。

47
00:04:00.935 --> 00:04:05.958
そのため、候補の配列が空になる可能性のあるコードでは、呼び出す前に件数をチェックするか、

48
00:04:05.958 --> 00:04:10.982
エラーを受け取る処理を用意しておく必要があります。

49
00:04:10.982 --> 00:04:17.098
成功例だけでなく、こうした境界の動きを知っておくと、思わぬエラーで慌てずに済みます。

50
00:04:17.098 --> 00:04:21.029
境界条件は、記事でも独立した例として用意されています。

51
00:04:21.029 --> 00:04:24.225
すべて失敗した場合はどうなるでしょうか。

52
00:04:24.225 --> 00:04:28.380
この場合、エニーはアグリゲートエラーで拒否されます。

53
00:04:28.380 --> 00:04:32.775
このエラーにはエラーズという配列が含まれていて、候補それぞれの失敗理由が、

54
00:04:32.775 --> 00:04:37.169
渡した順番どおりに記録されています。

55
00:04:37.169 --> 00:04:42.203
スライドの通り、二件とも失敗すると、エラーの名前がアグリゲートエラーになり、

56
00:04:42.203 --> 00:04:47.237
エラーズの件数は二になることを実機で確認しました。

57
00:04:47.237 --> 00:04:53.949
失敗した理由をログに残したり、利用者に伝えたりしたいときは、このエラーズを調べます。

58
00:04:53.949 --> 00:04:59.223
一件目の理由だけでは不十分な場面で、全体像を把握できる仕組みです。

59
00:04:59.223 --> 00:05:03.857
エラーの名前だけでなく、中身まで確認するのがポイントです。

60
00:05:03.857 --> 00:05:07.304
時間差のある例で、エニーの待ち方を確かめます。

61
00:05:07.304 --> 00:05:12.324
すぐに失敗する候補と、五十ミリ秒ほどかかってから成功する候補を並べると、

62
00:05:12.324 --> 00:05:17.344
エニーは最初の失敗で終了せず、遅い成功が届くまで待ち続けます。

63
00:05:17.344 --> 00:05:21.540
結果はスロー・オーケーで、実機の出力とも一致しています。

64
00:05:21.540 --> 00:05:26.785
反対に、成功同士が競合した場合は、最も早く成功した一件が採用されます。

65
00:05:26.785 --> 00:05:32.329
つまりエニーが見ているのは、配列の並び順ではなく、成功した時刻の順番です。

66
00:05:32.329 --> 00:05:38.323
応答の速い予備サーバーへ自動で切り替えたい、といった使い方の土台になる動きです。

67
00:05:38.323 --> 00:05:42.669
並び順で結果が決まると誤解しやすいので、注意してください。

68
00:05:42.669 --> 00:05:45.602
注意点の一つ目は、キャンセルの扱いです。

69
00:05:45.602 --> 00:05:52.789
エニーで最初の成功が決まっても、残りの処理は自動ではキャンセルされず、裏側で最後まで動き続けます。

70
00:05:52.789 --> 00:06:01.149
スライドの例でも、速い成功が表示されたあとに、遅い処理の完了メッセージが続いて表示されることを実機で確認しました。

71
00:06:01.149 --> 00:06:08.483
そのため、通信やタイマーなどの処理が残り続けると、無駄な通信や意図しない更新が起きることがあります。

72
00:06:08.483 --> 00:06:16.843
不要になった処理を止めたい場合は、エニーとは別に、打ち切りの仕組みを自分で用意する必要がある点に注意してください。

73
00:06:16.843 --> 00:06:21.243
成功した時点で処理がすべて終わった、とは考えないでください。

74
00:06:21.243 --> 00:06:24.252
注意点の二つ目は、引数の渡し方です。

75
00:06:24.252 --> 00:06:31.773
配列の中にプロミスでない通常の値を混ぜると、その値は最初から成功したものとして扱われます。

76
00:06:31.773 --> 00:06:40.631
スライドの通り、失敗とプレーンという文字列を並べると、文字列がそのまま採用されることを実機で確認しました。

77
00:06:40.631 --> 00:06:47.651
また、配列のような反復可能なオブジェクトでない値を渡すと、タイプエラーが発生します。

78
00:06:47.651 --> 00:06:53.752
候補を用意する側のコードで、値がプロミスなのか通常の値なのかを混同すると、

79
00:06:53.752 --> 00:06:59.852
予想と違う結果になるため、渡す前に中身をそろえて確認する習慣が大切です。

80
00:06:59.852 --> 00:07:04.532
特に、取得関数の戻り値を受け取る場合は注意してください。

81
00:07:04.532 --> 00:07:05.444
まとめです。

82
00:07:05.444 --> 00:07:10.613
プロミス・エニーは、複数の候補の中から最初に成功した一件の結果を採用するメソッドで、

83
00:07:10.613 --> 00:07:15.781
すべて失敗したときだけアグリゲートエラーになります。

84
00:07:15.781 --> 00:07:17.605
導入時の判断は三つです。

85
00:07:17.605 --> 00:07:22.318
まず、一つでも成功すれば前に進める処理かどうかを確認すること。

86
00:07:22.318 --> 00:07:28.854
次に、すべて失敗したときにエラーズから理由を調べられるよう、エラー処理を用意すること。

87
00:07:28.854 --> 00:07:33.871
そして、成功が決まっても他の処理は止まらない点に注意することです。

88
00:07:33.871 --> 00:07:41.168
まずは記事の基本例をコンソールで実行し、候補の数や成功する値を変えて結果を予測してみてください。

89
00:07:41.168 --> 00:07:42.536
お疲れさまでした。

90
00:07:42.536 --> 00:07:45.120
次回はプロミス・レースを学びます。