JavaScript

【課題】async/awaitを使ってクイズアプリを作る【JavaScript】

どうも、つよぽんです!

今回は演習課題の紹介記事となります。

今回の課題では、これまで解説してきた「async/await」の知識を使ってクイズアプリを作っていただきます。

クイズアプリの内容としては「【課題】JavaScriptのfetchを使いクイズアプリを作る」で作成したものと同じものを作っていただきます。

しかし、Promiseのthenメソッドやcatchメソッドは使わず、そのかわりに「async/await」に置き換えて実装していただきます。

Promiseのthen・catchの使い方に自信がなく、まだPromiseを使ったクイズアプリの作成に取り組んでいない場合は先に以下の課題から取り組むことをオススメします。(async/awaitはPromiseの知識を前提にしたスキルであるため)

あわせて読みたい
【課題】JavaScriptのfetchを使いクイズアプリを作る前回の引き続きJavaScriptのfetchを使った課題を用意しました。今回の課題ではクイズアプリを作っていただきます。そのためfetchだけでなく、DOM操作の復習ンもなります。今回作成するクイズアプリはエンジニアになろうと考えている人にとってポートフォリオの1つに出来るでしょう。...

今回の課題で確認する知識は以下のとおりです。

確認する知識
  1. async/awaitの知識

今回の課題の完成形は以下の画像の通りです。(※画像をクリックすると別タブで開きます。)

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

今すぐ課題に取り組みたい方は以下の記事から課題ページにアクセスして、早速取り組んでいただけたらと思います。

あわせて読みたい
【エクササイズ】async/awaitを使ってクイズアプリを作る今回はJavaScriptの「async/await」の知識を定着させるための課題を用意しました。具体的には、前回の課題で作成した「Fetch APIを使ったクイズアプリ」を「async/await」を使って書き直していただきます。「async/await」の知識を今回の課題で確実なものにしていきましょう。...

この記事の想定読者は次のとおりです。

想定読者
  • async/awaitの学習を終えている方
  • fetchメソッドの学習を終えている方
  • DOM操作の学習を終えている方

現時点で上記の知識が身についていないとしても、今回の記事で上記内容を学習できる記事を紹介していくので問題ありません。

今回の課題をクリアするために参考になる記事は次のとおりです。忘れてしまっているものがあれば記事を読み返しふり返ってみましょう。

JavaScriptのasyncとawaitとは【概要の解説】

今回の課題の主な目的は、「async/awaitのスキルを定着してもらうこと」です。

async/awaitは、Promiseの知識を前提としています。

Promiseでは、非同期処理が終わった後に次の処理を実行したい時、データの受け渡しをしたいときはthenメソッドの引数にコールバック関数をセットして対応します。

しかし、async/awaitを使うとコールバック関数を使わずに非同期処理を実装できるようになります。

async/awaitが具体的にはどのようなものかは以下の記事で解説しているので、詳しく知りたい方は以下の記事を参考にしていただけたらと思います。

あわせて読みたい
JavaScriptのasyncとawaitとは【概要の解説】JavaScriptのPromiseを同期処理のように記述できる「async/await」の概要について解説します。Promiseをつかうことでコールバック地獄の解消が出来ますが、async/awaitをつかうことでコールバック関数自体を記述することがなくなります。...

【JavaScript】async/awaitの使い方【Promiseとの比較】

「async/await」の概要を理解したらあとは実際に手を動かして使ってみるのが手っ取り早いです。

Promiseの学習のときは、「then」「catch」「resolve」「reject」「コールバック関数の引数経由での値の受け渡し」など覚えることが多く、直感的に分かりづらい部分も多かったと思います。

しかし、Promiseの知識を既に身につけていれば「async/await」は覚えることは少ないです。

具体的にはasyncキーワードとawaitキーワードをどこに置けば良いかを覚えるだけです。

asyncとawaitの置く場所については以下の記事で解説しているので、そちらを参照していただけたらと思います。

あわせて読みたい
【JavaScript】async/awaitの使い方【Promiseとの比較】JavaScriptのasync/awaitの概要を前回記事で解説しました。今回はasync/awaitの使い方がよりイメージがつくようにPromiseでの実装と比較しながらサンプルコードを使って解説します。...

【JavaScript】async/awaitで例外をcatchする

Promiseで例外やエラーの処理をするときは「catchメソッド」をつかって実装しました。

async/awaitでは例外処理を行う場合はどうすればよいのでしょうか?

結論から言うとJavaScriptの「try-catch」構文を使えば良いです。

「JavaScriptのasyncとawaitとは【概要の解説】」の章で、「async/awaitを使うとコールバック関数を使わずに非同期処理を実装できるようになります」と説明しました。

これはつまり、「非同期処理を同期処理のように実装できる」ということです。

そのため、同期処理で例外処理を行うのに利用できる「try-catch」をasync/awaitでも同じように利用できます。

async/awaitを使った例外処理の実装は以下の記事でも解説しています。

あわせて読みたい
【JavaScript】async/awaitで例外をcatchするJavaScriptのPromiseを使って例外処理を行う場合はPromiseオブジェクトのcatchメソッドを利用しました。それではasync/awaitを使ったときに例外処理を行う方法はどうするのでしょうか?この記事を読むことでasync/await使用時の例外処理の方法を学べます。...

【課題】JavaScriptのfetchを使いクイズアプリを作る

冒頭でもお話したとおり、今回作成するクイズアプリは「【課題】JavaScriptのfetchを使いクイズアプリを作る」で作成したものと同じものを作っていただきます。

そのため今回の課題では、前回の課題で使った以下の知識は既に身についている前提となります。

async/await以外で必要な知識
  1. fetchを使ってAPI経由でデータを取得する方法
  2. DOM操作(fetchで取得したデータをWebページ表示とクリックイベント)

もし上記2つのうち1つでも自信のないものがあれば、以下の課題記事の中で紹介している記事を参考にしてみてください。

あわせて読みたい
【課題】JavaScriptのfetchを使いクイズアプリを作る前回の引き続きJavaScriptのfetchを使った課題を用意しました。今回の課題ではクイズアプリを作っていただきます。そのためfetchだけでなく、DOM操作の復習ンもなります。今回作成するクイズアプリはエンジニアになろうと考えている人にとってポートフォリオの1つに出来るでしょう。...

まとめ

あらためて、今回の課題をクリアするために必要な知識を解説した記事を以下にまとめておきます。

上にまとめた記事内容をふりかえり、今回の演習課題で取り組む知識の定着のためにも、ぜひチャレンジしましょう!^^

今回の課題で定着させたい知識
  1. async/awaitの知識

頭では理解してても実際に手を動かしてみて手が進まないところがあれば、それは理解が不十分だということを意味します。

練習問題をやっててわからないところ、質問したいところがあればお気軽に以下からご連絡いただけたらと思います^^

あわせて読みたい
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!
【絶賛受付中】プログラミング・Webの相談お気軽にどうぞ!プログラミングやWebで困っていることに対して何でも質問受け付けています。「こんなこと質問しても大丈夫かな」と思っている方のために過去にどんな質問があったのか一例で挙げているので参考にしていただけたらと思います。...

それでは、課題頑張ってください!

【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

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

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

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

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

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です