logo
【JavaScript】APIを呼び出す方法
JavaScript

【JavaScript】APIを呼び出す方法

作成日：2021年10月01日
更新日：2021年10月01日

JavaScript で API を呼び出して、犬の写真を表示するようにします。

まず、XMLHttpRequestを使用して、API を取得できるようにします。

js
const request = new XMLHttpRequest();
request.open("GET", "");

GET の横の『""』に、API の URL を入れていきます。

使用する API を、Public APIs（https://github.com/public-apis/public-apis）から取得します。

今回は、犬の写真を取得したいので、Animals の Dogs を選択します。

image2

Dog API のページに遷移したら、API の URL が記載されているので、URL をコピーします。

image3

コピーした URL を、request.openの『""』内に貼り付けます。

js
const request = new XMLHttpRequest();
request.open("GET", "https://dog.ceo/api/breeds/image/random");

リクエストをサーバーに送信するために、以下のコードを追加します。

js
request.send();

load イベントを使って、API のデータをフェッチします。

js
request.addEventListener("load", function () {});

JSON の中身は、this.responseTextで確認できます。

js
request.addEventListener("load", function () {
console.log(this.responseText);
});

確認してみると、

image4

API が取得できています。

では、この API を使って、犬の画像をブラウザに表示させてみます。

まず、HTML に、imgタグを設置します。

html
<img src="#" alt="" id="image" />

getElementByIdを使って、imgタグの場所を指定しておきます。

js
let img = document.getElementById("image");

API で呼び出した、this.responseTextはそのままでは使えないので、JSON.parseで使えるように変換します。

js
request.addEventListener("load", function () {
const apiData = JSON.parse(this.responseText);
});

apiDataをconsole.logで確認すると、

image5

API の URL はランダムで変わるので、先程の URL とは異なりますが、うまく機能しています。

img タグの src に API の message に記載されている URL を挿入します。

js
request.addEventListener("load", function () {
const apiData = JSON.parse(this.responseText);
img.src = apiData.message;
});

image6

API で取得した犬の画像を表示することができました。

全文は、以下の通りです。

js
let img = document.getElementById("image");
const request = new XMLHttpRequest();
request.open("GET", "https://dog.ceo/api/breeds/image/random");
request.send();
request.addEventListener("load", function () {
const apiData = JSON.parse(this.responseText);
img.src = apiData.message;
});

お知らせ

Udemy Online Cource

私事ですが、Udemyで初心者を対象にしたReactの動画コースを作成しました。

Reactについて興味がありましたら、ぜひ下のリンクからアクセスしてください。

詳しくはこちら（Udemyの外部サイトへ遷移します）

カテゴリ

最新順

© 2024あずきぱんウェブスタジオ