UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【システム開発】スキーマ駆動開発とは

JSConf JPで@takepepeさんのスライドでスキーマ駆動開発という言葉が出てきて、はっきりとはよくしらなかったので調べてみた

speakerdeck.com

スキーマ駆動開発とは?

例に倣ってSchema-Driven-Development(SDD)とも略されるみたい

SDDはスキーマ(システムでやりとりするときの契約)の設計を第一に優先し、クライアントとサーバー間のやりとりにそれを使用する開発手法

非SDDによくある問題として、APIのレスポンスの型がフロントエンドチームで期待しているものと違ったり、先にAPIを作ってもらわないとフロントエンド開発ができないなどの問題があるが、SDDの場合は先にフロントエンドチームとバックエンドチームの両者でスキーマをつくりそれに沿ってAPIを実装したり、実装中はそのスキーマをつかったモックでフロントエンド開発を進めるということができるというもの

ここだけだと、なんか当たり前の感覚

あとは、スキーマ作成をフロントエンドチームが主導してやる場合はConsumer Driven Contractと呼ばれるものと同じものか?なと思った

何をフォーマットにするか

おそらく、どういうフォーマットでスキーマを定義するかが重要で、二者間でスキーマ定義をやるだけならExcelでもいいかもしれないが、その定義書をインプットにしてコードを生成したり、モックを自動でつくってくれるものを選ぶのが最も良い(Excelではそれはできない)

自分の観測範囲だと、OpenAPIデファクトスタンダードだと思うが@takepepeさんのスライドでOpenAPIを定義になれているフロントエンドチームの人は少ないと聞いてなるほどと思った

OpenAPIの定義は決まった書き方があるのでエディタを使うのがよい

以前、OpenAPIエディタのStoplightを調べたことがある

uga-box.hatenablog.com

OpenAPIをインプットにしたモックサーバーはPrismというStoplight Studioと同じStoplight社のモックサーバーか、以前調べたMocoonが良さそう

uga-box.hatenablog.com

とはいえ@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を再生成する

ここまでやると確かにスキーマ駆動開発感ある