WEBVTT

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

2
00:00:01.036 --> 00:00:05.699
今回はジャバスクリプトのプロミス・オールを紹介します。

3
00:00:05.699 --> 00:00:15.542
これは、複数の非同期処理を同時に走らせて、すべての成功結果を入力した順番の配列でまとめて受け取るための仕組みです。

4
00:00:15.542 --> 00:00:21.672
前回学んだオールセトルドが、成功も失敗もすべて集めたのに対して、オールは全部成功したときだけ結果を返し、

5
00:00:21.672 --> 00:00:27.802
一件でも失敗すると全体が拒否されます。

6
00:00:27.802 --> 00:00:33.328
この動画では、書き方と引数、オールセトルドとの違い、記事の基本例と失敗の例、

7
00:00:33.328 --> 00:00:38.854
結果が入力順に並ぶ理由、空の入力といった境界条件、並行取得の応用、そして引数の注意点まで、

8
00:00:38.854 --> 00:00:44.380
実行結果と一緒に学びます。

9
00:00:44.380 --> 00:00:46.264
まず動作環境を確認します。

10
00:00:46.264 --> 00:00:51.552
プロミス・オールは歴史の長い機能で、クロームでは三十二以降、エッジでは十二以降、

11
00:00:51.552 --> 00:00:56.841
ファイアーフォックスでは二十九以降、サファリでは八以降で使えます。

12
00:00:56.841 --> 00:01:02.491
ノード・ジェイエスではゼロ・十二・ゼロという、とても古い版から対応しています。

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

14
00:01:06.693 --> 00:01:11.764
これまで学んだエニーやオールセトルドと比べると対応範囲が広く、現在使われている環境であれば、

15
00:01:11.764 --> 00:01:16.835
ほぼどこでもそのまま使えると考えてよいでしょう。

16
00:01:16.835 --> 00:01:22.196
スライドの通り、オールは関数として備わっていることを実機でも確認済みです。

17
00:01:22.196 --> 00:01:24.080
追加の読み込みは不要です。

18
00:01:24.080 --> 00:01:25.579
書き方を確認します。

19
00:01:25.579 --> 00:01:29.774
プロミスのあとにドットを書き、オールとカッコを続けます。

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

21
00:01:36.068 --> 00:01:43.860
戻り値は新しいプロミスで、渡した処理がすべて成功すると、入力と同じ順番に並んだ結果の配列で履行されます。

22
00:01:43.860 --> 00:01:48.506
逆に一件でも拒否されると、その時点で戻り値全体が拒否されます。

23
00:01:48.506 --> 00:01:54.949
スライドの例では、成功した一件の値がそのまま配列の先頭に入ることを実機で確認しました。

24
00:01:54.949 --> 00:02:02.292
引数を一つずつ並べるのではなく、配列にまとめて渡す点と、成功が前提の仕組みである点がポイントです。

25
00:02:02.292 --> 00:02:07.258
前回学んだプロミス・オールセトルドとの違いを整理します。

26
00:02:07.258 --> 00:02:14.708
オールセトルドは、失敗があっても拒否されず、全件の成否をステータス付きで返しました。

27
00:02:14.708 --> 00:02:20.738
一方オールは、すべて成功したときだけ値の配列を返し、一件でも失敗すると、

28
00:02:20.738 --> 00:02:26.769
他の結果を待たずに全体が拒否され、成功した結果は受け取れません。

29
00:02:26.769 --> 00:02:34.573
スライドの通り、成功と失敗を並べると、エラーでキャッチ側に進むことを実機で確認しました。

30
00:02:34.573 --> 00:02:43.797
選び方の目安は、一件ごとの成否を知りたいならオールセトルド、全部そろって初めて意味があるならオールです。

31
00:02:43.797 --> 00:02:47.344
失敗時の動きに注目して区別してください。

32
00:02:47.344 --> 00:02:49.132
記事の基本例を見ます。

33
00:02:49.132 --> 00:02:54.250
非同期関数の中で、記事という文字列と、タグという文字列をそれぞれ成功させるプロミスを配列に並べ、

34
00:02:54.250 --> 00:02:59.369
オールに渡して結果を待ちます。

35
00:02:59.369 --> 00:03:07.494
実行結果は、記事とタグという二つの文字列が入力順に並んだ配列で、ノードの実機結果とも一致しています。

36
00:03:07.494 --> 00:03:13.669
二つの取得が互いに依存していないため、このようにまとめて待つことができます。

37
00:03:13.669 --> 00:03:20.169
記事でも、依存しないデータ取得の結果をそろえる場面が用途として紹介されています。

38
00:03:20.169 --> 00:03:27.644
まずはこの例をコンソールで実行し、片方の値を変えたら結果がどう変わるか予測してみてください。

39
00:03:27.644 --> 00:03:31.211
次に、失敗したときの動きを記事の例で確認します。

40
00:03:31.211 --> 00:03:36.858
成功する値と、失敗というメッセージのエラーで拒否されるプロミスを並べると、

41
00:03:36.858 --> 00:03:42.506
オール全体が拒否され、キャッチ側でエラーのメッセージである失敗が表示されます。

42
00:03:42.506 --> 00:03:45.033
実行結果は実機とも一致しています。

43
00:03:45.033 --> 00:03:49.120
ここで大切なのは、全体が拒否されても、すでに始まっている他の処理が自動で中断されるわけではない、

44
00:03:49.120 --> 00:03:53.207
という点です。

45
00:03:53.207 --> 00:03:59.746
オールは結果の受け取り方を決める仕組みであり、処理そのものを止める仕組みではありません。

46
00:03:59.746 --> 00:04:04.056
中断したい場合は、別途キャンセルの仕組みが必要になります。

47
00:04:04.056 --> 00:04:05.872
結果の並び順を確認します。

48
00:04:05.872 --> 00:04:08.946
処理が終わる順番と、結果の順番は別ものです。

49
00:04:08.946 --> 00:04:14.116
スライドの例では、三十ミリ秒かかる処理と十ミリ秒かかる処理を並べています。

50
00:04:14.116 --> 00:04:21.801
実際に終わるのは速い方からですが、結果の配列は入力した順番通り、遅い方の値が先に並ぶことを実機で確認しました。

51
00:04:21.801 --> 00:04:26.691
つまり、結果を取り出すときに、終わった順番を気にする必要はありません。

52
00:04:26.691 --> 00:04:30.464
一件目は一件目の入力、二件目は二件目の入力に対応すると決まっているため、

53
00:04:30.464 --> 00:04:34.236
変数への振り分けも安心して書けます。

54
00:04:34.236 --> 00:04:38.428
完了順に処理したい場合は、レースなど別のメソッドの出番です。

55
00:04:38.428 --> 00:04:42.332
境界条件として、空の配列を渡した場合を見ます。

56
00:04:42.332 --> 00:04:49.630
空の配列をオールに渡すと、待つべき処理が一件もないため、空の配列で即座に履行されます。

57
00:04:49.630 --> 00:04:51.497
エラーにはなりません。

58
00:04:51.497 --> 00:04:56.419
実行結果は空の配列で、ノードの実機結果とも一致しています。

59
00:04:56.419 --> 00:05:04.736
前回学んだオールセトルドでも空入力は空の結果でしたが、レースでは空入力が決して決着しませんでした。

60
00:05:04.736 --> 00:05:09.998
メソッドごとに空入力の扱いが違う点は間違えやすいポイントです。

61
00:05:09.998 --> 00:05:17.805
候補が空になる可能性のあるコードでは、結果が空でも後続の処理が問題ないかを確認してください。

62
00:05:17.805 --> 00:05:21.200
境界条件は記事でも意識が促されています。

63
00:05:21.200 --> 00:05:26.419
代表的な応用が、互いに依存しないデータ取得を並行して行う使い方です。

64
00:05:26.419 --> 00:05:31.254
たとえば、利用者情報と投稿一覧とタグ一覧のように、別々に取れるデータを一つずつ順番に待つと、

65
00:05:31.254 --> 00:05:36.089
待ち時間が積み重なってしまいます。

66
00:05:36.089 --> 00:05:41.462
オールでまとめて走らせれば、全体の待ち時間は一番遅い一件に近づきます。

67
00:05:41.462 --> 00:05:48.983
スライドの例では、三件の値をまとめて受け取り、カンマでつないで表示できることを実機で確認しました。

68
00:05:48.983 --> 00:05:53.742
ただし、前の結果を使って次の取得を行うような依存関係がある処理は、オールには向かず、

69
00:05:53.742 --> 00:05:58.500
順番にエーウェイトでつなぐのが正解です。

70
00:05:58.500 --> 00:06:01.591
注意点として、引数の渡し方を確認します。

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

72
00:06:08.545 --> 00:06:14.881
スライドの通り、プレーンという文字列がそのまま結果に入ることを実機で確認しました。

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

74
00:06:21.371 --> 00:06:27.552
さらに、一件の失敗で全体が拒否されたあとは、他の処理の成功結果を受け取れません。

75
00:06:27.552 --> 00:06:33.425
部分的な成功も必要な処理では、オールセトルドへの切り替えを検討してください。

76
00:06:33.425 --> 00:06:37.288
渡す前に入力が配列などであることの確認が大切です。

77
00:06:37.288 --> 00:06:38.297
まとめです。

78
00:06:38.297 --> 00:06:45.693
プロミス・オールは、複数の処理の成功結果を、入力順の配列でまとめて受け取るメソッドです。

79
00:06:45.693 --> 00:06:47.710
導入時の判断は三つです。

80
00:06:47.710 --> 00:06:53.762
まず、すべての処理が成功して初めて意味がある処理かどうかを確認すること。

81
00:06:53.762 --> 00:06:58.637
次に、処理同士に依存関係がなく、並行して走らせられること。

82
00:06:58.637 --> 00:07:04.856
そして、一件でも失敗したら全体を失敗として扱ってよいかを確認することです。

83
00:07:04.856 --> 00:07:13.093
まずは記事の基本例をコンソールで実行し、成功と失敗の組み合わせを変えて結果を予測してみてください。

84
00:07:13.093 --> 00:07:22.675
オールセトルドやレース、エニーとの違いを説明できるようになると、非同期処理の組み合わせで迷う場面がぐっと減ります。

85
00:07:22.675 --> 00:07:24.188
お疲れさまでした。