Leaner Technologiesにおける
aspidaの活用

Leaner Technologies Inc.

黒曜
(@kokuyouwind)

$ whoami

  • 黒曜 / @kokuyouwind

  • 名古屋在住

  • Leaner Technologies Inc. 所属

  • Railsエンジニア

  • Next.js とか AWS 周りも触ってる

https://leaner.co.jp/

We're Hiring!!!

aspidaの活用

OpenAPI Schema定義

サーバサイド
(Rails API)

committee-railsで
スキーマ検証

openapi2aspidaで
型定義を生成

フロントエンド
(Next.js + Aspida)

aspida(aspida/swr)で
APIを利用

システム構成

OpenAPI Schema定義

サーバサイド
(Rails API)

committee-railsで
スキーマ検証

openapi2aspidaで
型定義を生成

フロントエンド
(Next.js + Aspida)

aspida(aspida/swr)で
APIを利用

システム構成

openapi2aspida

OpenAPI Schema定義からAspidaの型定義を生成

  "paths": {
    "/users": {
      "get": {
        "summary": "Get users",
        "responses": {
          "200": {
            "type": "array",
            "items": {
              "$ref": "#/components/schemas/User"
            },
          },
          ...

schema.json

export declare type Methods = {
    /** Return users */
    get: {
        status: 200;
        /** users */
        resBody: Types.User[];
    };
    // ...

api/users/index.d.ts

openapi2aspida - 型定義生成

openapi2aspidaコマンドで型定義ファイル生成

(buildでtscまで合わせて実行)

{
  "name": "api",
  "version": "1.0.0",
  "scripts": {
    "build": "openapi2aspida && tsc",
  },
  "main": "dist/$api.js",
  "types": "dist/$api.d.ts",
  // ...

package.json

openapi2aspida - 型定義利用

import api from 'api'
import aspida from '@aspida/axios'
import axios from 'axios'

const axios_instance = axios.create()
const client = api(aspida(axios_instance, { baseURL: process.env.baseURL }))
export default client

// 以下のように呼び出せる
const response = await client.users.get()

lib/client.ts

型定義にaspidaインスタンスを渡して
APIクライアントを生成する

OpenAPI Schema定義

サーバサイド
(Rails API)

committee-railsで
スキーマ検証

openapi2aspidaで
型定義を生成

フロントエンド
(Next.js + Aspida)

aspida(aspida/swr)で
APIを利用

システム構成

aspida, aspida/swr - データ取得

SWRフックを介してAPIからデータを取得

import client from 'lib/client'
import useAspidaSWR from '@aspida/swr'
import UserProfile from 'components/userProfile'

const Profile: React.FC = () => {
  const {
    data: user
  } = useAspidaSWR(client.user)

  return <UserProfile user={user}/>
}

pages/user/profile.tsx

aspida, aspida/swr - 型情報利用

Componentsのインターフェイスに
aspida型情報を利用

import { User } from 'api/@types'

export interface Props {
  user: User
}

const UserProfile: React.FC<Props> = ({ user }) => {
  return (
      <div>
        ユーザー名: { user.name }
      </div>
  )
}

components/UserProfile.tsx

aspida, aspida/swr - データ更新

aspidaを直接利用してpost/put/deleteを発行し、
mutateでSWR再検証

import client from 'lib/client'

const Profile: React.FC = () => {
  const {
    data: user,
    mutate
  } = useAspidaSWR(client.user)

  const patchUser = async (patch: UserPatch) => {
    const response = await client.user.patch({ body: patch })
    await mutate(response.body)
    // ...

pages/user/profile.tsx

Aspidaの利点

  • 呼び出すパスやパラメタを型検査できる

    • 補完が効いてコーディングしやすい

    • リファクタリング時の修正漏れを防げる

  • openapi2aspidaが賢くて便利

    • componentsの型をそのままモデルとして使える

    • enumをunion typeに変換してくれる
      ( export declare type status = 'pending' | 'complete' )