fetchで本物のAPIを呼ぶ

準備は整いました。「表示された後に動かす」(チャプター1)、「待つ」(チャプター2)——今日、ついにインターネットの向こうから本物のデータを取ってきます。

APIとは「URLを叩くとデータが返ってくる窓口」

APIという言葉、聞いたことはあると思います。難しく考える必要はありません。この教材で扱うWeb APIとは、「特定のURLにアクセスすると、HTMLのページではなく、データそのものが返ってくる窓口」です。

証拠を見てもらうのが早い。ブラウザの新しいタブで、このURLを開いてみてください。

https://jsonplaceholder.typicode.com/users/1

表示されるのは、こんな文字列のはずです(整形して抜粋):

{
  "id": 1,
  "name": "Leanne Graham",
  "email": "Sincere@april.biz"
}

Webページではなく、むき出しのデータが返ってきました。この形式をJSON(ジェイソン)と呼びます。見た目に既視感がありますよね——JavaScriptのオブジェクトとほぼ同じ書き方です(厳密には「キーも必ずダブルクォートで囲む」などの決まりを持つ、言語をまたぐデータの共通語です)。今アクセスしたのはJSONPlaceholderという練習用の無料APIで、この教材でしばらくお世話になります。

天気アプリも、SNSも、裏側ではアプリがこういうURLを叩いてJSONを受け取り、画面に整形して表示しています。フロントエンドの仕事の半分は「APIからJSONをもらって、画面にする」こと——今日はその「もらう」を手に入れます。