VIDEO LESSON

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

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

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

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

0:00こんにちは。
0:00今回はジャバスクリプトのプロミス・エニーを紹介します。
0:05これは、複数の非同期処理を同時に走らせて、その中で最初に成功した一件の結果を採用するための仕組みです。
0:13途中で失敗した処理があっても、すぐに全体が失敗にはならず、成功が出るまで待ち続けます。
0:21すべて失敗したときだけ、まとめてエラーになります。
0:25この動画では、書き方と引数、レースとの違い、記事の基本例と空入力の境界条件、
0:31すべて失敗したときの調べ方、そして間違えやすい注意点まで、実行結果と一緒に学びます。
0:38複数の候補から使える結果を一つ拾いたい場面で、中心になるメソッドです。
0:44この先の例は、すべて実行結果つきで紹介します。
0:48まず動作環境を確認します。
0:49プロミス・エニーは比較的新しい機能で、クロームとエッジでは八十五以降、ファイアーフォックスでは七十九以降、
0:55サファリでは十四以降で使えます。
1:00ノード・ジェイエスでは十五・ゼロ・ゼロ以降で対応しています。
1:04記事の互換性情報はエムディーエヌのデータに基づく目安です。
1:09スライドの通り、プロミス・エニーは関数として備わっていることを実機でも確認済みです。
1:15追加のパッケージは不要ですが、古いブラウザーでは使えない場合があるため、
1:20公開するコードでは対象環境を先に確認してください。
1:24ブラウザーのコンソールでもノードでも、同じコードで試せます。
1:29書き方を確認します。
1:30プロミスのあとにドットを書き、エニーとカッコを続けます。
1:35引数は一つだけで、プロミスや通常の値を含む、反復可能なオブジェクト、代表例は配列です。
1:41戻り値は新しいプロミスで、渡した中の一つが最初に成功すると、その成功した値で履行されます。
1:48逆に、すべてが失敗すると、アグリゲートエラーという特別なエラーで拒否されます。
1:54スライドの例では、成功した値であるオーケーがそのまま取り出せることを実機で確認しました。
2:01引数を一つずつ並べるのではなく、配列にまとめて渡す点が、これまで学んだコールなどとの違いです。
2:08履行や拒否という言葉は、プロミスの状態を表す用語です。
2:12よく似たレースとの違いを整理します。
2:15レースは、成功でも失敗でも、最初に決着した一件の結果をそのまま採用します。
2:21そのため、最初に終わったのが失敗なら、レース全体も失敗になります。
2:27一方エニーは、失敗したものは読み飛ばして、最初の成功だけを採用します。
2:32スライドの通り、失敗と成功を並べた場合、エニーでは成功の値が返ることを実機で確認しました。
2:40選び方の目安は、失敗でも最初の結果が欲しいならレース、一つでも成功が欲しいならエニーです。
2:47名前と動きが似ているため、この一点に注目して区別してください。
2:52迷ったら、失敗を許容できるかどうかで選んでください。
2:57記事の基本例を見ます。
2:58非同期関数の中で、失敗するプロミスと、オーケーという文字列で成功するプロミスを配列に並べ、
3:03エニーに渡して結果を待ちます。
3:08実行結果はオーケーで、ノードの実機結果とも一致しています。
3:13配列の先頭が失敗していても、エニーはそこで諦めず、次の候補の成功を採用してくれることが分かります。
3:21複数のサーバーや複数の取得方法など、候補が複数ある処理で、この動きがそのまま役立ちます。
3:28まずはこの例をコンソールで実行し、成功する値や並び順を変えて、結果を予測してみてください。
3:35失敗の順番を入れ替えても結果が変わらない点も、合わせて確かめてみましょう。
3:41記事の境界条件の例を見ます。
3:43空の配列をエニーに渡すと、成功する候補が一つも存在しないため、待つまでもなく拒否されます。
3:50そのときに返るエラーの名前はアグリゲートエラーで、スライドの出力も実機で確認済みです。
3:56空入力は、すべて失敗した場合と同じ扱いになると覚えてください。
4:00そのため、候補の配列が空になる可能性のあるコードでは、呼び出す前に件数をチェックするか、
4:05エラーを受け取る処理を用意しておく必要があります。
4:10成功例だけでなく、こうした境界の動きを知っておくと、思わぬエラーで慌てずに済みます。
4:17境界条件は、記事でも独立した例として用意されています。
4:21すべて失敗した場合はどうなるでしょうか。
4:24この場合、エニーはアグリゲートエラーで拒否されます。
4:28このエラーにはエラーズという配列が含まれていて、候補それぞれの失敗理由が、
4:32渡した順番どおりに記録されています。
4:37スライドの通り、二件とも失敗すると、エラーの名前がアグリゲートエラーになり、
4:42エラーズの件数は二になることを実機で確認しました。
4:47失敗した理由をログに残したり、利用者に伝えたりしたいときは、このエラーズを調べます。
4:53一件目の理由だけでは不十分な場面で、全体像を把握できる仕組みです。
4:59エラーの名前だけでなく、中身まで確認するのがポイントです。
5:03時間差のある例で、エニーの待ち方を確かめます。
5:07すぐに失敗する候補と、五十ミリ秒ほどかかってから成功する候補を並べると、
5:12エニーは最初の失敗で終了せず、遅い成功が届くまで待ち続けます。
5:17結果はスロー・オーケーで、実機の出力とも一致しています。
5:21反対に、成功同士が競合した場合は、最も早く成功した一件が採用されます。
5:26つまりエニーが見ているのは、配列の並び順ではなく、成功した時刻の順番です。
5:32応答の速い予備サーバーへ自動で切り替えたい、といった使い方の土台になる動きです。
5:38並び順で結果が決まると誤解しやすいので、注意してください。
5:42注意点の一つ目は、キャンセルの扱いです。
5:45エニーで最初の成功が決まっても、残りの処理は自動ではキャンセルされず、裏側で最後まで動き続けます。
5:52スライドの例でも、速い成功が表示されたあとに、遅い処理の完了メッセージが続いて表示されることを実機で確認しました。
6:01そのため、通信やタイマーなどの処理が残り続けると、無駄な通信や意図しない更新が起きることがあります。
6:08不要になった処理を止めたい場合は、エニーとは別に、打ち切りの仕組みを自分で用意する必要がある点に注意してください。
6:16成功した時点で処理がすべて終わった、とは考えないでください。
6:21注意点の二つ目は、引数の渡し方です。
6:24配列の中にプロミスでない通常の値を混ぜると、その値は最初から成功したものとして扱われます。
6:31スライドの通り、失敗とプレーンという文字列を並べると、文字列がそのまま採用されることを実機で確認しました。
6:40また、配列のような反復可能なオブジェクトでない値を渡すと、タイプエラーが発生します。
6:47候補を用意する側のコードで、値がプロミスなのか通常の値なのかを混同すると、
6:53予想と違う結果になるため、渡す前に中身をそろえて確認する習慣が大切です。
6:59特に、取得関数の戻り値を受け取る場合は注意してください。
7:04まとめです。
7:05プロミス・エニーは、複数の候補の中から最初に成功した一件の結果を採用するメソッドで、
7:10すべて失敗したときだけアグリゲートエラーになります。
7:15導入時の判断は三つです。
7:17まず、一つでも成功すれば前に進める処理かどうかを確認すること。
7:22次に、すべて失敗したときにエラーズから理由を調べられるよう、エラー処理を用意すること。
7:28そして、成功が決まっても他の処理は止まらない点に注意することです。
7:33まずは記事の基本例をコンソールで実行し、候補の数や成功する値を変えて結果を予測してみてください。
7:41お疲れさまでした。
7:42次回はプロミス・レースを学びます。

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

この動画で学べること

Promise.any()で最初に成功した非同期処理の結果を採用する方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

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