APIの受付へ頼み事を送ることになった。

KAZU「頼んだ。じゃあ結果を出して。」

API「まだ届いていません。」

KAZU「今、頼んだじゃん。」

API「返事が届くまで時間がかかります。」

人間同士なら当たり前のことだが、画面の中では忘れやすい。通信には時間がかかる。頼んだ瞬間に、答えが手元にあるとは限らない。

そこで今日は、JavaScriptからAPIへ問い合わせる流れを見てみる。

以下は、同じサイトに /api/example という窓口が用意され、JSONを返す前提の例だ。窓口そのものを作るコードではない。

async function loadExample() {
  const response = await fetch("/api/example");

  if (!response.ok) {
    throw new Error(
      `取得に失敗しました: ${response.status}`
    );
  }

  const data = await response.json();
  console.log(data);
}

fetch() は、指定した場所へ通信するための関数だ。

await は、その処理の結果が得られるまで、この関数内の続きを待つために使う。その間ずっとブラウザ全体が止まる、という意味ではない。

async は、こうした非同期処理を扱う関数につける。

KAZU「専門用語が三人まとめて来たな。」

API「今日は『頼む、待つ、受け取る』が分かれば先へ進めます。」

response は、相手から返ってきた応答だ。そこには本文のほか、処理の結果を示すステータスなどがある。

ここで注意したい。404などのHTTPエラーが返っても、fetch() はそれだけで失敗として例外を投げるわけではない。そのため、response.ok で成功した応答かを確認している。

続いて response.json() で、本文をJSONとして読み取り、JavaScriptで扱える値にする。

たとえば、返事の本文が次のようなJSONだったとしよう。

{"city": "甲府", "temperature": 25}

これは形式を説明するための架空の値で、現在の天気ではない。読み取った後は、data.city で都市名、data.temperature で気温の値を取り出せる。

なお、関数は定義しただけでは実行されない。呼び出して、失敗した場合も受け止める。

loadExample().catch(error => {
  console.error(error);
});

console.log() の出力先は開発者向けのコンソールだ。ページ本文へ表示するには、別途その処理を書く。

KAZU「窓口も必要。呼び出しも必要。画面表示も別。短いコードの裏に仕事があるね。」

API「一つずつ役割を分けると、困った場所も探しやすくなります。」

【ミニテスト】

fetch("/api/example") と書くだけで、そのAPI窓口自体も作られる？

A．作られる
B．作られない

答え：B。これは既にある窓口へ問い合わせる処理。

【小さな実習】

コードを「送信」「成功確認」「本文の読み取り」「出力」に分けて読んでみよう。全部を暗記するより、それぞれが何を担当しているかをつかもう。