JavaScriptでAPIへリクエストを送るアプリを作ろう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、Random dad joke APIへリクエストを送り、取得したデータを画面上に表示する処理を実装します。

demoは、「こちら」で確認できます。

環境構築

簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

CSS版

開発

ページの作成

最初にページを作成しましょう。

このHTMLをブラウザ上で表示すると以下のようになります。

スタイルの追加

次にスタイルを記述しましょう。

ここまで実装すると以下のようになります。

JavaScriptの実装

APIの仕様に従って、JavaScriptからHTTPリクエストをAPIに送り、必要なデータを取得します。

例えば、terminal上でcurl -H "Accept: application/json" https://icanhazdadjoke.com/を実行してみると以下のデータが取得できます。

何度か実行すると取得データが変わるので、ランダムで取得しているみたいですね。

要素を取得する

JavaScriptで制御すべき要素が2つあります。最初にこれらの要素を取得しましょう。

fetch APIでリクエスト送信

JavaScriptからAPIへリクエストを送る方法は色々ありますが、今回は「fetch API」を使いましょう。

以下のような感じです。

fetchの第一引数には、APIのURLを指定しました。第二引数には、headerなどのリクエストパラメータを指定します。

リクエストパラメータの作成

fetchへ渡すリクエストパラメータを作成します。

APIの戻り値をJSON形式で取得したいので、headersにapplication/jsonを指定しました。これは、$ curl -H "Accept: application/json" https://icanhazdadjoke.com/と同義です。

リクエスト後のハンドリング

fetchのおかげでAPIへリクエストを飛ばすことができるようになりましたが、APIからのレスポンスを捌く必要があります。

fetchの仕様をみると戻り値にはPromiseオブジェクトが返却されます。このオブジェクトは、Promise.prototype.then() メソッドと Promise.prototype.catch() メソッドを持っています。

前者はリクエストが成功したときに実行され、後者は失敗した時に実行されます。

実装してみましょう。

ブラウザから取得したデータを確認できます。

thenやcatchを使わずに、以下のようにも実装することができます。

しかし、この実装の場合はエラーが発生します

async/await(非同期処理)を実装する

先ほどのエラーは、APIのレスポンスが戻ってくる前にjsonメソッドが実行されたことによって発生しています。

APIへリクエストしてからレスポンスが帰ってくるまでに、多少のタイムラグが発生するからです。

そこで、async/awaitを使ってgenerateJoke関数を非同期処理にします。

非同期処理にすることで、awaitに指定された処理が完了するまで、JavaScriptを待機させることができます。

これでエラーが消えるはずです。

async/awaitは、then/catchよりもシンプルに書くことができるので、こちらの方がよく使われています。

async/awaitの詳細については、このチュートリアルが参考になると思います。

取得データを表示する

次に取得データをページ上に表示します。

jokeElは、ジョークを表示するエリアの要素です。この要素のinnerHTMLプロパティを使えば、データを表示できます。data.jokeのjokeは、取得データのjokeです。

クリックイベントを登録する

最後に、ボタンにクリックイベントを登録しましょう。

これでボタンを押下するごとにAPIへリクエストされるようになります。

これで完了です。

おわりに

APIへリクエストを送り取得したデータを画面上に表示する処理は、現場でもよく実装します。というか大部分のアプリケーションはそうなっているのではないでしょうか。

今回学んだことは他のAPIでも応用が効くと思いますので、習得したい技術ですね^^

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

コメントを残す