はじめに
対象読者
- フロントエンドで API 通信を行うことが多い開発者
- Axios / fetch の型管理に不安や手間を感じている人
- 型安全なAPIクライアントを導入したい人
- Aspida や aspida-mock が気になっている、または導入を検討している人
本記事で触れないこと
- Aspida の内部実装の詳細
- バックエンド側での API 設計・実装手法
- Aspidaを使った大規模アーキテクチャの構築方法
あくまで「フロントエンドの開発体験をどう向上できるか」という観点で、Aspida の導入メリットと使い勝手にフォーカスしています。
1. フロントエンド開発の悩み
フロントエンド開発で API を叩くとき、こんな経験はありませんか？
- 「このリクエストのパラメータって正しいのか…？」
- 「バックエンドのレスポンス型が変わってバグが出た…」
- 「 fetch や Axios は便利だけど、型安全じゃないから少し怖い…」
特に大規模プロジェクトでは、型がずれると実行時エラーにつながりやすく、開発の安心感が損なわれます。
2. Aspida とは？
そこで登場するのが Aspida です。
Aspida は、Axios や fetch をラップすることで、型安全な API クライアントを自動生成するライブラリです。
導入手順 （axiosバージョン）
まずは必要なパッケージをインストールします。
npm install @aspida/axios axios
# または
yarn add @aspida/axios axios
Aspida を使うと、API のエンドポイントごとにリクエストやレスポンスの型を定義できます。
例えば/usersのレスポンスが以下のような型だとして型定義ファイルを準備します。
export type User = {
id: number;
name: string;
email: string;
}
型定義をもとにエンドポイントごとのファイルを作成します。
import { User } from '../../../types'
export type Methods = {
get: {
resBody: User[];
};
};
以下のコマンド実行で
準備した型定義ファイルをもとに、Aspida が型安全な API クライアントを生成してくれます。
型定義ファイルが準備できたら、以下のコマンドで Aspida が型安全な API クライアントを生成します。
{
"scripts": {
"api:build": "aspida"
}
}
npm run api:build
# または
yarn api:build
これで $api ディレクトリに型安全な API クライアントが生成されます。
型安全な API 呼び出し例
では、実際に型安全に API を呼び出す例を見てみましょう。
import api from '~/api/$api';
const users = await api.users.$get(); // 型安全に API 呼び出し
console.log(users);
// -> [{ id: 1, name: "Taro", email: "taro@example.com" }, ... ]
users の型は TypeScript により以下のように推論されます。
{
id: number;
name: string;
email: string;
}[]
これだけで、リクエストやレスポンスの型が TypeScript によってチェックされ、
バックエンドの API 仕様とフロントエンド実装の型不一致（型の勘違いや命名ミス、仕様変更への追従漏れなど）を、コンパイル時に検知することができます。
3. 開発体験がぐっと向上する理由
型安全で安心
- API が変わっても型チェックで即座にエラーを検知
- IDE の補完も効くので、どんなパラメータを渡せるか迷わなくなる
手間が減る
- Axios の場合は型を手動で付ける必要がありますが、Aspida なら自動生成
- コード量も減り、保守性も向上
4. Aspida-mock でさらに便利に
バックエンドがまだ完成していなくても、フロントエンド開発を進めたいですよね。
Aspida には aspida-mock という便利なモックライブラリがあります。
import { createAspidaMock } from 'aspida-mock';
import api from '~/api/$api';
const mock = createAspidaMock(api, {
users: {
$get: () => [{ id: 1, name: 'Moda' }],
},
});
const users = await mock.users.$get();
console.log(users); // 型安全なモックデータが返る
- 型安全なモックなので「間違ったデータを返してしまう」心配がない
- フロントエンド先行開発やテストで大活躍
5. まとめ
Aspidaを導入することで、フロントエンド開発はぐっと快適になります。
- 型安全なAPI呼び出しでバグを減らせる
- IDE補完で迷わずコーディング
- Aspida-mockでバックエンド未完成でもフロントエンド開発がストップしない
また、Aspidaは日本語ドキュメントも丁寧に整備されており導入時も安心、とても親切です。
小さな手間が省けるだけで、開発体験は大きく変わります。
ぜひ一度、プロジェクトに取り入れてみてはいかがでしょうか。
Discussion