【エクササイズ】async/awaitを使ってクイズアプリを作る

課題
  • Fetch API(fetchメソッド)を使ってクイズデータを取得する
  • Promiseのthenメソッドを使う代わりにasync/awaitを使う
  • GitHubに用意した課題の内容を確認して、課題クリアがこの記事でのゴール

課題内容は以下の課題レポジトリに記述しています。

課題レポジトリ

GitHub : js_excercise_for_frontend_9

今回作成する課題の完成形のイメージは以下のとおりです。

今回の課題の完成形今回の課題の完成形

今回の課題は別のエクササイズ「【エクササイズ】Fetch APIを使ってクイズアプリを作る」の内容を「async/await」を使って作り直すものとなっております。

「Promiseとは何か?」「Promiseのthenメソッドの使い方がわからない」といった方は先に「【エクササイズ】Fetch APIを使ってクイズアプリを作る」から取り組んでいただけたらと思います。(async/awaitはPromiseの知識が前提となるため)

あわせて読みたい
【エクササイズ】Fetch APIを使ってクイズアプリを作るJavaScriptのFetch APIを使ってクイズアプリを作る課題を用意しました。この課題に取り組むことでAPIを使ったWebサービスを作るスキルが身につきます。これまで学習してきた「DOM操作」や「CSSの知識」も活用することになるので、今まで学習してきた内容の総復習が出来ます。...

課題解決するために参考になる資料

JavaScriptのasyncとawaitの概要【Promiseの発展系】

https://tsuyopon.xyz/learning-contents/web-dev/javascript/frontend/overview-of-async-and-await-in-js/

今回の課題の目的は「async/await」の理解度を確かめることです。

そのため「async/await」というのを全く知らない場合は、まずは上記記事で「async/await」の大枠のイメージを掴んでいただけたらと思います。

【JavaScript】asyncとawaitの使い方【サンプルコード付き】

https://tsuyopon.xyz/learning-contents/web-dev/javascript/frontend/how-to-use-async-and-await-in-js/

前の章で「async/await」のイメージを掴んだ上で、実際に「async/await」の使い方を上記記事を使って覚えていきましょう。

【JavaScript】async/awaitでの例外処理の方法

https://tsuyopon.xyz/learning-contents/web-dev/javascript/frontend/how-to-handle-exception-in-async-await/

Promiseでは例外が発生した時catchメソッドを利用します。

しかし、「async/await」を使った実装になるとcatchメソッドを使いません。

その代わりに同期処理の例外処理でも使われる「try…catch」を利用して、「async/await」を使った実装の中で発生した例外を捕捉します。

「async/await」の例外処理の実装方法については上記記事を参考にしていただけたらと思います。

質問・答え合わせ受け付けてます

課題に関して質問や答えの確認をしたい方はお気軽にご連絡をいただけたらと思います。

お問い合わせ・TwitterのDM・LINE@で受けつけています。TwitterのDM、LINE@のほうが早く気づけるので早めに返信できるかと思います。

あわせて読みたい
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!プログラミングやWebで困っていることに対して何でも質問受け付けています。「こんなこと質問しても大丈夫かな」と思っている方のために過去にどんな質問があったのか一例で挙げているので参考にしていただけたらと思います。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る