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

こんにちは。KOUKIです。

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

<目次>

実装するもの

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

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

環境構築

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

JavaScriptでアプリ開発 ~環境構築~

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

$ tree
.
├── index.html
├── script.js
└── style.css

$ tree

├── index.html

├── script.js

└── style.css

CSS版

CSSでコンテンツボックスのスタイリングをしよう!

開発

ページの作成

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Dad Jokes</title>
  </head>
  <body>
    <div class="container">
      <h3>Don't Laugh Challenge</h3>
      <div id="joke" class="joke">// Joke goes here</div>
      <button id="jokeBtn" class="btn">Get Another Joke</button>
    </div>
    <script src="script.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Dad Jokes</title>

</head>

<body>

<h3>Don't Laugh Challenge</h3>

<button id="jokeBtn" class="btn">Get Another Joke</button>

</div>

</body>

</html>

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

スタイルの追加

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

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
  box-sizing: border-box;
}

body {
  background-color: #686de0;
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 20px;
}

.container {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);
  padding: 50px 20px;
  text-align: center;
  max-width: 100%;
  width: 800px;
}

h3 {
  margin: 0;
  opacity: 0.5;
  letter-spacing: 2px;
}

.joke {
  font-size: 30px;
  letter-spacing: 1px;
  line-height: 40px;
  margin: 50px auto;
  max-width: 600px;
}

.btn {
  background-color: #9f68e0;
  color: #fff;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);
  padding: 14px 40px;
  font-size: 16px;
  cursor: pointer;
}

.btn:active {
  transform: scale(0.98);
}

.btn:focus {
  outline: 0;
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {

box-sizing: border-box;

}

body {

background-color: #686de0;

font-family: 'Roboto', sans-serif;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

height: 100vh;

overflow: hidden;

margin: 0;

padding: 20px;

}

.container {

background-color: #fff;

border-radius: 10px;

box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);

padding: 50px 20px;

text-align: center;

max-width: 100%;

width: 800px;

}

h3 {

margin: 0;

opacity: 0.5;

letter-spacing: 2px;

}

.joke {

font-size: 30px;

letter-spacing: 1px;

line-height: 40px;

margin: 50px auto;

max-width: 600px;

}

.btn {

background-color: #9f68e0;

color: #fff;

border: 0;

border-radius: 10px;

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);

padding: 14px 40px;

font-size: 16px;

cursor: pointer;

}

.btn:active {

transform: scale(0.98);

}

.btn:focus {

outline: 0;

}

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

JavaScriptの実装

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

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

$ curl -H "Accept: application/json" https://icanhazdadjoke.com/
{
  "id": "R7UfaahVfFd",
  "joke": "My dog used to chase people on a bike a lot. It got so bad I had to take his bike away.",
  "status": 200
}

$ curl -H "Accept: application/json" https://icanhazdadjoke.com/

{

"id": "R7UfaahVfFd",

"joke": "My dog used to chase people on a bike a lot. It got so bad I had to take his bike away.",

"status": 200

}

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

要素を取得する

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

// 要素を取得
const jokeEl = document.getElementById('joke')
const jokeBtn = document.getElementById('jokeBtn')

// 要素を取得

const jokeEl = document.getElementById('joke')

const jokeBtn = document.getElementById('jokeBtn')

fetch APIでリクエスト送信

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

以下のような感じです。

// ジョークを作成
generateJoke()

function generateJoke() {
  const config = {}
  // fetchでAPIを叩く
  fetch('https://icanhazdadjoke.com', config)
}

// ジョークを作成

generateJoke()

function generateJoke() {

const config = {}

// fetchでAPIを叩く

fetch('https://icanhazdadjoke.com', config)

}

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

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

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

function generateJoke() {
  const config = {
    headers: {
      Accept: 'application/json',
    },
  }
  // fetchでAPIを叩く
}

function generateJoke() {

const config = {

headers: {

Accept: 'application/json',

}

// fetchでAPIを叩く

}

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

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

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

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

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

実装してみましょう。

function generateJoke() {
...
  // fetchでAPIを叩く
  fetch('https://icanhazdadjoke.com', config) // Promise取得
    .then((res) => res.json()) // Promseからレスポンスデータ => jsonを抜き取る
    .then((data) => console.log(data)) // データを出力
    .catch((err) => console.log(err)) // エラーの場合こちらに入る。APIのURLを適当なものにすると動作確認できる
}

function generateJoke() {

...

// fetchでAPIを叩く

fetch('https://icanhazdadjoke.com', config) // Promise取得

.then((res) => res.json()) // Promseからレスポンスデータ => jsonを抜き取る

.then((data) => console.log(data)) // データを出力

.catch((err) => console.log(err)) // エラーの場合こちらに入る。APIのURLを適当なものにすると動作確認できる

}

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

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

function generateJoke() {
  const config = {
    headers: {
      Accept: 'application/json',
    },
  }
  // fetchでAPIを叩く
  const res = fetch('https://icanhazdadjoke.com', config)
  const data = res.json()
  console.log(data)
}

function generateJoke() {

const config = {

headers: {

Accept: 'application/json',

}

// fetchでAPIを叩く

const res = fetch('https://icanhazdadjoke.com', config)

const data = res.json()

console.log(data)

}

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

// 発生したエラー
script.js:16 Uncaught TypeError: res.json is not a function

1 2	// 発生したエラー script.js:16 Uncaught TypeError: res.json is not a function

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

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

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

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

// 非同期処理であることを示すasyncを関数宣言の前につける
async function generateJoke() {
  const config = {
    headers: {
      Accept: 'application/json',
    },
  }
  // fetchでAPIを叩く
  // promiseが返却されるまで待つ
  const res = await fetch('https://icanhazdadjoke.com', config)
  // resにデータが格納されるまで待つ
  const data = await res.json()
  console.log(data)
}

// 非同期処理であることを示すasyncを関数宣言の前につける

async function generateJoke() {

const config = {

headers: {

Accept: 'application/json',

}

// fetchでAPIを叩く

// promiseが返却されるまで待つ

const res = await fetch('https://icanhazdadjoke.com', config)

// resにデータが格納されるまで待つ

const data = await res.json()

console.log(data)

}

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

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

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

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

取得データを表示する

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

// 取得データ
{
  id: "RuHYTSvzsrc", 
  joke: "My wife told me to rub the herbs on the meat for better flavor. That's sage advice.", 
  status: 200
}

// 取得データ

{

id: "RuHYTSvzsrc",

joke: "My wife told me to rub the herbs on the meat for better flavor. That's sage advice.",

status: 200

}

async function generateJoke() {
...

  // resにデータが格納されるまで待つ
  // ページ上に取得データを表示する
  jokeEl.innerHTML = data.joke
}

async function generateJoke() {

...

// resにデータが格納されるまで待つ

// ページ上に取得データを表示する

jokeEl.innerHTML = data.joke

}

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

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

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

// 要素を取得
...
// クリックイベントを登録
jokeBtn.addEventListener('click', generateJoke)

// 要素を取得

...

// クリックイベントを登録

jokeBtn.addEventListener('click', generateJoke)

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

これで完了です。

おわりに

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

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

それでは、また！

JavaScriptまとめ

JavaScript ~ 記事まとめ ~

JavaScript ソースコード

// 要素を取得
const jokeEl = document.getElementById('joke')
const jokeBtn = document.getElementById('jokeBtn')

// クリックイベントを登録
jokeBtn.addEventListener('click', generateJoke)

// ジョークを作成
generateJoke()

// 非同期処理であることを示すasyncを関数宣言の前につける
async function generateJoke() {
  const config = {
    headers: {
      Accept: 'application/json',
    },
  }
  // fetchでAPIを叩く
  // promiseが返却されるまでまつ
  const res = await fetch('https://icanhazdadjoke.com', config)
  // resにデータが格納されるまで待つ
  const data = await res.json()
  // ページ上に取得データを表示する
  jokeEl.innerHTML = data.joke
}

// 要素を取得

const jokeEl = document.getElementById('joke')

const jokeBtn = document.getElementById('jokeBtn')

// クリックイベントを登録

jokeBtn.addEventListener('click', generateJoke)

// ジョークを作成

generateJoke()

// 非同期処理であることを示すasyncを関数宣言の前につける

async function generateJoke() {

const config = {

headers: {

Accept: 'application/json',

}

// fetchでAPIを叩く

// promiseが返却されるまでまつ

const res = await fetch('https://icanhazdadjoke.com', config)

// resにデータが格納されるまで待つ

const data = await res.json()

// ページ上に取得データを表示する

jokeEl.innerHTML = data.joke

}

月	火	水	木	金	土	日
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

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

実装するもの

環境構築

CSS版

開発

ページの作成

スタイルの追加

JavaScriptの実装

要素を取得する

fetch APIでリクエスト送信

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

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

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

取得データを表示する

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

おわりに

JavaScriptまとめ

JavaScript ソースコード

シェア！

コメントを残すコメントをキャンセル

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

実装するもの

環境構築

CSS版

開発

ページの作成

スタイルの追加

JavaScriptの実装

要素を取得する

fetch APIでリクエスト送信

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

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

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

取得データを表示する

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

おわりに

JavaScriptまとめ

JavaScript ソースコード

シェア！

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

[React]~Ambassador画面1: Top画面の作成~

[Golang]~MovieApp-router1: JWTを使ってSign…

[Go言語/JavaScript]WebSocketsでチャットアプリを実装…

TypeScriptの型チェック

[golang]fiber API6~Admin:ユーザーデータの取得~

Go言語でRPCサーバーを作成しよう!

Go言語でterminalAPIを作ろう!

Webデザイン1: リセットCSS

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

コメントを残すコメントをキャンセル