JavaScript

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

どうも、つよぽんです!

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

今回の課題では、前々回記事で解説したfetchメソッドの知識を使って実践的なアプリをつくっていただきます。

実践的なアプリとは「クイズアプリ」になります。

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

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

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

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

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

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

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

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

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

【JavaScript】fetchを使ったAPIデータの取得方法

今回の課題のメインテーマは「クイズアプリ」を作ることです。

クイズアプリに使うクイズデータはAPI経由で外部から習得します。

つまり、自分でクイズの問題文や解答を用意せず、外部サービスから習得した問題文や解答を利用するということです。

fetchを使って外部からデータを取得する方法は以下の記事で解説しているので、詳しく知りたい方は以下の記事を参考にすると良いでしょう。

あわせて読みたい
【JavaScript】fetchを使ったAPIデータの取得方法今回はJavaScriptのfetchメソッドを使ってAPI経由でデータを取得する方法を解説します。API経由でデータを取得する方法を覚えると、自分でデータを用意しなくても、TwitterやFacebookのようなWebサービスやクイズアプリのようなゲームを作れるようになります。...

【JavaScript】DOMの新規作成・別要素に追加する方法

今回の作成するクイズアプリでは、fetchメソッドを使って取得したクイズの問題文と解答一覧をWebページに表示します。

以下の画像はこの記事の冒頭でも貼った今回作成するクイズアプリの完成形です。以下の画像を見ると、問題文と解答一覧がWebページにどのように表示されているかイメージがつきやすいかと思います。

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

取得したクイズデータをWebページに表示するには次のDOM操作を行う必要があります。

必要なDOM操作
  1. DOMの新規作成
  2. 新規作成したDOMを指定した要素に追加する
  3. 取得したデータ(文字列)を新規作成したDOMにセットする

上記3つの内、「①DOMの新規作成」「②新規作成したDOMを指定した要素に追加する」の方法に関しては、以下の記事で解説しています。

あわせて読みたい
【JavaScript】DOMの新規作成・別要素に追加する方法JavaScriptでDOMを新規作成する方法と、DOMを別のDOMに追加する方法を解説します。①DOMの新規作成にはcreateElement, ②DOMの追加にはappendChildを使います。それぞれの使い方をこの記事で説明していきます。...

【JavaScript】DOMでテキストを取得・変更する方法3選

前の章で説明した以下クイズデータをWebページに表示するのに必要な3つのDOM操作の内、

必要なDOM操作
  1. DOMの新規作成
  2. 新規作成したDOMを指定した要素に追加する
  3. 取得したデータ(文字列)を新規作成したDOMにセットする

「③取得したデータ(文字列)を新規作成したDOMにセットする」の方法は以下の記事で解説しています。

あわせて読みたい
【JavaScript】DOMでテキストを取得・変更する方法3選今回はJavaScriptのDOMを使ってでテキストを変更する3つの方法を解説します。具体的には、①innerHTML, ②innerText, ③textContentの3つとなります。それぞれ3つの違いを理解して動的にWebページ上のテキストを変更できるようになりましょう。...

【JavaScript】クリックイベントの実装【DOM操作】

今回作成するクイズアプリは4択の解答から1つ選択して答えるというものになっております。

そして1つ答えを選択したときに、クリックイベントを使って正解・不正解の処理を行います。

クリックイベントの実装方法は以下の記事で解説しています。実装方法を忘れた方は以下の記事を読むと良いでしょう。

あわせて読みたい
【JavaScript】クリックイベントの実装【DOM操作】JavaScriptでクリックイベントを実装するには「addEventListener」メソッドを利用します。「addEventListener」を使うときはイベントタイプというものを指定する必要があり、今回はクリックイベントになるので「click」を利用します。...

まとめ

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

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

今回の課題で定着させたい知識
  1. fetchを使ってAPI経由でデータを取得する方法
  2. DOM操作(fetchで取得したデータをWebページ表示とクリックイベント)

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

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

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

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

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

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

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

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

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

無料特典を受け取る

 

COMMENT

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