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

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

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の『""』内に貼り付けます。

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

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

request.send();

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

request.addEventListener("load", function () {

});

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

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

確認してみると、

image4

API が取得できています。

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

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

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

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

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

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

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

apiDataconsole.logで確認すると、

image5

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

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

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

image6

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

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

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;
});
ブログ一覧