VIDEO LESSON

TypeScriptのPromiseとasync/await：戻り値の型・並行処理・エラー処理を学ぶの解説動画

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

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

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

0:00こんにちは。
0:00今回のテーマは、タイプスクリプトのプロミスと、エイシンク、アウェイトです。
0:06通信やファイル読み込みなど、時間のかかる処理の結果を型で表し、安全に受け取る方法を学びます。
0:14プロミス・ティーは、後で成功したときにティー型の値を受け取る処理を表します。
0:20エイシンク関数はプロミスを返し、アウェイトは成功した値を受け取るか、失敗を例外として伝えます。
0:28大切なのは、ティーは成功する値の型であり、失敗する理由の型ではない、という点です。
0:34アウェイトはアプリ全体を止めるわけではなく、待っている非同期関数の続きを中断する仕組みです。
0:42順次処理、並行処理、失敗の扱いを、実行できる小さな例で一つずつ確認していきましょう。
0:49まず、記事を取得する学習用の関数を用意します。
0:53アーティクル型は、数字のアイディーと文字列のタイトルを持つ記事そのものです。
0:59一方、プロミス・アーティクルは、記事で成功する処理を表します。
1:04エイシンク関数ロードアーティクルは、アイディーが1以上の整数でなければエラーを投げ、
1:09正しければ記事を返します。
1:14エイシンク関数の中で投げた例外は、返されるプロミスの失敗になります。
1:20呼び出し側では、戻り値から直接タイトルを読まず、アウェイトで記事を受け取ってから読みます。
1:27実際に、アウェイトせずにタイトルを読もうとすると、型エラーになることを実機で確認しました。
1:35この関数は学習用で、実際の通信は行いません。
1:39通信に置き換える場合の注意は、最後の章で扱います。
1:43次に、失敗の受け取り方です。
1:45失敗する理由は、文字列などでも構わないため、必ずエラーオブジェクトとは限りません。
1:51そこで、エラーメッセージ関数は、理由をアンノウンで受け取り、インスタンスオブ・エラーで判定してからメッセージを読みます。
2:00ストリクトでは、明示的に設定を上書きしない限り、キャッチの変数もアンノウンとして扱われます。
2:07判定なしにメッセージを読もうとすると、型エラーになります。
2:12受け取った失敗を、まず種類を確認してから使う、という流れを覚えてください。
2:17文字列など、エラー以外の理由が来た場合は、不明なエラーとしてまとめて扱えます。
2:23では、メイン処理で成功と失敗を扱います。
2:26メイン関数は値を返さないため、戻り値はプロミス・ボイドと表します。
2:30トライの中で、まずアイディー1の記事をアウェイトで取得し、タイトルを表示します。
2:36続けてアイディーゼロで取得しようとすると例外が投げられ、処理はキャッチへ移ります。
2:42キャッチでは、アンノウンで受け取った理由をエラーメッセージ関数に渡し、記事アイディーは1以上の整数にしてください、
2:46と表示します。
2:51この一連の出力は、実機でコンパイルして実行し、記事の期待どおりであることを確認済みです。
2:57ここからは、複数の記事を扱う方法を比べます。
3:01最初は順次処理です。
3:02フォー・オブの中でアウェイトすると、一つの取得が完了してから、次の取得を開始します。
3:10画面の例では、記事1、記事2の順に、順次という表示が並びます。
3:15前の結果を次の処理が必要とする場合や、順番が重要な場合は、この書き方が向いています。
3:23逆に、互いに依存しない処理まで順番に待つと、その分だけ全体の時間は長くなります。
3:30依存関係があるかどうかを先に考えることが、書き方を選ぶ基準になります。
3:36例えば、前の記事の内容を使って次を決める処理では、この順序の保証が必要になります。
3:43依存しない処理は、並行処理にできます。
3:46プロミス・オールでは、渡す配列を作るときに、それぞれのロードアーティクルが呼ばれて処理が開始し、
3:51その完了をまとめて待ちます。
3:56関数名だけを配列に並べても、プロミス・オールが代わりに呼び出してくれるわけではない点に注意してください。
4:04結果の配列の順序は、完了した順ではなく、入力の順です。
4:08画面の例では、記事1と記事2が入力の順に受け取れ、並行という表示になります。
4:14開始した処理の失敗をどこで扱うかも、あらかじめ決めておきましょう。
4:19二件とも独立しているため、片方を待つ間にも、もう片方の処理を進められます。
4:24失敗が混ざる場合は、プロミス・オールセトルドを使います。
4:29これは、成功と失敗を含む全件の結果が確定するまで待ちます。
4:33各結果はステータスで区別でき、フルフィルドならバリューに成功した値が、そうでなければリーズンに失敗の理由が入ります。
4:42画面の例では、アイディー1は成功、アイディーゼロは失敗として、それぞれ表示されます。
4:49一件の失敗で全体を止めたくない場合や、成功分だけでも処理を進めたい場合に向いています。
4:55結果の使い分けを型に沿って書けるため、分岐の書き漏れにも気づきやすくなります。
5:01プロミス・オールの失敗について、誤解しやすい点を押さえます。
5:06一つが失敗すると、まとめたプロミス自体は失敗します。
5:10しかし、すでに開始した他の通信や処理が、自動でキャンセルされるわけではありません。
5:17中断したい場合は、対象のエーピーアイに対応する中断方法を、別に組み込む必要があります。
5:24また、大量のアイディーをマップして全ての通信を一度に開始すると、接続数や相手側の制限を超える場合があります。
5:33プロミス・オール自体に開始数を制限する機能はないため、必要なら同時に動く数を制限する仕組みを加えてください。
5:42失敗を早く知りたい場合と、全件の結果が必要な場合とで、使う道具が変わります。
5:48よくある間違いが、フォーイーチです。
5:51フォーイーチにエイシンクのコールバックを渡しても、外側は各コールバックの完了を待ちません。
5:57フォーイーチはアンディファインドを返すため、アウェイトを付けても解決しません。
6:02実機でも、外側の処理が先に進むことを確認しました。
6:05順次実行ならフォー・オブ、まとめて待つなら、マップでプロミスの配列を作ってプロミス・オールで待つ、
6:11というように、実際に待つプロミスを明示してください。
6:16開始した処理の失敗を扱う場所も、併せて決めておくことが大切です。
6:20失敗した処理に誰も気づかないまま終わる、という事故にもつながります。
6:24実行方法を確認します。
6:26空のフォルダで初期化し、タイプスクリプトとノードの型定義をインストールして、
6:31二つのファイルをエスアールシーに保存します。
6:36設定ファイルには、ターゲット・イーエス2022、モジュール・ノードネクスト、
6:40ストリクトを指定します。
6:44ビルドしてノードで実行すると、これまで見た出力が順に表示されます。
6:50練習として、プロミス・オールの片方のアイディーをゼロに変えると、続く処理へ進まず、
6:56最後のメインのキャッチが失敗を受け取ることも実機で確認しました。
7:02実際の通信に置き換える際は、型注釈やアズでは外部のジェイソンを検証できない点にも注意してください。
7:10まとめです。
7:11プロミス・ティーは成功した値の型を表し、失敗の理由の型ではありません。
7:16失敗はアンノウンで受け取り、種類を確認してから扱います。
7:21待つ順序は、依存する処理だけを順次にし、独立した処理は並行を検討します。
7:26その際、開始する件数や通信先の制限、失敗時に必要な結果を先に決めてください。
7:32画面の状態を扱う場合は、読み込み中、成功、失敗を別の状態として型で表すと、
7:37結果がないのに表示する間違いを見つけやすくなります。
7:42非同期の戻り値の型と、利用側の状態設計を組み合わせて確認していきましょう。
7:47まずは小さな例で、成功、失敗、並行の三つの流れを、自分で動かして確かめてみてください。
7:54お疲れさまでした。

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

この動画で学べること

TypeScriptのPromiseとasync/awaitを実践解説。順次処理、Promise.allとallSettled、unknownのエラー処理、非同期forEachの注意点を学びます。

解説記事・サンプルコードを読む：TypeScriptのPromiseとasync/await：戻り値の型・並行処理・エラー処理を学ぶ →