はじめに

学習するに至った経緯

2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。

【仕様】

開始ボタンを押すと、問題が始まる。
回答する度に次の問題へ移行する。
10回問題が終わると、正答数が表示される。
最初に戻るボタンを押すと、最初の画面に戻る。

【作成にあたり学習した事】

API
fetch
非同期処理
async/await

APIとは

『API』とは「アプリケーション・プログラミング・インターフェース（Application Programming Interface）」の略称。一言で表すと、ソフトウェアやプログラム、Webサービスの間をつなぐインターフェースのことを指す。具体的には、「機能を公開しているソフトウェア」と「その機能を使いたいソフトウェア」をつなげる窓口のようなもの。

API連携の仕組み

APIを通して機能を連携することは『API連携』といい、「自らのソフトウェアにほかのソフトウェアの機能を埋め込む」ということ。APIの基本的なプロセスは「リクエスト（要求）」と「レスポンス（応答）」で構成され、リクエストをするのがAPI利用者で、レスポンスをするのがAPIの提供者。リクエストとレスポンスに関するルールはAPIの提供者が定め、何のリクエストに対してどんなレスポンスを返すかということを提供者がAPIの設計段階で考え、実装し、利用可能な状態にする。API連携を行えばすでにある同様の機能をそのまま連携できるため、手間なく理想を実現させることができる。

インターフェースとは

『インターフェイス』とは、何かしらの「境界面」「接点」のことを指し、異なる２つの事物の間をつなぐという意味を持つ。例えばキーボードやマウス、ディスプレイは人間とコンピューターの境界上で使われる「ユーザーインターフェース」の1つとして知られ、USBやHDMIといった、機械と機械をつなぐコネクターは「ハードウェアインターフェース」と呼ばれる。

WebAPIとは

『WebAPI』とは「ネットワーク越しに利用できる関数でAPIにWebサービスを付与したもの」で「Webアプリケーションの情報を取得することができる仕組み」。

WebAPIの仕組み

『WebAPI』は、HTTPリクエスト情報を内部のプログラムで受取り、処理をして所定の形式で結果をレスポンスとして返す仕組み。

WebAPIを利用するメリット

複雑なシステムを構築することなく、簡単に必要な情報が取得でき、自身のWebサービスに導入できること。

WebAPIを利用するデメリット

自身のWebサービスはAPIの提供元に依存することになるため、提供が終了してしまうと、自身のWebサービスにも影響を受けることになる。

fetch

データとプログラムを繋いでくれるメソッド。リクエストやレスポンスといった HTTP のパイプラインを構成する要素を操作できるようになある。また fetch() メソッドを利用することで、非同期のネットワーク通信を簡単にわかりやすく記述できる。

非同期処理

Promise

『Promise』は非同期処理をより簡単に可読性が上がるように書けるようにしたもの。

async/await

そのPromiseを更に簡単に書けるように新しく追加されたのが『async(エーシンク)とawait(アウェイト)』で、asyncとawaitを用いることで、複雑な非同期の処理をより簡潔に効率よく記述することが出来る。Promiseを用いたときの処理を、より直感的に、より同期的に書けるという特徴がある。asyncとawaitは2つでセットみたいなものなので、awaitを使用するときは必ずasyncが必要。

1. クイズで扱うAPIのURLを定義

① 今回のクイズで扱うAPIのURLを定義する。

※ URLの先にたくさんのクイズのデータ(情報)が入っている

main.js

const API_URL = 'https://opentdb.com/api.php?amount=10&type=multiple';

② fetch()で、クイズデータとプログラムを繋ぐ。

※ 引数の部分にURLを入れる。

main.js

fetch(API_URL);

③ thenで繋ぐ

※ thenで繋げば、Promiseオブジェクトの中身が渡ってくる。

main.js

fetch(API_URL)
  .then((Response) => {
    console.log(Response)
  })

④ 渡ってきたデータをJSON形式にして返す

main.js

fetch(API_URL)
  .then((res) => {
    return res.json();
  })
  .then((data) => {
    console.log(data.results);
  })

⑤ console.logとブラウザに表示で確認

※ dataの中にはクイズのデータが入っている為、それをconsole.logとブラウザに表示で確認する。

参考サイト

[【JavaScript: クイズアプリ】fetchAPIと非同期処理を用いてクイズデータを表示する方法]
(https://ina-yona-mochiko.com/programming/javascript/quiz-fetchapi-ansynchronous/)
[APIとは何か？API連携ってどういうこと？図解で仕組みをやさしく解説]
(https://www.sbbit.jp/article/cont1/62752)
[【初心者必見】APIって何？概要や必要性について徹底解説]
(https://www.jbat.co.jp/dx_blog_1/)
[WebAPIとは～WebAPIの仕組みと具体例についてご紹介～]
(https://it-rpa.hatenablog.com/entry/WebAPI_%E4%BB%95%E7%B5%84%E3%81%BF)
[非同期処理の完了を待つ方法！Promise＆async/await【分かりすぎて怖いJavaScript入門】]
(https://www.youtube.com/watch?v=Vhnz1V-v1cU&t=919s)
[JavaScriptの非同期処理を同期させる方法【初心者向け】]
(https://www.otwo.jp/blog/asynchronous-processing/)
[Fetch の使用]
(https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch)