MENU
  1. ホーム
  2. TypeScript
  3. TypeScriptでfetch APIを使った型安全な非同期リクエストの実装方法

TypeScriptでfetch APIを使った型安全な非同期リクエストの実装方法

TypeScript

TypeScriptは、JavaScriptに型の概念を導入することで、より堅牢でメンテナンス性の高いコードを記述するための言語です。その中でも、Web開発において頻繁に利用されるfetch APIは、サーバーからデータを取得するために使われる強力なツールです。しかし、fetch API自体はJavaScriptの一部であり、返されるデータの型を明示的に定義しないため、TypeScriptの強力な型システムを活かすことができません。

そこで、fetch APIをTypeScriptで型安全に使用することにより、APIのリクエストやレスポンスに対して型定義を適用し、実装時のエラーを減らし、保守性を向上させることが可能になります。本記事では、TypeScriptとfetch APIを組み合わせ、型安全な非同期リクエストをどのように実装するかを解説します。

目次

fetch APIとは

fetch APIは、JavaScriptでサーバーとの通信を行うための標準的な方法です。具体的には、HTTPリクエストを送信し、レスポンスとして返されるデータを非同期的に取得するために利用されます。従来のXMLHttpRequestに代わるものとして導入され、シンプルでモダンなインターフェースを提供しています。

fetch APIの基本的な特徴

fetch APIの特徴は以下の通りです：

  • Promiseベース：fetch APIはPromiseを返すため、非同期処理を扱いやすくします。
  • 簡潔なインターフェース：HTTPリクエストの送信やレスポンスの取得が数行のコードで実装できます。
  • モダンなブラウザ対応：fetch APIは最新のブラウザでサポートされており、標準的なWeb APIとして採用されています。

基本的な使い方

fetchの基本的な使い方は、fetch()メソッドにURLを渡すだけで、簡単にサーバーと通信ができます。例として、GETリクエストを送信してデータを取得するコードは以下のようになります。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

このように、fetch APIはシンプルで強力な非同期通信の手段を提供し、現代のWeb開発に欠かせない技術となっています。

TypeScriptの利点と型安全性

TypeScriptの最大の利点は、静的型付けを導入することで、コードの予測可能性と安全性を向上させる点です。特にfetch APIを使用する際、サーバーから返されるレスポンスがさまざまな型である可能性がありますが、JavaScriptではその型が保証されないため、エラーが発生するリスクがあります。

型安全性の重要性

型安全性とは、プログラム中でデータの型が明確に定義され、予期しない型のデータが扱われないことを意味します。TypeScriptは、以下の点で型安全性を確保し、fetch APIの利用時に大きなメリットをもたらします。

1. コンパイル時にエラーを検出

TypeScriptでは、リクエストやレスポンスの型を事前に定義するため、コンパイル時に不正なデータ型の操作を検出し、実行時のバグを未然に防ぐことができます。

2. 自動補完による開発効率の向上

型定義があることで、エディタの補完機能が充実し、開発中に関数やオブジェクトのプロパティが自動的に補完されます。これにより、タイプミスや間違った使い方を減らすことができます。

fetch APIと型安全性の組み合わせ

fetch APIをそのまま使うと、レスポンスのデータ型は不確定なため、TypeScriptの利点を十分に活用できません。以下のように、レスポンスの型を定義することで、型安全な非同期リクエストを実現できます。

interface ApiResponse {
  id: number;
  name: string;
  email: string;
}

fetch('https://api.example.com/user/1')
  .then(response => response.json() as Promise<ApiResponse>)
  .then(data => {
    console.log(data.name); // 型安全にアクセス可能
  })
  .catch(error => console.error('Error:', error));

このように、TypeScriptとfetch APIを組み合わせることで、信頼性が高く、予測可能なコードを書くことが可能になります。

型定義の方法

TypeScriptでfetch APIを使う際、レスポンスデータに対して型定義を行うことは、型安全性を高めるための重要なステップです。APIから取得するデータの形式は多様ですが、事前にその構造を理解し、適切な型を定義することで、コンパイル時にエラーを検出でき、実行時エラーを防ぐことができます。

APIレスポンスの型定義

まず、APIから取得するデータの構造を元にインターフェースを定義します。例えば、以下のようなユーザーデータを取得する場合を考えます。

{
  "id": 1,
  "name": "John Doe",
  "email": "johndoe@example.com"
}

このデータ構造に基づいて、TypeScriptでは以下のように型を定義します。

interface User {
  id: number;
  name: string;
  email: string;
}

このUserインターフェースを使用することで、fetch APIから取得したデータが正しい型であることを保証します。

fetch APIの実装における型指定

次に、fetch APIを使ってデータを取得し、先ほど定義した型を適用します。通常のJavaScriptでは型が明示されませんが、TypeScriptでは次のように型を適用して、レスポンスデータを型安全に扱います。

fetch('https://api.example.com/user/1')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json() as Promise<User>;
  })
  .then(data => {
    console.log(data.name); // TypeScriptはここでデータがUser型であることを認識しています
  })
  .catch(error => console.error('Error:', error));

ここでは、response.json()の結果がPromise<User>型であることを明示的に指定しています。これにより、TypeScriptはデータの型を推論し、プロパティにアクセスする際の型チェックを行います。

複雑な型の定義

場合によっては、より複雑なデータ構造を扱う必要があることもあります。例えば、APIが複数のユーザーを返す場合、そのレスポンスを以下のように型定義できます。

interface ApiResponse {
  users: User[];
  totalCount: number;
}

fetch('https://api.example.com/users')
  .then(response => response.json() as Promise<ApiResponse>)
  .then(data => {
    console.log(data.users[0].name); // 配列内のUser型データにアクセス
    console.log(data.totalCount); // 合計件数も型安全にアクセス可能
  });

このように、TypeScriptで型を定義することで、APIのレスポンスの構造が明確になり、実装時にエラーを未然に防ぐことができます。

非同期処理の基礎

fetch APIを使う際、非同期処理は欠かせません。JavaScriptでは、サーバーからのデータ取得やファイル読み込みなどの時間のかかる処理は非同期で行われ、プログラム全体の実行を止めずに並行して処理を進めることができます。ここでは、非同期処理の基本的な仕組みであるPromiseやasync/awaitについて解説します。

Promiseの基本

Promiseは、JavaScriptで非同期処理を扱うためのオブジェクトです。Promiseは、将来的に完了する可能性がある処理を表し、成功時（解決: resolved）や失敗時（拒否: rejected）に特定のコードを実行できます。

次のコードは、Promiseを利用した非同期処理の基本的な例です。

const fetchData = new Promise<string>((resolve, reject) => {
  const success = true;
  if (success) {
    resolve('Data fetched successfully');
  } else {
    reject('Error fetching data');
  }
});

fetchData
  .then(result => console.log(result)) // 成功時の処理
  .catch(error => console.error(error)); // 失敗時の処理

ここでは、resolveが呼ばれると成功、rejectが呼ばれると失敗を意味します。Promiseは、thenとcatchで結果に対する処理を行います。

async/awaitの基本

Promiseのthenやcatchは便利ですが、非同期コードが複雑になるとネストが深くなり、コードが読みづらくなることがあります。そこで、async/awaitを使うことで、非同期処理をよりシンプルに書くことができます。

async/awaitはPromiseのラッパーで、処理の完了を待ってから次の処理を実行できるため、同期的なコードのように書けます。例として、fetch APIを使った非同期リクエストをasync/awaitで記述すると次のようになります。

async function fetchUserData() {
  try {
    const response = await fetch('https://api.example.com/user/1');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchUserData();

このように、awaitキーワードを使うことで、Promiseの解決を待つことができ、結果を次の行で扱えるため、コードの可読性が向上します。また、try/catchブロックを使うことで、エラーハンドリングも簡単に行えます。

Promiseとasync/awaitの使い分け

Promiseは複数の非同期処理を連続して行う場合や、エラーハンドリングを一括で行いたいときに有用です。一方、async/awaitは直線的な非同期処理を記述する際にコードを簡潔にし、可読性を高めます。以下は、両者の使い分けの例です。

// Promise
fetch('https://api.example.com/user/1')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

// async/await
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/user/1');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

どちらもfetch APIを利用した非同期処理ですが、async/awaitの方がコードがシンプルで、エラーハンドリングが読みやすくなっています。

fetch APIと非同期処理の組み合わせ

fetch APIは、Promiseベースで動作するため、非同期処理との組み合わせが自然に行われます。前述の通り、fetchはデータを取得する際に非同期的にリクエストを行い、その結果をPromiseとして返します。ここでは、fetch APIと非同期処理を実際にどのように組み合わせて使用するか、具体的な実装例を見ていきます。

基本的なfetch APIの使用例

fetch APIを使って非同期リクエストを行う際、基本的なパターンは次のようになります。fetch()メソッドを呼び出すと、Promiseが返され、リクエストが完了するとレスポンスオブジェクトが解決されます。

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data); // レスポンスデータにアクセス
  })
  .catch(error => {
    console.error('There was a problem with the fetch operation:', error);
  });

このコードでは、fetch()によって非同期的にAPIにリクエストを送信し、then()でレスポンスを処理しています。response.okをチェックすることで、リクエストが成功したかどうかを確認し、成功時はresponse.json()でレスポンスをパースしてデータを取得します。

async/awaitを使ったfetch APIの使用例

上記のコードをasync/awaitを使ってよりシンプルに書き直すこともできます。async/awaitを使うことで、Promiseの解決を待つ間、同期的なコードのように処理を記述できます。

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('There was a problem with the fetch operation:', error);
  }
}

fetchData();

awaitを使うことで、非同期処理が完了するまで処理を一時停止し、responseが解決された後に次の行でresponse.json()を実行します。このコードは、Promiseを使ったネスト構造がなくなり、可読性が向上しています。

POSTリクエストの実装例

次に、POSTリクエストを送信する実装例を見てみます。fetch APIを使ってデータをサーバーに送信する場合、リクエストメソッドやヘッダー、ボディなどを指定する必要があります。

async function postData(url: string, data: object) {
  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    });

    if (!response.ok) {
      throw new Error('Network response was not ok');
    }

    const responseData = await response.json();
    console.log(responseData);
  } catch (error) {
    console.error('There was a problem with the fetch operation:', error);
  }
}

postData('https://api.example.com/data', { name: 'John', age: 30 });

このコードでは、POSTリクエストを送信し、headersでリクエストのコンテンツタイプをJSONに指定し、bodyに送信するデータをJSON形式で渡しています。サーバーがリクエストを正常に処理すると、response.json()で返されたデータを取得し、コンソールに出力します。

GETリクエストとパラメータ付きリクエストの実装例

GETリクエストでクエリパラメータを指定する場合は、URLにパラメータを組み込むことで対応します。以下は、その例です。

async function fetchWithParams(userId: number) {
  try {
    const response = await fetch(`https://api.example.com/user?id=${userId}`);

    if (!response.ok) {
      throw new Error('Network response was not ok');
    }

    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('There was a problem with the fetch operation:', error);
  }
}

fetchWithParams(1);

このコードでは、ユーザーIDをクエリパラメータとして渡し、そのユーザーに関する情報を取得します。GETリクエストはデフォルトのメソッドであり、特に指定しなくても実行されます。

fetch APIの活用とベストプラクティス

非同期処理とfetch APIを組み合わせる際のベストプラクティスとして、以下の点が挙げられます。

  1. エラーハンドリング：ネットワークエラーやレスポンスの不備に対するエラーハンドリングをしっかり行う。
  2. 非同期処理の構造化：async/awaitを利用して、Promiseチェーンを避け、可読性の高いコードを記述する。
  3. 型安全性の確保：TypeScriptの型定義を活用して、レスポンスデータの型を明示的に指定し、バグの発生を防ぐ。

fetch APIを効果的に活用することで、非同期リクエストを簡単かつ堅牢に実装することが可能です。

エラーハンドリングの実装

fetch APIを利用する際、エラーハンドリングは非常に重要です。ネットワーク通信は、リクエストの失敗やレスポンスが不正である場合、システム全体の動作に悪影響を与える可能性があります。fetch APIのエラーハンドリングには、ステータスコードのチェックや例外処理が欠かせません。ここでは、fetch APIでエラーハンドリングを効果的に実装する方法を解説します。

fetch APIのエラーハンドリングの基本

fetch API自体は、HTTPステータスコードがエラーでもPromiseがrejectedになるわけではなく、レスポンスが正常に返ってきた場合は常にresolvedされます。そのため、サーバーから返ってきたステータスコードを明示的に確認し、エラーを処理する必要があります。

基本的なエラーハンドリングの流れは以下の通りです。

async function fetchData(url: string) {
  try {
    const response = await fetch(url);

    // HTTPステータスコードの確認
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Fetch error:', error);
    throw error; // 必要に応じてエラーを再スロー
  }
}

このコードでは、response.okプロパティでHTTPステータスコードが200番台であるかを確認し、エラーが発生した場合はErrorをスローしています。エラーはcatchブロックでキャッチされ、適切に処理されます。

ネットワークエラーの処理

ネットワークエラーやサーバーが応答しない場合、fetch APIはrejectedとなり、Promiseが解決されません。これらのエラーもtry/catch構文で適切に処理する必要があります。

async function fetchDataWithNetworkError(url: string) {
  try {
    const response = await fetch(url);

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = await response.json();
    return data;
  } catch (error) {
    // ネットワークエラーまたはその他のエラーの処理
    if (error instanceof TypeError) {
      console.error('Network error or JSON parsing error:', error.message);
    } else {
      console.error('Unexpected error:', error);
    }
  }
}

TypeErrorは、ネットワークエラーやレスポンスのパースエラーが発生したときにスローされるため、エラーの種類に応じて適切に処理することができます。

エラーハンドリングのベストプラクティス

fetch APIを使う際のエラーハンドリングにはいくつかのベストプラクティスがあります。

1. 再試行ロジックを導入する

一時的なネットワークエラーの場合、再試行することで問題が解決することがあります。再試行ロジックを実装することで、ユーザー体験を向上させることができます。

async function fetchDataWithRetry(url: string, retries: number = 3) {
  for (let i = 0; i < retries; i++) {
    try {
      const response = await fetch(url);
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return await response.json();
    } catch (error) {
      if (i === retries - 1) {
        console.error('Max retries reached:', error);
        throw error;
      }
    }
  }
}

この例では、指定した回数だけ再試行を行い、それでも失敗した場合にエラーをスローします。

2. グローバルなエラーハンドリング

アプリケーション全体でfetch APIのエラーハンドリングを一元化することで、冗長なエラーハンドリングコードを避けることができます。例えば、共通のエラーハンドリング関数を定義して、すべてのAPI呼び出しで使うことができます。

async function handleFetchErrors(response: Response) {
  if (!response.ok) {
    throw new Error(`Error: ${response.status} - ${response.statusText}`);
  }
  return response;
}

async function fetchData(url: string) {
  try {
    const response = await fetch(url);
    await handleFetchErrors(response);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Fetch operation failed:', error);
  }
}

このように、エラーハンドリングを一箇所にまとめることで、コードの可読性と再利用性が向上します。

ユーザー通知とUIの対応

エラーが発生した場合、ユーザーに適切な通知を行い、UI上でエラーを反映することも重要です。例えば、ロード中のインジケータを表示したり、エラー時にリトライボタンを表示するなど、UI/UXを考慮した実装を行うとユーザー体験が向上します。

async function fetchDataWithUIHandling(url: string) {
  try {
    setLoading(true); // ロード中の表示
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error('Error fetching data');
    }
    const data = await response.json();
    setLoading(false);
    return data;
  } catch (error) {
    setLoading(false);
    setErrorMessage('データの取得に失敗しました。リトライしてください。');
    console.error('Error:', error);
  }
}

この例では、エラーが発生した際にエラーメッセージをUIに表示し、ロード中はインジケータを表示するような処理を行っています。

まとめ

fetch APIを使った非同期リクエストでは、エラーハンドリングが重要な役割を果たします。ステータスコードの確認やネットワークエラーの対応、再試行ロジックの導入、グローバルなエラーハンドリングの実装など、適切なエラーハンドリングを行うことで、堅牢でユーザーフレンドリーなアプリケーションを作成できます。

実用的な応用例

fetch APIとTypeScriptを活用して型安全な非同期リクエストを実装するための基本的な概念を理解したところで、ここでは実際のWeb APIを使った具体的な応用例を紹介します。これにより、実際の開発現場でどのように活用できるかを学び、さらに応用力を高めることができます。

例1: REST APIを使ったユーザー情報の取得

ここでは、REST APIを使って複数のユーザー情報を取得し、それを画面に表示する実装例を見てみます。APIからのレスポンスデータをしっかり型定義し、fetch APIを使って非同期的にデータを取得する流れです。

interface User {
  id: number;
  name: string;
  email: string;
}

interface ApiResponse {
  users: User[];
}

async function fetchUsers(): Promise<User[]> {
  const response = await fetch('https://api.example.com/users');
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  const data: ApiResponse = await response.json();
  return data.users;
}

// ユーザー情報を取得して表示する関数
async function displayUsers() {
  try {
    const users = await fetchUsers();
    users.forEach(user => {
      console.log(`ID: ${user.id}, Name: ${user.name}, Email: ${user.email}`);
    });
  } catch (error) {
    console.error('Error fetching users:', error);
  }
}

displayUsers();

説明

  • APIからユーザー情報を取得し、型安全にそのレスポンスを扱う例です。
  • Userインターフェースで取得するユーザー情報を型定義し、ApiResponseインターフェースでAPI全体のレスポンスを表現しています。
  • fetchUsers関数は非同期的にユーザー情報を取得し、その結果を返します。
  • displayUsers関数は取得したデータを画面に表示するために使われます。

例2: POSTリクエストを使用した新規ユーザー登録

次に、POSTリクエストを使用して、新しいユーザーをサーバーに登録する例を見てみます。データの送信時に適切な型を指定することで、TypeScriptの型安全性を維持します。

interface NewUser {
  name: string;
  email: string;
}

interface CreateUserResponse {
  id: number;
  name: string;
  email: string;
}

async function createUser(newUser: NewUser): Promise<CreateUserResponse> {
  const response = await fetch('https://api.example.com/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(newUser),
  });

  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }

  const data: CreateUserResponse = await response.json();
  return data;
}

// 新規ユーザーを作成する関数
async function addNewUser() {
  const newUser: NewUser = {
    name: 'Jane Doe',
    email: 'janedoe@example.com',
  };

  try {
    const createdUser = await createUser(newUser);
    console.log(`Created User ID: ${createdUser.id}, Name: ${createdUser.name}`);
  } catch (error) {
    console.error('Error creating user:', error);
  }
}

addNewUser();

説明

  • 新しいユーザーを登録するためのPOSTリクエストを実行しています。
  • NewUserインターフェースで登録するユーザーのデータを型定義し、リクエストのボディにその型を適用しています。
  • CreateUserResponseインターフェースで、サーバーからのレスポンスデータを型定義し、安全にデータを扱えるようにしています。
  • エラーハンドリングも含めて、堅牢なAPI呼び出しを実現しています。

例3: 外部APIを利用した天気情報の取得

次は、天気情報を取得するための外部APIを呼び出し、そのデータを表示する例です。このような外部の公開APIを利用する場合も、fetch APIとTypeScriptで型を適用することで、安全にデータを扱うことができます。

interface WeatherData {
  temperature: number;
  description: string;
}

interface WeatherApiResponse {
  main: {
    temp: number;
  };
  weather: {
    description: string;
  }[];
}

async function fetchWeather(city: string): Promise<WeatherData> {
  const apiKey = 'your-api-key';
  const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`);

  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }

  const data: WeatherApiResponse = await response.json();
  return {
    temperature: data.main.temp,
    description: data.weather[0].description,
  };
}

// 天気情報を取得して表示する関数
async function displayWeather(city: string) {
  try {
    const weather = await fetchWeather(city);
    console.log(`Temperature in ${city}: ${weather.temperature}°C, Weather: ${weather.description}`);
  } catch (error) {
    console.error('Error fetching weather data:', error);
  }
}

displayWeather('Tokyo');

説明

  • OpenWeatherMapのAPIを利用して、指定した都市の天気情報を取得しています。
  • APIレスポンスの構造に基づいてWeatherApiResponseを型定義し、レスポンスのデータを正しく取得・表示しています。
  • 取得した天気情報は、WeatherDataインターフェースを通じて温度と天気の説明を型安全に扱っています。

実用的な応用例からの学び

これらの応用例を通じて、fetch APIを使った非同期リクエストが実際のプロジェクトでどのように活用できるかを確認しました。特にTypeScriptを利用して型を適用することで、データの信頼性が向上し、予期しないエラーを防ぐことができます。

実際の開発では、これらの応用例を基に、エラーハンドリングやパフォーマンス最適化、UIとの連携を強化することで、より洗練された非同期処理を実装することが可能です。

型安全なリクエストとレスポンスの例

TypeScriptを使用してfetch APIで非同期リクエストを行う際、リクエストとレスポンスに型を適用することで、コードの予測可能性と保守性が向上します。ここでは、実際のリクエストおよびレスポンスに対して型を適用し、型安全な通信を実現する方法を具体的に見ていきます。

リクエストの型安全性

リクエストの型安全性を確保するためには、送信するデータに対して適切な型を定義する必要があります。たとえば、APIにユーザー情報を送信する際、送信データの型を事前に定義することで、送信時のデータ整合性を確保できます。

interface UserRequest {
  name: string;
  email: string;
  age: number;
}

async function sendUserData(user: UserRequest): Promise<void> {
  const response = await fetch('https://api.example.com/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(user),
  });

  if (!response.ok) {
    throw new Error(`Failed to send user data. Status: ${response.status}`);
  }

  console.log('User data sent successfully');
}

const newUser: UserRequest = {
  name: 'John Doe',
  email: 'john.doe@example.com',
  age: 30,
};

sendUserData(newUser);

説明

  • UserRequestインターフェースは、ユーザー情報の型を定義しています。この型を使うことで、リクエストに送信するデータが正しい形式であることをコンパイル時に確認できます。
  • sendUserData関数では、指定された型に基づいたデータを送信し、エラーチェックを行っています。

レスポンスの型安全性

レスポンスに型を適用することで、取得したデータに対して信頼性のある操作を行うことができます。APIから返されるデータの構造が事前に分かっている場合、そのデータを型定義することで、誤ったデータアクセスを防ぐことが可能です。

interface UserResponse {
  id: number;
  name: string;
  email: string;
  age: number;
}

async function fetchUserData(userId: number): Promise<UserResponse> {
  const response = await fetch(`https://api.example.com/users/${userId}`);

  if (!response.ok) {
    throw new Error(`Failed to fetch user data. Status: ${response.status}`);
  }

  const data: UserResponse = await response.json();
  return data;
}

fetchUserData(1)
  .then(user => console.log(`User: ${user.name}, Email: ${user.email}, Age: ${user.age}`))
  .catch(error => console.error('Error:', error));

説明

  • UserResponseインターフェースは、APIから返されるユーザー情報の型を定義しています。これにより、レスポンスデータに正しくアクセスできることが保証されます。
  • fetchUserData関数は、指定したユーザーIDに基づいてユーザー情報を取得し、型安全にそのデータを操作します。

複雑な型の適用例

実際のプロジェクトでは、レスポンスが単一のオブジェクトではなく、リストやネストされたオブジェクトの場合もあります。TypeScriptでは、これらの複雑な型にも対応できます。次の例では、複数のユーザー情報を含むレスポンスに型を適用しています。

interface User {
  id: number;
  name: string;
  email: string;
}

interface ApiResponse {
  users: User[];
  total: number;
  page: number;
}

async function fetchUsers(page: number): Promise<ApiResponse> {
  const response = await fetch(`https://api.example.com/users?page=${page}`);

  if (!response.ok) {
    throw new Error(`Failed to fetch users. Status: ${response.status}`);
  }

  const data: ApiResponse = await response.json();
  return data;
}

fetchUsers(1)
  .then(data => {
    console.log(`Total users: ${data.total}`);
    data.users.forEach(user => console.log(`User: ${user.name}, Email: ${user.email}`));
  })
  .catch(error => console.error('Error:', error));

説明

  • ApiResponseインターフェースは、複数のユーザーを含むレスポンスデータを型定義しています。これにより、ユーザーリストや他のメタデータ（合計件数やページ番号）を安全に扱うことができます。
  • 非同期処理の結果として取得したデータが期待した形式であることが保証され、レスポンスの解析や表示処理がスムーズに行えます。

型安全なfetch APIの利点

  • バグの発生を抑制: 型定義により、リクエストやレスポンスで扱うデータの形式をコンパイル時にチェックでき、ランタイムエラーを減らします。
  • 自動補完機能: エディタでの自動補完により、プロパティ名の入力ミスや、誤ったデータの取り扱いを防止します。
  • ドキュメント代わり: 型定義はそのままデータ構造のドキュメントとして機能し、チーム内での共有やメンテナンスがしやすくなります。

fetch APIを使用した型安全な非同期リクエストの実装は、TypeScriptを活用することでより信頼性の高いコードとなり、エラーの少ない安定した開発体験を提供します。

APIの型チェック自動化ツール

TypeScriptを使用してfetch APIで型安全な非同期リクエストを行う場合、APIの型を手動で定義するのは手間がかかります。特に、頻繁に変更されるAPIでは、型の維持管理が難しくなります。ここでは、APIの型を自動的に生成し、TypeScriptの型システムと連携させる便利なツールやライブラリを紹介します。

1. OpenAPI（Swagger）とTypeScript

OpenAPIは、APIの仕様を定義するための標準フォーマットです。多くのAPIはOpenAPI（Swagger）仕様で記述されており、この仕様から自動的にTypeScriptの型を生成するツールがあります。その一つが「openapi-typescript-codegen」です。

このツールを使うことで、APIのエンドポイントに対応する型や、リクエスト・レスポンスの型を自動的に生成でき、手動で型を定義する必要がなくなります。

セットアップと使用方法

  1. OpenAPI仕様のファイル（通常は.jsonまたは.yaml）を取得します。
  2. 以下のコマンドを使ってopenapi-typescript-codegenをインストールします。
npm install openapi-typescript-codegen --save-dev
  1. OpenAPIファイルからTypeScriptの型を生成します。
npx openapi-typescript-codegen --input ./openapi.yaml --output ./src/api
  1. 生成された型を使ってfetch APIを型安全に呼び出せます。
import { User } from './api/models';

async function getUser(userId: number): Promise<User> {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  const data: User = await response.json();
  return data;
}

利点

  • OpenAPIファイルを基にして自動的に型が生成されるため、APIが更新されても型を自動で管理できます。
  • 型の定義と実際のAPI仕様が常に同期するため、手動によるエラーを防ぎ、メンテナンスコストを削減します。

2. GraphQLとTypeScript

GraphQLを利用するプロジェクトでは、GraphQLスキーマから型を自動生成するツール「GraphQL Code Generator」があります。GraphQLは型定義が組み込まれているため、TypeScriptとの相性が非常に良いです。

セットアップと使用方法

  1. 必要なライブラリをインストールします。
npm install @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations --save-dev
  1. codegen.ymlファイルを作成し、GraphQLのエンドポイントやスキーマの場所を指定します。
schema: "https://api.example.com/graphql"
documents: "./src/graphql/**/*.graphql"
generates:
  ./src/graphql/generated.ts:
    plugins:
      - typescript
      - typescript-operations
  1. 以下のコマンドで型を生成します。
npx graphql-codegen
  1. 生成された型を使ってGraphQLクエリを型安全に扱います。
import { GetUserQuery } from './graphql/generated';

async function fetchUser(): Promise<GetUserQuery> {
  const response = await fetch('https://api.example.com/graphql', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      query: `
        query GetUser($id: ID!) {
          user(id: $id) {
            id
            name
            email
          }
        }
      `,
      variables: { id: 1 },
    }),
  });

  const { data }: { data: GetUserQuery } = await response.json();
  return data;
}

利点

  • GraphQLスキーマから直接型を生成するため、常にAPIと型が同期します。
  • 複雑なクエリやミューテーションも、型の恩恵を受けて安全に扱えます。

3. REST APIの型自動生成ツール: `axios`と`TypeScript`

axiosを使用したREST APIでの型自動生成を行う際は、axios-tsのようなライブラリを利用することで、APIレスポンスの型を自動的に生成し、fetch APIの代替として使用できます。

セットアップと使用方法

  1. axiosと型生成用のライブラリをインストールします。
npm install axios
npm install --save-dev axios-ts
  1. axiosのラッパーを作成し、型安全なAPI呼び出しを実現します。
import axios from 'axios';

interface User {
  id: number;
  name: string;
  email: string;
}

async function getUser(userId: number): Promise<User> {
  const response = await axios.get<User>(`https://api.example.com/users/${userId}`);
  return response.data;
}

利点

  • axiosの使い慣れたインターフェースで、型安全なAPI呼び出しが可能になります。
  • 型を明示的に適用することで、リクエストやレスポンスに対する厳格な型チェックを行います。

4. Zodでのレスポンス型の検証

レスポンスの型チェックと検証には、Zodのようなライブラリを使って、データが想定された形式であることを実行時に保証することができます。これにより、APIが予期しないデータを返した場合でも安全に扱えます。

セットアップと使用方法

  1. Zodをインストールします。
npm install zod
  1. Zodスキーマを定義し、レスポンスデータの検証を行います。
import { z } from 'zod';

const userSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string(),
});

async function fetchUserData(userId: number) {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  const data = await response.json();

  const result = userSchema.safeParse(data);
  if (!result.success) {
    throw new Error('Invalid user data');
  }

  return result.data;
}

利点

  • TypeScriptの型定義に加えて、実行時の型検証も行うため、予期しないデータ形式に対しても安全性を高められます。

まとめ

APIの型チェックを自動化するツールを活用することで、手動の型定義によるミスを防ぎ、常に最新のAPI仕様に基づいた型安全なリクエストを実装できます。OpenAPIやGraphQL Code Generator、Zodなどのツールを使用して、効率的で保守性の高いコードを維持しましょう。

テストとデバッグの方法

fetch APIを使った非同期リクエストのテストとデバッグは、リクエストの成功や失敗を確認し、レスポンスのデータが正しく処理されることを保証するために重要です。ここでは、fetch APIを使用した非同期処理のテストやデバッグ手法を紹介します。

1. fetch APIのモックを使ったテスト

APIを利用するコードは外部のサーバーに依存しているため、テストを行う際には、外部リソースにアクセスせずにAPIのレスポンスをシミュレートする必要があります。これには、fetch APIをモック（模擬）することが有効です。ここでは、テストフレームワークとして人気のあるJestを使って、fetchをモックする方法を説明します。

セットアップ

まず、Jestをインストールし、テスト環境を整えます。

npm install jest @types/jest --save-dev

次に、fetch APIをモックするために、jest-fetch-mockをインストールします。

npm install jest-fetch-mock --save-dev

テストコードの例

以下の例では、fetchをモックして、特定のレスポンスを返すように設定しています。これにより、外部のAPIに依存せずに、fetch APIを使った関数をテストできます。

import { fetchUserData } from './api'; // テスト対象の関数
import fetchMock from 'jest-fetch-mock';

fetchMock.enableMocks();

describe('fetchUserData', () => {
  beforeEach(() => {
    fetchMock.resetMocks();
  });

  it('fetches user data successfully', async () => {
    // モックされたレスポンスを設定
    fetchMock.mockResponseOnce(
      JSON.stringify({ id: 1, name: 'John Doe', email: 'john.doe@example.com' })
    );

    const data = await fetchUserData(1);
    expect(data.name).toEqual('John Doe');
    expect(data.email).toEqual('john.doe@example.com');
  });

  it('handles fetch errors', async () => {
    // モックされたエラーレスポンス
    fetchMock.mockReject(() => Promise.reject('API is down'));

    await expect(fetchUserData(1)).rejects.toThrow('API is down');
  });
});

説明

  • fetchMock.mockResponseOnce()でモックされたレスポンスを設定し、そのレスポンスが返されることをテストします。
  • テスト対象のfetchUserData関数が、指定されたレスポンスデータを正しく処理しているかを検証します。
  • エラー発生時の挙動を確認するため、fetchMock.mockReject()を使用してエラーをシミュレートします。

2. エンドツーエンド（E2E）テスト

エンドツーエンドテストでは、アプリケーション全体の動作を確認し、実際のAPIリクエストが成功するかどうかをテストします。ツールとしてはCypressやPuppeteerが一般的です。これらのツールを使用して、実際のAPIにアクセスする形で、アプリケーションのUIやデータのやり取りが正しく行われているかを確認します。

以下はCypressを使った簡単なエンドツーエンドテストの例です。

npm install cypress --save-dev

次に、Cypressのテストケースを作成します。

describe('User API', () => {
  it('fetches and displays user data', () => {
    cy.visit('http://localhost:3000'); // アプリケーションのURL

    // APIリクエストをモックする
    cy.intercept('GET', '/api/users/1', {
      id: 1,
      name: 'John Doe',
      email: 'john.doe@example.com',
    }).as('getUser');

    // ボタンをクリックしてユーザーを取得
    cy.get('button').contains('Fetch User').click();

    // モックされたデータが正しく表示されているか確認
    cy.wait('@getUser');
    cy.get('.user-name').should('contain', 'John Doe');
    cy.get('.user-email').should('contain', 'john.doe@example.com');
  });
});

説明

  • Cypressのcy.intercept()を使用して、APIリクエストをモックします。
  • UI操作によってfetch APIが呼ばれ、データが正しく表示されるかをテストします。

3. デバッグの方法

fetch APIのデバッグには、ブラウザの開発者ツールを活用することが有効です。ChromeやFirefoxの開発者ツールでは、ネットワークタブを使用して、実際に送信されたリクエストや返されたレスポンスを確認できます。

ネットワークタブを使用したデバッグ

  1. ブラウザでF12を押して開発者ツールを開き、ネットワークタブを選択します。
  2. fetch APIによって送信されたリクエストがリストに表示されます。リクエストの詳細（ヘッダー、ボディ、レスポンスなど）を確認できます。
  3. エラーレスポンスや不正なリクエストを確認し、適切なエラーハンドリングやデータの修正を行います。

デバッグログの使用

開発中は、console.logを活用してリクエストやレスポンスの内容を確認できます。非同期処理の流れを追跡し、エラーが発生する箇所を特定するのに役立ちます。

async function fetchUserData(userId: number) {
  try {
    console.log(`Fetching user with ID: ${userId}`);
    const response = await fetch(`https://api.example.com/users/${userId}`);

    if (!response.ok) {
      console.error(`Error: ${response.status}`);
      throw new Error('Failed to fetch user data');
    }

    const data = await response.json();
    console.log('User data:', data);
    return data;
  } catch (error) {
    console.error('Fetch error:', error);
    throw error;
  }
}

まとめ

fetch APIを使用した非同期処理のテストとデバッグは、モックやエンドツーエンドテストツールを活用して効率的に行うことができます。モックを使って外部APIに依存せずにテストを行い、実際のデバッグにはブラウザの開発者ツールを活用して、リクエストやレスポンスの内容を正確に確認しましょう。これにより、非同期リクエストの信頼性が向上し、エラーの少ない堅牢なアプリケーションを構築できます。

まとめ

本記事では、TypeScriptとfetch APIを活用した非同期リクエストの型安全な実装方法について解説しました。TypeScriptの型システムを利用してリクエストやレスポンスの型を定義することで、実行時エラーを未然に防ぎ、保守性の高いコードが実現できます。また、エラーハンドリングやAPIの型自動生成ツール、モックやテストを駆使することで、開発の効率と品質を向上させることができます。型安全なfetch APIの活用は、モダンなWeb開発における重要な技術の一つです。

TypeScript
非同期 Web開発 TypeScript 型安全 Fetch API

コメント

コメントする

目次