JSConf JPで@takepepeさんのスライドでスキーマ駆動開発という言葉が出てきて、はっきりとはよくしらなかったので調べてみた
スキーマ駆動開発とは?
例に倣ってSchema-Driven-Development(SDD)とも略されるみたい
SDDはスキーマ(システムでやりとりするときの契約)の設計を第一に優先し、クライアントとサーバー間のやりとりにそれを使用する開発手法
非SDDによくある問題として、APIのレスポンスの型がフロントエンドチームで期待しているものと違ったり、先にAPIを作ってもらわないとフロントエンド開発ができないなどの問題があるが、SDDの場合は先にフロントエンドチームとバックエンドチームの両者でスキーマをつくりそれに沿ってAPIを実装したり、実装中はそのスキーマをつかったモックでフロントエンド開発を進めるということができるというもの
ここだけだと、なんか当たり前の感覚
あとは、スキーマ作成をフロントエンドチームが主導してやる場合はConsumer Driven Contract
と呼ばれるものと同じものか?なと思った
何をフォーマットにするか
おそらく、どういうフォーマットでスキーマを定義するかが重要で、二者間でスキーマ定義をやるだけならExcelでもいいかもしれないが、その定義書をインプットにしてコードを生成したり、モックを自動でつくってくれるものを選ぶのが最も良い(Excelではそれはできない)
自分の観測範囲だと、OpenAPI
がデファクトスタンダードだと思うが@takepepeさんのスライドでOpenAPIを定義になれているフロントエンドチームの人は少ないと聞いてなるほどと思った
OpenAPIの定義は決まった書き方があるのでエディタを使うのがよい
以前、OpenAPIエディタのStoplightを調べたことがある
OpenAPIをインプットにしたモックサーバーはPrismというStoplight Studioと同じStoplight社のモックサーバーか、以前調べたMocoonが良さそう
とはいえ@takepepeさんのスライドのやり方のようにMSWで考察しながらつくっていくのが現実的というか早い気がする
コード生成
知らなかったとことして、OpenAPIからFetch Clientが生成できるのは知らなかったので試してみた
$ npm install @openapitools/openapi-generator-cli -D
でインストール
package.jsonに以下を定義
"openapi:gen": "openapi-generator-cli generate -g typescript-axios -i ./openapi.yaml -o ./src/client-axios",
実行
$ npm run openapi:gen
それっぽいのが出力された!
こんな感じでつくったスキーマをバックエンドに渡して作ってもらい、問題があれば修正してFetch Clientを再生成する
ここまでやると確かにスキーマ駆動開発感ある