fetchとasync/await — ネットからデータを取る

ネットの向こうからデータを取る

アプリの多くは、天気やユーザー情報など、ネットの向こう(サーバー)からデータを取ってきて表示します。この「取りに行く」役目が fetch(フェッチ)です。fetch に住所(URL)を渡すと、そのURLへデータを取りに行ってくれます。

たとえるなら、出前を注文するようなものです。注文(fetch)したら、料理が届くまで少し待ちます。ネット越しのやり取りは一瞬では終わらないので、必ず“待ち時間”があるのがポイントです。

async / await は「待つ」印

この“待つ”を表す合図が async と await です。関数の頭に async を付けると「この中では待つことがあるよ」という宣言になり、時間のかかる処理の前に await を付けると「これが終わるまでここで待つ」という意味になります。

async function getUser() {
  const res = await fetch("https://api.example.com/user");
  const data = await res.json();
  console.log(data);
}

読み方はこうです。(1)fetch でURLへデータを取りに行き、await で届くまで待つ。(2)返ってきた返事(res)を res.json() で“JSという扱いやすい形”に変換し、これも await で待つ。(3)出来上がった data を使う。全部自分で書けなくて大丈夫。「取りに行って、待って、使う」の3拍子が読めれば十分です。

おつかれさま — JSの土台は完成

ここまでで、JSの土台がそろいました。値と変数、条件と繰り返し、関数、そしてページを操作するDOM・イベント・fetch。「全部を白紙から書ける」必要はありません。コードを読めて、何をしているか説明できて、AIと一緒に直せる。それが今のあなたです。もう立派な“読める人”です。

そして次はいよいよ React。今日書いたような「要素をつかんで、イベントで、中身を書き換える」を、もっと楽に・きれいに書くための道具です。今日の人形劇のたとえは、Reactでもそのまま効いてきます。土台はできています。安心して次の舞台へ進みましょう。ここまで本当におつかれさまでした。