SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

再生時間 8:12動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

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

  1. 0:00こんにちは。
  2. 0:01今回はジャバスクリプトのプロミス・オールセトルドを紹介します。
  3. 0:06これは、複数の非同期処理を同時に走らせて、成功したものも失敗したものも、
  4. 0:11すべての結果をまとめて受け取るための仕組みです。
  5. 0:16これまで学んだプロミス・オールでは、一件でも失敗すると全体がすぐに失敗になりました。
  6. 0:24オールセトルドは違います。
  7. 0:26途中で失敗があっても最後まで待ち、全件の成否を一覧で返します。
  8. 0:31この動画では、書き方と引数、オールとの違い、記事の基本例と結果の読み方、
  9. 0:37空の入力といった境界条件、成功と失敗を分ける応用、そして値へ触れる前の確認といった注意点まで、
  10. 0:42実行結果と一緒に学びます。
  11. 0:48一括処理の結果を漏れなく確認したい場面で役立つメソッドです。
  12. 0:53まず動作環境を確認します。
  13. 0:55プロミス・オールセトルドは、クロームでは七十六以降、エッジでは七十九以降、
  14. 1:00ファイアーフォックスでは七十一以降、サファリでは十三以降で使えます。
  15. 1:06ノード・ジェイエスでは十二・九・ゼロ以降で対応しています。
  16. 1:10記事の互換性情報はエムディーエヌのデータに基づく目安です。
  17. 1:14前回学んだレースと比べると新しい機能ですが、現在の主要ブラウザーとノードであれば、
  18. 1:19ほとんどの環境でそのまま使えます。
  19. 1:23スライドの通り、オールセトルドは関数として備わっていることを実機でも確認済みです。
  20. 1:29追加のパッケージは不要で、ブラウザーのコンソールでもノードでも同じコードで試せます。
  21. 1:35書き方を確認します。
  22. 1:37プロミスのあとにドットを書き、オールセトルドとカッコを続けます。
  23. 1:42引数は一つだけで、プロミスや通常の値を含む、反復可能なオブジェクト、代表例は配列です。
  24. 1:48戻り値は新しいプロミスで、渡したすべての処理が決着したあとに履行されます。
  25. 1:53その中身は、入力と同じ順番に並んだ結果オブジェクトの配列です。
  26. 1:58各結果には、成功か失敗かを示すステータスが必ず入ります。
  27. 2:02スライドの例では、成功した一件のステータスがフルフィルドになることを実機で確認しました。
  28. 2:09引数を一つずつ並べるのではなく、配列にまとめて渡す点がポイントです。
  29. 2:14決着という言葉は、成功でも失敗でも処理が終わることを表します。
  30. 2:18次回学ぶプロミス・オールとの違いを整理します。
  31. 2:22オールは、すべての処理が成功したときだけ結果を返し、一件でも失敗すると、
  32. 2:25その時点で全体が拒否されます。
  33. 2:29成功した他の結果は受け取れません。
  34. 2:31一方オールセトルドは、失敗があっても拒否されず、すべての処理が終わるまで待って、
  35. 2:35全件の結果を配列で返します。
  36. 2:38スライドの通り、成功と失敗を並べても、二件分の結果が返ることを実機で確認しました。
  37. 2:44選び方の目安は、全部成功が前提ならオール、一件ごとの成否を知りたいならオールセトルドです。
  38. 2:50この違いが、記事でも中心になっているポイントです。
  39. 2:53名前が似ているため、失敗時の動きに注目して区別してください。
  40. 2:57記事の基本例を見ます。
  41. 2:59非同期関数の中で、成功するオーケーという値と、エヌジーというエラーで失敗するプロミスを配列に並べ、
  42. 3:05オールセトルドに渡して結果を待ちます。
  43. 3:11そのあと、各結果からステータスだけを取り出して表示します。
  44. 3:16実行結果はフルフィルドとリジェクテッドの並びで、ノードの実機結果とも一致しています。
  45. 3:23配列の順番は入力と同じで、一件目が成功、二件目が失敗だと一目で分かります。
  46. 3:29失敗が混ざっても例外にならず、結果として受け取れることが、このメソッドの特徴です。
  47. 3:36まずはこの例をコンソールで実行し、成功と失敗の並びを入れ替えたら結果がどう変わるか予測してみてください。
  48. 3:45結果オブジェクトの中身の読み方を確認します。
  49. 3:48成功した結果にはバリューという項目に値が入ります。
  50. 3:51失敗した結果にはリーズンという項目に、失敗の理由であるエラーが入ります。
  51. 3:56スライドの例では、一件目のバリューがオーケー、二件目のリーズンのメッセージがエヌジーになることを実機で確認しました。
  52. 4:05大切なのは、バリューへ触れる前に、ステータスがフルフィルドかどうかを必ず確認することです。
  53. 4:11失敗した結果にバリューはありませんし、成功した結果にリーズンはありません。
  54. 4:16ステータスで分岐してから中身を読む、という順番を習慣にしてください。
  55. 4:21記事でもこの確認手順が強調されています。
  56. 4:24境界条件として、空の配列を渡した場合を見ます。
  57. 4:27空の配列をオールセトルドに渡すと、待つべき処理が一件もないため、空の配列で即座に履行されます。
  58. 4:35エラーにはなりません。
  59. 4:36実行結果は空の配列で、ノードの実機結果とも一致しています。
  60. 4:41前回のレースでは、空の入力が決して決着しなかったのとは対照的です。
  61. 4:46エニーでは空入力がすぐにエラーになりました。
  62. 4:49三つのメソッドで空入力の扱いがすべて違う点は、間違えやすいポイントです。
  63. 4:55候補が空になる可能性のあるコードでは、この動きを前提に、結果が空でも問題ないかを確認してください。
  64. 5:02境界条件は記事でも独立した例で紹介されています。
  65. 5:06代表的な応用が、一括処理で成功分と失敗分を分けて表示する使い方です。
  66. 5:12たとえば複数のファイルの読み込みや、複数の宛先への送信をまとめて実行したあと、
  67. 5:17成功した件数と、失敗した理由を画面に表示できます。
  68. 5:23スライドの例では、三件中二件が成功し、その件数を数えることを実機で確認しました。
  69. 5:29途中で一件失敗しても、残りの結果が失われないため、やり直しが必要なものだけを選び直せます。
  70. 5:37記事でも、一括処理で成功分と失敗分を分けて表示できることが用途として紹介されています。
  71. 5:44すべて成功しないと意味がない処理には向きませんが、部分的な失敗を許容できる処理では、
  72. 5:49とても扱いやすい形です。
  73. 5:53注意点の一つ目は、ステータス確認の省略です。
  74. 5:57失敗した結果にはバリューが存在しないため、確認せずに読むとアンディファインドが返り、
  75. 6:01その後の処理で思わぬ不具合につながります。
  76. 6:05スライドの通り、失敗した一件のステータスはリジェクテッドで、バリューはアンディファインドになることを実機で確認しました。
  77. 6:14逆に、成功した結果のリーズンもアンディファインドです。
  78. 6:18結果を扱うコードでは、まずステータスを見て、成功ならバリュー、失敗ならリーズンを読む、
  79. 6:22という分岐を必ず書いてください。
  80. 6:26型の絞り込みができる環境では、この分岐が安全性の確認にもなります。
  81. 6:31注意点の二つ目は、引数の渡し方です。
  82. 6:33配列の中にプロミスでない通常の値を混ぜると、その値は最初から成功したものとして扱われます。
  83. 6:41スライドの通り、プレーンという文字列がそのままバリューになることを実機で確認しました。
  84. 6:48また、数値のような反復可能なオブジェクトでない値を渡すと、タイプエラーが発生します。
  85. 6:55さらに記事では、入力の反復処理そのものが例外を投げる場合まで、必ず成功に変えるわけではないと案内されています。
  86. 7:04個々の処理の失敗は結果に格納されますが、呼び出し側の異常は別だということです。
  87. 7:10渡す前に入力が配列などであることを確認する習慣が大切です。
  88. 7:15まとめです。
  89. 7:16プロミス・オールセトルドは、複数の候補のすべての結果を、成功でも失敗でも入力順に集めるメソッドです。
  90. 7:25導入時の判断は三つです。
  91. 7:27まず、一件の失敗で全体を止めず、全件の成否を知りたい処理かどうかを確認すること。
  92. 7:34次に、結果を読むときはステータスを確認してから、バリューかリーズンを取り出すこと。
  93. 7:41そして、空の入力では空の配列が返る点と、反復できない値を渡すとエラーになる点を押さえることです。
  94. 7:50まずは記事の基本例をコンソールで実行し、成功と失敗の組み合わせを変えて結果を予測してみてください。
  95. 7:58オールやエニー、レースとの違いを説明できるようになると、プロミスの組み合わせで迷う場面がぐっと減ります。
  96. 8:07お疲れさまでした。
  97. 8:09次回はプロミス・オールを学びます。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

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

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