VIDEO LESSON

JavaScriptの非同期処理：Promise・async/await・fetchとエラー処理の解説動画

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

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

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

0:00こんにちは。
0:00ジャバスクリプト入門、実践連載の第五回です。
0:04今回のテーマは非同期処理です。
0:06通信やファイルの読み込みは、終わるまでに時間がかかります。
0:11その間、画面や次の処理を止めないための仕組みが非同期処理です。
0:16中心になるのは、将来の結果を表すプロミスと、それを読みやすく書くアシンクとアウェイト、
0:22そしてサーバーからデータを取るフェッチです。
0:27さらに、失敗したときの備えとして、エイチティーティーピーエラーの確認、データの検証、
0:31タイムアウトまで扱います。
0:36小さなジェイソンファイルを読み込む例で、全体の流れを確かめましょう。
0:41まず、なぜ非同期が必要なのかを考えます。
0:44ネットワーク越しにデータを取ると、返事が来るまで数百ミリ秒、ときには数秒かかります。
0:51もしその間、プログラム全体が止まってしまったら、画面は固まり、ほかの操作も受け付けません。
0:58そこでジャバスクリプトでは、時間のかかる処理を始めたら、完了したときに結果を受け取る約束だけを先にもらいます。
1:07待っている間もエンジンはほかの仕事を進められます。
1:11アウェイトで待つ、という書き方も、全体を止める命令ではありません。
1:16特定の関数の続きを、結果が届いてから再開する、という意味だと理解してください。
1:22天気や地図のように、最新の情報を外部から取る場面では、この考え方がそのまま土台になります。
1:29プロミスは、将来の成功または失敗を表すオブジェクトです。
1:34処理が終われば成功として値を渡し、途中で問題が起きれば失敗として理由を渡します。
1:40身近な例でいえば、注文の受付票のようなものです。
1:44注文した瞬間に料理は出てきませんが、番号札があるので、できあがったら受け取れます。
1:51この回では、タイマーを使った小さなプロミスを作ります。
1:55指定したミリ秒が経ったら完了する、という単純なもので、プロミスの動きを確かめる土台になります。
2:02プロミスは結果そのものではなく、結果への約束だ、という点を押さえてください。
2:09アシンクとアウェイトは、プロミスを分かりやすく書くための文法です。
2:14関数にアシンクを付けると、その関数は自動的にプロミスを返すようになります。
2:20中でアウェイトを使うと、その処理の完了を待って、結果の値を普通の変数のように受け取れます。
2:27利点は読みやすさです。
2:29成功したら次へ、といったつなぎ方を何段も重ねなくても、上から下へ順番に読めるコードになります。
2:37先ほどのタイマーをアウェイトで待ち、完了したらメッセージを作る関数を用意します。
2:43二つのメッセージを並行に作って結果を出す流れが、この回の最初の完成形です。
2:49複数の非同期処理をまとめて待つ方法が二つあります。
2:53プロミスオールは、すべて成功したら入力した順番で結果を返します。
2:57ただし、一つでも失敗すると全体が失敗として扱われます。
3:01しかも、すでに始まったほかの処理が自動で止まるわけではありません。
3:06もう一つのオールセトルドは、成功も失敗もすべて終わるまで待ち、それぞれの成否を記録して返します。
3:13一部が失敗しても、ほかの結果を確認したい場面に向いています。
3:17速さや厳しさを取りたいならオール、記録を漏らしたくないならオールセトルド、
3:20と使い分けてください。
3:23どちらを選ぶかは、失敗したときに全体を止めたいのか、それとも結果を残して後で対処したいのかで決めると分かりやすいです。
3:32次はフェッチで、サーバーからジェイソンを取得します。
3:36ここで初心者がつまずきやすい注意点があります。
3:39フェッチは、ページが見つからない四百四のようなエイチティーティーピーエラーでも、
3:44通常は失敗扱いにならず、レスポンスという応答のオブジェクトを返します。
3:50そのため、まずレスポンスのオーケーという項目を確認し、成功でなければ自分でエラーを投げます。
3:57その後に、本文をジェイソンとして読みます。
4:00通信できたことと、内容が正しいことは別問題です。
4:03順番に確認する関門を置くことが、確実な通信の第一歩になります。
4:08実際に動かすときは、ローカルに小さなサーバーを立てて、そこに置いたジェイソンファイルを読み込む形で試すと安全です。
4:16データを読み込めても、それで終わりではありません。
4:21ジェイソンとして解析できても、必要な形になっているかは別に確かめる必要があります。
4:28この例では、本の一覧を想定し、全体が配列であること、各要素のアイディーとタイトルが文字列であることを確認します。
4:37形が違えば、タイプエラーとして早めに失敗させます。
4:41そして、必要な項目だけを取り出した新しいオブジェクトを作ります。
4:47余分な項目や想定外の型を、後段の処理へ持ち込まないための工夫です。
4:52外部から来たデータは、まず疑って検証する。
4:56この習慣が、原因の分かりにくい不具合を減らします。
5:00通信がいつまでも終わらない場合に備え、中断の仕組みも用意します。
5:04アボートコントローラーは、中断を知らせる信号を作る道具です。
5:08その信号をフェッチへ渡しておくと、アボートを呼んだときに待ち受けを止められます。
5:14この例では五秒のタイマーを仕掛け、時間内に終わらなければ中断します。
5:19後始末はファイナリーで行います。
5:21成功でも失敗でも中断でも、最後にタイマーを解除します。
5:24なお、この中断は、自分の側の待機を止めるものです。
5:28サーバー側で進んだ処理そのものを取り消す保証はない、という点も覚えておいてください。
5:34エラー処理では、どんな失敗が起きたかを分けて考えることが大切です。
5:37この例で起こりうる失敗は、少なくとも四種類あります。
5:40アドレスが違って起きるエイチティーティーピーエラー、本文が壊れていて起きる解析エラー、
5:45形が違うことで起きる検証エラー、そして時間切れによる中断です。
5:49トライとキャッチで失敗をまとめて受け取りつつ、中断かどうかは信号の状態で見分け、
5:53利用者には待ち時間の上限に達した、といった分かる言葉で知らせます。
5:58失敗の種類ごとに次の行動が変わるので、一つのエラーメッセージに押し込めないことがポイントです。
6:03失敗を種類ごとにメモしておくと、練習でわざとエラーを起こしたときにも、どこで止まったのかをすぐに追いかけられます。
6:10よくある間違いも二つ押さえます。
6:12一つ目は、フォーイーチの中でアシンク関数を使い、外側で待てると思ってしまうことです。
6:18フォーイーチは、コールバックが返したプロミスをまとめて待ちません。
6:23順番に処理したいならフォーオブとアウェイト、同時に進めたいならマップでプロミスの配列を作ってオールへ渡します。
6:32二つ目は、大量の処理を一度に始めることです。
6:35オールへ渡す前に関数を呼んだ時点で処理は始まっているため、数万件を同時に動かすと接続やメモリーを圧迫します。
6:43同時に動かす数を絞る工夫は、最終回で扱います。
6:46まとめです。
6:47今回は、プロミスという約束、アシンクとアウェイトによる読みやすい書き方、
6:52フェッチでの取得、オーケーの確認とデータ検証、アボートコントローラーによる中断、
6:56そしてファイナリーでの後始末を学びました。
7:01練習として、失敗をわざと起こしてみてください。
7:04存在しないファイルを指定してエイチティーティーピーエラーを、ジェイソンを壊して解析エラーを、
7:10タイトルを数値に変えて検証エラーを、それぞれ確かめます。
7:15なおブラウザーから別のサイトへ通信するときは、コルスと呼ばれる制限にも注意が必要です。
7:21次回はクラスで、状態と処理をひとまとめにする方法を学びます。
7:26これで第五回を終わります。
7:27一つずつ試して、成功したときと失敗したときの表示の違いを比べてみてください。
7:33その違いこそが、今回の学習の成果です。

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

この動画で学べること

JavaScriptの非同期処理をPromiseとasync/awaitで学習。fetchのHTTPエラー、JSONの検証、AbortControllerによる中断、finallyの後始末を解説します。

解説記事・サンプルコードを読む：JavaScriptの非同期処理：Promise・async/await・fetchとエラー処理 →