伝えたいこと
- OpenAPI(Swagger)を使って、APIクライアントのコードを自動生成しよう
- コードと仕様書に齟齬がなくなる
- Nullable/NonNull、スペルミス、APIインターフェース変更への追従が確実&簡単になる
- 最初期に導入するほうが効果が高く、途中から導入するのは難しい…
- コマンド例
フロントエンド開発時に困ること
- APIのレスポンスの型を定義するのが手間
- 手で書いたり、JSONから変換したり
- 仕様変更に追従しなければいけない
- Nullable/NonNullの認識ミス
自動生成できないか :tired_face:
Swagger仕様書から作ろう :bulb:
OpenAPI(Swagger)
- Swagger 3.0からOpenAPIに名前がかわっている
- 2021/05/19現在の最新は、3.1.0
- RESTful APIに関するインターフェース定義
- 定義書はJSONファイルやYAMLファイル
OpenAPI Generator
- OpenAPIのスキーマ定義からコード生成できる
- 生成できる言語・FWは多数サポートされている
- 利用方法が多数用意されている
- CLI
- Maven Plugin
OpenAPI Generator
試してみる
サンプルとして公開されている定義ファイルを使います
- Swagger UI: https://petstore3.swagger.io/
- スキーマ定義ファイル: https://petstore3.swagger.io/api/v3/openapi.json
OpenAPI Generator
OpenAPI Generatorをインストール
https://github.com/OpenAPITools/openapi-generator#1---installation
インストール方法が多数用意されているので環境に合わせて利用してください
- :m: Maven Plugin
- :package: npm
- :beer: Homebrew
- :whale: Docker
OpenAPI Generator
Dockerを使って生成する
Mavenのプロジェクトに自動生成コードを追加する
-i
: スキーマ定義ファイルパス(URL可)-g
: どの言語、FWを対象にするか-o
: 生成先ディレクトリ
OpenAPI Generator
使い方
OpenAPI Generator
生成対象言語・FW一覧
-g
で指定できるgeneratorの一覧はこちら
https://github.com/OpenAPITools/openapi-generator/blob/master/docs/generators.md
generatorの設定値もこちらから
TypeScriptの例
package.json
yarn openapi-generate
で生成される
TS_POST_PROCESS_FILE='yarn prettier --write'
: 後処理を指定(ここではフォーマット)--additional-properties=
: generator独自の設定
メリット :+1:
- リクエスト、レスポンスの型に間違いがない
- APIの変更があったときに追従が簡単
- コンパイルエラーによって変更を検知できる
デメリット :-1:
プロジェクトのコード規約に合わないコードが生成される
- 許容する
- generator のオプションをよく読んで頑張る
途中から自動生成に変更するのは難しい(逆も然り)
- HTTPクライアントの実装も生成されるため、それに依存する
- 型定義のみ生成することもできるので、そちらのみ使用するようにする
デメリット
スキーマ定義を生成するライブラリの学習コスト
- ライブラリで複雑な定義を実現しようとするとハマる
- ポリモーフィズムを表現しようとしたときに、oneOf/allOfが狙ったとおりに出力されず時間がかかった :tired_face:
- 定義ファイルを手動で作成し、サーバー・クライアント両方のコードを生成する方針に変えてみる(スキーマ駆動開発)