VIDEO LESSON

JavaScriptのPromise.all()の使い方：引数・戻り値・実例と注意点の解説動画

再生時間 7:24動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:01今回はジャバスクリプトのプロミス・オールを紹介します。
0:05これは、複数の非同期処理を同時に走らせて、すべての成功結果を入力した順番の配列でまとめて受け取るための仕組みです。
0:15前回学んだオールセトルドが、成功も失敗もすべて集めたのに対して、オールは全部成功したときだけ結果を返し、
0:21一件でも失敗すると全体が拒否されます。
0:27この動画では、書き方と引数、オールセトルドとの違い、記事の基本例と失敗の例、
0:33結果が入力順に並ぶ理由、空の入力といった境界条件、並行取得の応用、そして引数の注意点まで、
0:38実行結果と一緒に学びます。
0:44まず動作環境を確認します。
0:46プロミス・オールは歴史の長い機能で、クロームでは三十二以降、エッジでは十二以降、
0:51ファイアーフォックスでは二十九以降、サファリでは八以降で使えます。
0:56ノード・ジェイエスではゼロ・十二・ゼロという、とても古い版から対応しています。
1:02記事の互換性情報はエムディーエヌのデータに基づく目安です。
1:06これまで学んだエニーやオールセトルドと比べると対応範囲が広く、現在使われている環境であれば、
1:11ほぼどこでもそのまま使えると考えてよいでしょう。
1:16スライドの通り、オールは関数として備わっていることを実機でも確認済みです。
1:22追加の読み込みは不要です。
1:24書き方を確認します。
1:25プロミスのあとにドットを書き、オールとカッコを続けます。
1:29引数は一つだけで、プロミスや通常の値を含む反復可能なオブジェクト、代表例は配列です。
1:36戻り値は新しいプロミスで、渡した処理がすべて成功すると、入力と同じ順番に並んだ結果の配列で履行されます。
1:43逆に一件でも拒否されると、その時点で戻り値全体が拒否されます。
1:48スライドの例では、成功した一件の値がそのまま配列の先頭に入ることを実機で確認しました。
1:54引数を一つずつ並べるのではなく、配列にまとめて渡す点と、成功が前提の仕組みである点がポイントです。
2:02前回学んだプロミス・オールセトルドとの違いを整理します。
2:07オールセトルドは、失敗があっても拒否されず、全件の成否をステータス付きで返しました。
2:14一方オールは、すべて成功したときだけ値の配列を返し、一件でも失敗すると、
2:20他の結果を待たずに全体が拒否され、成功した結果は受け取れません。
2:26スライドの通り、成功と失敗を並べると、エラーでキャッチ側に進むことを実機で確認しました。
2:34選び方の目安は、一件ごとの成否を知りたいならオールセトルド、全部そろって初めて意味があるならオールです。
2:43失敗時の動きに注目して区別してください。
2:47記事の基本例を見ます。
2:49非同期関数の中で、記事という文字列と、タグという文字列をそれぞれ成功させるプロミスを配列に並べ、
2:54オールに渡して結果を待ちます。
2:59実行結果は、記事とタグという二つの文字列が入力順に並んだ配列で、ノードの実機結果とも一致しています。
3:07二つの取得が互いに依存していないため、このようにまとめて待つことができます。
3:13記事でも、依存しないデータ取得の結果をそろえる場面が用途として紹介されています。
3:20まずはこの例をコンソールで実行し、片方の値を変えたら結果がどう変わるか予測してみてください。
3:27次に、失敗したときの動きを記事の例で確認します。
3:31成功する値と、失敗というメッセージのエラーで拒否されるプロミスを並べると、
3:36オール全体が拒否され、キャッチ側でエラーのメッセージである失敗が表示されます。
3:42実行結果は実機とも一致しています。
3:45ここで大切なのは、全体が拒否されても、すでに始まっている他の処理が自動で中断されるわけではない、
3:49という点です。
3:53オールは結果の受け取り方を決める仕組みであり、処理そのものを止める仕組みではありません。
3:59中断したい場合は、別途キャンセルの仕組みが必要になります。
4:04結果の並び順を確認します。
4:05処理が終わる順番と、結果の順番は別ものです。
4:08スライドの例では、三十ミリ秒かかる処理と十ミリ秒かかる処理を並べています。
4:14実際に終わるのは速い方からですが、結果の配列は入力した順番通り、遅い方の値が先に並ぶことを実機で確認しました。
4:21つまり、結果を取り出すときに、終わった順番を気にする必要はありません。
4:26一件目は一件目の入力、二件目は二件目の入力に対応すると決まっているため、
4:30変数への振り分けも安心して書けます。
4:34完了順に処理したい場合は、レースなど別のメソッドの出番です。
4:38境界条件として、空の配列を渡した場合を見ます。
4:42空の配列をオールに渡すと、待つべき処理が一件もないため、空の配列で即座に履行されます。
4:49エラーにはなりません。
4:51実行結果は空の配列で、ノードの実機結果とも一致しています。
4:56前回学んだオールセトルドでも空入力は空の結果でしたが、レースでは空入力が決して決着しませんでした。
5:04メソッドごとに空入力の扱いが違う点は間違えやすいポイントです。
5:09候補が空になる可能性のあるコードでは、結果が空でも後続の処理が問題ないかを確認してください。
5:17境界条件は記事でも意識が促されています。
5:21代表的な応用が、互いに依存しないデータ取得を並行して行う使い方です。
5:26たとえば、利用者情報と投稿一覧とタグ一覧のように、別々に取れるデータを一つずつ順番に待つと、
5:31待ち時間が積み重なってしまいます。
5:36オールでまとめて走らせれば、全体の待ち時間は一番遅い一件に近づきます。
5:41スライドの例では、三件の値をまとめて受け取り、カンマでつないで表示できることを実機で確認しました。
5:48ただし、前の結果を使って次の取得を行うような依存関係がある処理は、オールには向かず、
5:53順番にエーウェイトでつなぐのが正解です。
5:58注意点として、引数の渡し方を確認します。
6:01配列の中にプロミスでない通常の値を混ぜると、その値は最初から成功したものとして扱われます。
6:08スライドの通り、プレーンという文字列がそのまま結果に入ることを実機で確認しました。
6:14また、数値のような反復可能なオブジェクトでない値を渡すと、タイプエラーが発生します。
6:21さらに、一件の失敗で全体が拒否されたあとは、他の処理の成功結果を受け取れません。
6:27部分的な成功も必要な処理では、オールセトルドへの切り替えを検討してください。
6:33渡す前に入力が配列などであることの確認が大切です。
6:37まとめです。
6:38プロミス・オールは、複数の処理の成功結果を、入力順の配列でまとめて受け取るメソッドです。
6:45導入時の判断は三つです。
6:47まず、すべての処理が成功して初めて意味がある処理かどうかを確認すること。
6:53次に、処理同士に依存関係がなく、並行して走らせられること。
6:58そして、一件でも失敗したら全体を失敗として扱ってよいかを確認することです。
7:04まずは記事の基本例をコンソールで実行し、成功と失敗の組み合わせを変えて結果を予測してみてください。
7:13オールセトルドやレース、エニーとの違いを説明できるようになると、非同期処理の組み合わせで迷う場面がぐっと減ります。
7:22お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

Promise.all()で複数の非同期処理の成功結果をまとめて待つ方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

解説記事・サンプルコードを読む：JavaScriptのPromise.all()の使い方：引数・戻り値・実例と注意点 →