Day 4・非同期とfetchでAPIを叩く

fetchでAPIを呼ぶ、.json()の結果に型をつける

fetchでAPIを呼び、返ってきたJSONに型をつけて安全に扱う。

fetchでデータを取りに行く

は、指定したURLにデータを取りに行くための、ブラウザやNode.jsに最初から用意されている関数です。fetchはPromiseを返すので、await で結果を待ちます。返ってきたものは Response という「返事全体」を表すオブジェクトで、そこから .json() を呼ぶと本文をJavaScriptの値に変換できます。

TYPESCRIPT

async function loadData(): Promise<void> {
  // await で返事を待つ
  const res = await fetch("https://api.example.com/user");
  // .json() も Promise を返すので await する
  const data = await res.json();
  console.log(data);
}

fetch と .json() は両方 await が必要

.json() の戻り値は any になる

res.json() の型は any です。any は「型チェックをしない」という意味で、どんな使い方をしてもエラーになりません。便利に見えて危険で、存在しないプロパティを触ってもその場では気づけません。ここに型をつけるのがこのレッスンの本題です。

返ってくるデータの形を型で宣言する

APIがどんな形のデータを返すかを、あらかじめ (インターフェース)や型で書いておきます。そして .json() の結果を「この型ですよ」と指定することで、以降のコードで安全に扱えます。

TYPESCRIPT

// APIが返すユーザーの形をあらかじめ宣言
interface User {
  id: number;
  name: string;
  email: string;
}

async function loadUser(): Promise<User> {
  const res = await fetch("https://api.example.com/user");
  // 「この JSON は User の形」と型を指定する
  const user = (await res.json()) as User;
  return user;
}

as User で any に型の意味を与える

型なし(any)

TYPESCRIPT

const user = await res.json();
// namee とタイプミスしてもエラーなし
console.log(user.namee); // undefined になり気づけない

型あり

TYPESCRIPT

const user = (await res.json()) as User;
// namee はエディタが赤線で指摘
console.log(user.namee); // コンパイルエラーで即気づける

なぜ型をつけると安心なのか

AIに「fetchでユーザーを取ってきて」と頼むと動くコードは書けますが、プロパティ名のズレや形の勘違いは残りがちです。返り値に型をつけておけば、AIが user.name のつもりで user.userName と書くようなズレを、実行前にエディタが指摘してくれます。

AIにはこう聞く

「このAPIのレスポンス例(サンプルJSON)から TypeScript の interface を作って」と頼むと、型の下書きを一気に用意できます。ただし as で型を名乗らせても実際のデータがその形とは限らないので、キー名はAPIの仕様やサンプルと突き合わせて確認しましょう。

fetch(url) でリクエストを送り、await で Response を受け取る
res.json() を await して本文を取り出す(戻り値は any)
返るデータの形を interface で宣言する
as で .json() の結果に型を与えて安全に使う

読んでも腑に落ちない所は、AIに噛み砕いてもらいましょう。

理解度チェック

答えられれば、面接で説明できる状態に一歩近づきます。

res.json() の戻り値の型は初期状態で何になっていますか？

fetchの結果を安全に扱うための手順として最も適切なものは？

fetchで取得したJSONに型をつけると何が嬉しいか、説明してください。

記述式です。まず自分の言葉で答えを考えてから、模範解答を開いて自己採点してください。