await fetch を使ったAPI実行の構文
JavaScriptでAPIを実行する書き方はいろいろあり、使うAPIによっても異なるのですが、
簡単なものなら下記の構文で実行することができます。
response = await fetch('ここにAPIのURLを書く');
result = await response.json();
fetch(URL) でリクエストを送り、レスポンスをjson形式に変換しています。
これらの処理に await を付けているのは、レスポンスの受け取りや読み取りがちゃんとできてから後続処理に進んでほしいからです。
htmlファイル
さきほどの構文を使って
APIを叩いて結果をコンソールログに出す、それだけのウェブページ
を作ってみました。
下記のコードを記述したhtmlファイルを作って開き、デベロッパーツールを見れば、コンソールログに結果が出ます。
<html>
<head>
<title>API実験ページ</title>
</head>
<body>
デベロッパーツールのコンソールで結果を確認してください。
<script>
async function fetchData() {
response = await fetch('ここにURLを書く');
result = await response.json();
console.log(result);
}
fetchData();
</script>
</body>
</html>
一連の処理を行う fetchData 関数を呼ぶだけの超シンプルなページです。
ちなみに await が使えるのは async が付いている関数の中だけ、というルールがあるので fetchData 関数には async を付けています（これを付けないとコンパイルエラーになります）。
いろいろなAPIで試してみる
さっそく 'ここにURLを書く' のところにURLを当てはめて試してみましょう。
サクッと使える例を4つほど紹介します。
◇国情報の取得
REST Countries API というAPIを使うと国情報を取得できます。
例えばポルトガルの情報を得るURLは以下のようになります。
https://restcountries.com/v3.1/name/portugal
◇ポケモン情報の取得
PokeAPI でポケモン情報を取得できます。
例えばゼニガメの情報を得るURLは以下のようになります。ゼニガメの英語名は squirtle です。
https://pokeapi.co/api/v2/pokemon/squirtle
◇ネコ知識の取得
Cat Facts API はネコに関するトリビアをランダムに取得できるAPIです。
URLは以下のようになります。
https://catfact.ninja/fact
◇天気の取得
気象庁API で天気情報を取得できます。
例えば鹿児島県の天気情報を得るURLは以下のようになります。
https://www.jma.go.jp/bosai/forecast/data/overview_forecast/460100.json
ネコはともかく、色々な国・ポケモン・天気を試してみると面白いかも？
以上です。