APIっていうのがあるやん。なんなんあれ。どうやって使えばいいんや。
①フェッチというやり方でリクエスト？をAPIに送る
②リクエストに応じてレスポンスが返ってくる
③レスポンスの内容をなんか解析する
④解析できたものから情報を取り出す
⑤取り出した情報をHTMLに埋め込む
っていう動作をすれば
どこに画像のurlがあるのか、とか気にせずに情報を取ってくることができるらしいわ！
試しにDog APIを用いて練習してみようやないか。
次のコードでは毎回違う犬の画像がランダムで表示されるんや。
<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset="utf-8">
<title>dog</title>
</head>
<body>
<h1>ランダムに犬の画像が表示されます</h1>
<div id="randomDog"></div>
<script src="script.js"></script>
</body>
</html>
async function displayRandomDog(){
const url = "https://dog.ceo/api/breeds/image/random";
const response = await fetch(url)
data = await response.json();
const object = document.getElementById("randomDog");
object.innerHTML = `<img src="${data.message}">`;
}
displayRandomDog();
JavaScriptについて
async function displayRandomDog(){}
ここで displayRandomDog いう関数を自分で定義しとるんや。自分で定義するんやから名前は何でもええで。
この関数は async っていう非同期処理を使うためのキーワードが付いとるから、関数の中で await が使えるんや。
非同期処理っちゅうのは、何か時間がかかる処理が終わるのを待つんやけど、待ってる間も他の作業ができるっちゅう便利な機能やな。
const url = "https://dog.ceo/api/breeds/image/random";
url っちゅう変数に、犬のランダムな画像を返してくれるAPIのURLを入れとるんや。このURLにアクセスすると、ランダムな犬の画像がもらえるんや。
const response = await fetch(url)
fetch っていう関数を使うて、さっきの url にリクエストを送っとるんや。このとき await を使うて、リクエストの結果が返ってくるまで待つっちゅうことや。これで response には、リクエストの結果が入るんやで。
data = await response.json();
response に入ってる結果をJSON形式で解析して、data っちゅう変数に入れとるんや。この data の中には、APIから返ってきたデータが入っとるんや。
const object = document.getElementById("randomDog");
object っていう変数に、HTMLの中にある id が "randomDog" の要素を取ってきとるんや。この要素に犬の画像を表示させるんやで。
object.innerHTML = `<img src="${data.message}">`;
ここで、さっき取得した data.message に入っとる犬の画像のURLを使うて、<img> タグを作成し、その中に画像を表示させとるんや。innerHTML を使うて、要素の中身を直接書き換えとるんやで。
`で囲った中には変数を${}で囲むようにして入れ込むことができるんや。
dataっていう変数の中のデータはJSONやから次のようになっとる。一例やで。messageのurlはランダムに与えられるんや。
{
"message": "https://images.dog.ceo/breeds/hound-walker/n02089867_3044.jpg",
"status": "success"
}
jsonの変数の中のデータにアクセスるにはドットを使えばできる。
例えば上のデータやったら
data.messageには"https://images.dog.ceo/breeds/hound-walker/n02089867_3044.jpg"
data.statusには"success"が入ってるんや。
displayRandomDog();
最後に、関数 displayRandomDog を呼び出して実行しとるんや。この一行で、犬の画像がランダムに表示されるっちゅうわけやな。
こんな感じやで！このコードを使うたら、可愛いやろ？