0Pricing
TypeScript Academy · レッスン

Fetch APIの型、Response.json()のジェネリクス

正しい型でFetch APIを使い、Response.json ()のジェネリクスでJSONペイロードを安全に解析します

「Fetch APIの型、Response.json()のジェネリクス」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン1/2です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全2レッスンが含まれています。

導入

目標：fetch で API を呼び出し、レスポンスを安全に処理し、Response.json() でジェネリクスを使用します。

基本的な fetch

fetch は Promise<Response> を返します。プレーンテキストの本文には res.text() を使用します。

async function getText() {
  const res = await fetch("/hello.txt");
  const text = await res.text();
  console.log(text);
}

res.json() のデフォルト

res.json() は本文を解析しますが、デフォルトの戻り値の型は any です。コンパイル時の安全性はありません。

async function getData() {
  const res = await fetch("/data.json");
  const data = await res.json();
  console.log(data);
}

res.json<T>()

インターフェースとともに res.json<T>() を呼び出します。TS は User の有効なフィールドだけを使用していることをチェックします。

interface User { id: number; name: string }

async function getUser() {
  const res = await fetch("/user.json");
  const user = await res.json<User>();
  console.log(user.id, user.name);
}

型安全性

json<T> でジェネリクスを使うと、存在しないフィールドへのアクセスを TypeScript が防ぎます。

interface Product { id: number; price: number }

async function getProduct() {
  const res = await fetch("/product.json");
  const p = await res.json<Product>();
  // console.log(p.unknown); // Error: unknown does not exist
}

配列の型付け

ジェネリクスは配列にも使用できます。たとえば Todo[] のように指定すると、各要素が正しい形状であることを TS が保証します。

interface Todo { id: number; done: boolean }

async function getTodos() {
  const res = await fetch("/todos.json");
  const todos = await res.json<Todo[]>();
  todos.forEach(t => console.log(t.id, t.done));
}

json<T>() の確認

簡単な確認：型引数を指定して response.json<T>() を呼び出すメリットは何ですか？

振り返り

振り返り：fetch は Response を返します。デフォルトの json() は any です。型安全性のためにジェネリクス json<T> を追加します。

よくある質問

「Fetch APIの型、Response.json()のジェネリクス」レッスンは無料ですか？

はい。「Fetch APIの型、Response.json()のジェネリクス」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全2レッスンが含まれています。

「Fetch APIの型、Response.json()のジェネリクス」で何を学びますか？

正しい型でFetch APIを使い、Response.json ()のジェネリクスでJSONペイロードを安全に解析します ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/2です。

「Fetch APIの型、Response.json()のジェネリクス」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTypeScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. Fetch APIの型、Response.json()のジェネリクス
  2. zodによる実行時バリデーション（入門）
← TypeScript Academyに戻る