aspida を用いた快適フロントエンド開発
前書き
こんにちは。 株式会社エビリーの ishikawa と申します。
今回 millvi の管理画面を 0 から作成することになり、その際に aspida を使用した開発をしたため、その結果などについて書いていきます。
フレームワークと主な使用ライブラリ
選定理由
Next.js
zero-config である Next.js の恩恵を受けたく、Next.js を採用しました。
フロントエンドの知見が少ないチームだったため、特に設定をすることなく最初から最適化されているものを使用する恩恵は大きかったです。
Chakra UI
CSS をほとんど意識せずにデザインを実現できることが選定理由のほとんどです。バックエンドエンジニアが多いチームだったので、できるだけ CSS を書かずロジック部分に集中できます。
figma にもコンポーネントがあるのでデザインも組みやすいです。
また、レイアウトを組むのが苦手な人でもopenchakra でぽちぽちとレイアウトを作れるのも大きな理由です。
Redux-toolkit
Redux のボイラープレートは多いですが、比較的簡単に設定ができ、初めて Redux に触れる人でもとっかかりやすいため RTK を選びました。SWR を使用しても良かったのですが、画面の将来的な機能に未確定な部分が大きかったため、Redux を導入しています。
@aspida/axios （aspida）
- API のリクエスト/レスポンスに型を付与できる
- API のリクエストを文字列ではなく、プロパティ経由で行えるようになる
TypeScript と aspida で型安全に Vue.js の開発をしている話 #GameWith #TechWith
に記載されている通りなのですが、スキーマが決まっている場合にバックエンドとフロントエンドを同時に開発でき、開発スピードを上げることができます。実際の開発でもレスポンスに型があることで、タイポなどによるプロパティ指定のミスも防止できます。aspida/axios を使用したのは、token処理が存在するため、axios-auth-refreshを使いたかったので aspida/axios を使用しました。
react-table
Chakra UI の Table でソートやフィルターを行いたかったので導入しました。公式のChakra UI + React Table にもサンプルがあり、比較的簡単にソートとフィルタリングを実装できました。
apiクライアントについて
- api クライアントとしてaspidaを使用し、api リクエストは全て
apiClientを経由して行うようにしています。 - api のレスポンスやクエリの型定義はディレクトリ直下の api フォルダに追加し、その型定義をもとにコンポーネントでデータを使用しています。
テスト
テストについては mswを使用しています。今回は OpenAPI を使用していなかったのですが、OpenAPI を使用した場合、スキーマを json にすることでOpenAPI 定義を msw に活用してお手軽モック にあるように msw のレスポンスにそのままスキーマの components を使用でき、さらに便利に開発できるようです。モックデータを自分で書く必要が無いというのは魅力的ですね。
モックデータの使用
OpenAPI で API の仕様が書かれている場合はPrismでモックサーバを立てることができます。しかし、今回の開発ではすでに API が完成しているものもあり、新たに OpenAPI で仕様を定義し直すコストも考え、aspida-mockを使用して簡易的にモックを作成しました。そのモックデータを使用するかどうかを、apiClient.ts において環境変数によってモックデータを使用するかどうかを判定しています。
export const apiClient =
process.env.NEXT_PUBLIC_MOCK === 'active'
? mock(aspida(axios))
: api(
aspida(axios, {
baseURL: process.env.NEXT_PUBLIC_API_URL,
})
);
まとめ
aspida は初めて使いましたが、かなり楽に画面を作成できました。特にプロパティのタイポや API からのレスポンスの型が決まっているというのは開発スピードを高めてくれます。
また、OpenAPI の components に使用するデータの型を設定しておくと、わざわざ types フォルダを作成しなくても openapi2aspidaが生成してくれる@typeフォルダから型を取ってくれば良いので型情報が集約できそうです。今後は OpenAPI を使用した開発にもチャレンジしたいですね。
Discussion