TypeScript で Fetch API をマスターしよう！

2024-04-22

TypeScript で Fetch API を使う方法

このチュートリアルでは、TypeScript で Fetch API を使用する方法を説明します。 Fetch API は、JavaScript で非同期的に HTTP リクエストを行うための標準的な API です。 TypeScript を使用すると、Fetch API の型を定義し、コードをより安全で保守しやすくなります。

前提知識

このチュートリアルを理解するには、以下の知識が必要です。

TypeScript の基本的な知識
非同期プログラミングの概念
Promise の基本的な知識

Fetch API は、fetch() 関数を使用して HTTP リクエストを行います。この関数は、Promise を返します。 Promise は、非同期操作の結果を処理するためのオブジェクトです。

TypeScript で Fetch API を使用するには、まず型定義をインストールする必要があります。次のコマンドを使用して、@types/node-fetch パッケージをインストールできます。

npm install @types/node-fetch

型定義がインストールされたら、次のコードのように fetch() 関数を使用できます。

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

このコードは、次のことを行います。

https://jsonplaceholder.typicode.com/posts/1 に対する GET リクエストを送信します。
レスポンスが成功したら、JSON として解析します。
JSON データをコンソールに出力します。
エラーが発生した場合は、コンソールにエラーを出力します。

Promise との連携

Fetch API は、Promise を使用して非同期操作を処理します。 Promise には、then() と catch() という 2 つのメソッドがあります。

then() メソッドは、非同期操作が成功したときに呼び出されます。

上記の例では、then() メソッドを使用して JSON データを処理し、catch() メソッドを使用してエラーを処理しています。

型定義

TypeScript で Fetch API を使用するときは、型定義を使用してコードをより安全で保守しやすくなります。型定義により、次のようなことができます。

関数と変数の型を定義する
エラーを検出する
コードをより読みやすくする

上記の例では、@types/node-fetch パッケージの型定義を使用しています。この型定義により、fetch() 関数の型と Response オブジェクトの型を定義できます。

Fetch API は、さまざまな目的に使用できます。次に、いくつかの例を示します。

API からデータをフェッチする
ファイルをダウンロードする
フォームデータを送信する

TypeScript で Fetch API を使用すると、非同期 HTTP リクエストを安全かつ効率的に実行できます。 Promise と型定義を使用して、コードをより読みやすく、保守しやすくすることができます。

TypeScript で Fetch API を使用するサンプルコード

interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

async function fetchPosts(): Promise<Post[]> {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const data = await response.json();
  return data;
}

(async () => {
  const posts = await fetchPosts();
  console.log(posts);
})();

Post インターフェースを定義します。このインターフェースは、JSONPlaceholder API から取得される投稿データの構造を定義します。
fetchPosts() 関数を作成します。この関数は、JSONPlaceholder API から投稿データをフェッチし、Promise として返します。
非同期 IIFE (Immediately Invoked Function Expression) を使用して、fetchPosts() 関数を呼び出し、結果をコンソールに出力します。

このコードの説明

interface Post は、userId、id、title、body というプロパティを持つオブジェクトを定義します。これらのプロパティは、JSONPlaceholder API から取得される投稿データのフィールドに対応しています。
async function fetchPosts(): Promise<Post[]> は、非同期関数であることを示す async キーワードで始まり、Post 型の配列を返すことを示す Promise<Post[]> 型を返します。
const response = await fetch('https://jsonplaceholder.typicode.com/posts'); は、https://jsonplaceholder.typicode.com/posts に対する GET リクエストを送信し、レスポンスを response 変数に格納します。
const data = await response.json(); は、レスポンスを JSON として解析し、結果を data 変数に格納します。
return data; は、data 変数を返します。
(async () => { ... })(); は、非同期 IIFE です。この IIFE は、fetchPosts() 関数を呼び出し、結果をコンソールに出力します。

特定の ID の投稿をフェッチする
投稿を作成する

以下のコードは、Fetch API を使用してファイルを取得する方法を示しています。

async function downloadFile(url: string, filename: string): Promise<void> {
  const response = await fetch(url);
  const data = await response.blob();
  const file = new File([data], filename, { type: response.headers.get('Content-Type') });
  await saveAs(file);
}

downloadFile() 関数を作成します。この関数は、URL とファイル名を受け取り、ファイルをダウンロードします。
const response = await fetch(url); は、URL に対する GET リクエストを送信し、レスポンスを response 変数に格納します。
const file = new File([data], filename, { type: response.headers.get('Content-Type') }); は、data、filename、および Content-Type ヘッダーを使用して新しい File オブジェクトを作成します。
await saveAs(file); は、ファイルを保存します。

ダウンロード進捗状況を追跡する
ダウンロードが完了したらコールバック関数を呼び出す

TypeScript で Fetch API を使用するその他の方法

TypeScript 3.8 以降では、非同期ジェネレータを使用して Fetch API を使用できます。非同期ジェネレータを使用すると、コードをより簡潔に記述できます。

async function* fetchPosts(): AsyncIterableIterator<Post> {
  const response = yield fetch('https://jsonplaceholder.typicode.com/posts');
  const data = yield response.json();
  for (const post of data) {
    yield post;
  }
}

(async () => {
  for await (const post of fetchPosts()) {
    console.log(post);
  }
})();

このコードは、上記のサンプルコードとほぼ同じことを行いますが、非同期ジェネレータを使用しているため、コードがより簡潔になっています。

カスタム HTTP クライアントを使用する

Fetch API は、基本的な HTTP リクエストを行うためのシンプルな API です。より複雑な HTTP リクエストを行う必要がある場合は、Axios などのカスタム HTTP クライアントを使用できます。

import axios from 'axios';

async function fetchPosts(): Promise<Post[]> {
  const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
  return response.data;
}

(async () => {
  const posts = await fetchPosts();
  console.log(posts);
})();