こんにちは！今日は、TypeScriptを使用したフロントエンド開発でAPI呼び出しを効率的かつ型安全に行うための素晴らしいライブラリ、Aspida（アスピダ）について紹介します。

目次

Aspidaとは何か？
Aspidaのメリット
Aspidaのインストール
APIエンドポイントの定義
HTTPクライアントのコードの生成
生成されたHTTPクライアントの使用
まとめ

Aspidaとは何か？

Aspidaは、TypeScriptを使用したHTTPクライアントの生成ライブラリで、主にフロントエンド開発におけるAPIの呼び出しを容易にし、より安全にします。

Aspidaのメリット

Aspidaの主な特徴とその利点を以下に列挙します。

型安全: AspidaはTypeScriptによって強力にサポートされています。これにより、APIのレスポンスが想定した型と一致することを確認できます。これは、APIから返されるデータの形状を事前に知ることができ、想定外のデータが返された場合にエラーを発見しやすくするために有用です。
自動コード生成: Aspidaは、APIエンドポイントの定義からHTTPクライアントのコードを自動的に生成します。これにより、API呼び出しのコードを手動で書く手間を省くことができ、同時に一貫性と信頼性も確保できます。
柔軟性と互換性: Aspidaはaxiosやfetchなどの様々なHTTPクライアントライブラリと互換性があります。これにより、既存のプロジェクトにAspidaを簡単に統合することができます。
開発効率: レスポンスの型定義やエンドポイントの生成が自動化されるため、開発者はAPIの実装やビジネスロジックに集中することができます。また、APIの変更があった場合でも、Aspidaを使用すれば新しい型定義やエンドポイントの生成を自動的に行うことができます。

Aspidaのインストール

Aspidaをインストールするためには、まずはプロジェクトのセットアップが必要です。Node.jsとnpmがインストールされていることを確認してください。その後、以下のコマンドを実行してAspidaをインストールします。

npm install @aspida/node-fetch aspida

ここでは、HTTPクライアントライブラリとしてnode-fetchを使用していますが、もしaxiosを使いたい場合は@aspida/axiosを代わりにインストールしてください。

APIエンドポイントの定義

Aspidaは、APIエンドポイントの定義からHTTPクライアントのコードを自動生成します。以下のようなディレクトリ構造でAPIエンドポイントを定義します。

/api
  /users
    index.ts
    /$userId.ts

例えば、index.tsには以下のようなコードを書きます。

// /api/users/index.ts

type Methods = {
  get: {
    resBody: {
      id: number
      name: string
    }[]
  }
  post: {
    reqBody: {
      name: string
    }
    resBody: {
      id: number
    }
  }
}

export default Methods

この定義により、GET /usersとPOST /usersのエンドポイントが定義されます。

HTTPクライアントのコードの生成

定義したAPIエンドポイントからHTTPクライアントのコードを生成します。以下のコマンドを実行してください。

npx aspida

これにより、/apiディレクトリ内の全てのAPIエンドポイント定義からHTTPクライアントのコードが生成されます。

生成されたHTTPクライアントの使用

生成されたHTTPクライアントを使ってAPIを呼び出すことができます。例えば、以下のようにAPIを呼び出すことができます。

import api from '@/api/$api'

const main = async () => {
  const users = await api.users.get()
  console.log(users)

  const newUser = await api.users.post({ body: { name: 'John' } })
  console.log(newUser)
}

main()

まとめ

Aspidaを使うことで、API呼び出しを簡単かつ安全に行うことができます。開発効率の向上やバグの削減に寄与すること間違いなし