OpenAPI仕様書に沿った通信をしているかチェックするChrome拡張機能「ばりっどーぬ - OpenAPI Valid Dog」をリリースしました！
※本拡張機能は、読み込んだ仕様書や通信データを外部サーバーへ送信せず、すべてブラウザ内のみで完結して処理しています。機密性の高いプロジェクトでも安心してご利用いただけます。
はじめに
バックエンドチームとフロントエンドチームを繋ぐ一番の架け橋はOpenAPI仕様書だと思います（Excelじゃダメカナ😅）。
バックエンドがOpenAPI仕様書通りに値を返さない場合、結合テストで「謎のエラーが発生している...大量のデータのどれかが間違ってそう...」のような絶望感を味わうことになります。
文字列として定義しているものを数値で返却してきたり、オブジェクトの階層が間違っていたり...ひとつひとつ潰すのは大変ですよね。
僕もこの一年間はそういう問題に直面して、頭を抱えていました。常に通信を監視・バリデーションして、OpenAPI仕様書と少しでも乖離があれば通知する仕組みがあればいいのに...
ないなら作ればいいですよね。
ということで作成したChrom拡張機能が「ばりっどーぬ - OpenAPI Valid Dog」です！
チームリーダーになってからプログラムを書くことはずいぶん減ったので、業後の楽しみとしてChrome拡張機能を楽しく作りました。
どんな拡張機能なのか
ユーザー登録・一覧・詳細を定義したOpenAPI仕様書とデモアプリを使用して説明します。
レスポンスが間違っている場合は以下のように検知されます。エラーの理由までちゃんと表示されます（英語限定ですが）。
以下の例ではEnumで定義されていない値を返却しているためエラーになります。
リクエストが間違っている場合も当然検知可能です。
今回の例では電話番号をリクエストする際に、定められた正規表現に沿っていない旨のエラーが表示されています。
活用シーン
フロントはバックエンドのレスポンスが定義通りになっていることを前提に作ることが多いと思うので、「結合テストで謎のエラー...データのどれかが間違ってそう...」みたいなシチュエーションはこのツールを使えば一発で解決します。
OpenAPI仕様書は一般的に多く普及しているフォーマットなので多くのプロジェクトにおいてはすでにあるものだと思います。本アプリはChrome拡張機能なので、とにかく多くのWebアプリにそのまま適用できるのがアピールポイントです。
使い方
Chrome Web Storeからインストールします。
DevToolsを開く（F12 または 右クリック→検証）
上部のメニューから「ValidDog」を選択します。
お好みで言語設定を変更できます。
「仕様書」ボタンを押すとOpenAPI仕様書の読み込みが可能です。
yml,yaml,json拡張子に対応しています。
読み込みが完了したらダイアログを閉じてください。
DevToolsのValidDogを開いている間は全てのリクエストが監視されます。
「仕様書にマッチするもののみ」にチェックを入れておくと、OpenAPI仕様書に定義されているもののみに表示を絞って表示が可能です。
ソースコード
MITライセンスです！
よければスターをいただけると励みになります！
さいごに
今年は本業が忙しく、なかなか個人開発の時間が取れませんでしたが、やはり自分の「困った」を解決するツール作りは最高に楽しいですね。
「ここをもっとこうしてほしい！」などのフィードバックがあれば、ぜひGitHubのIssueやコメント欄で教えてください。
来年もバリバリ開発していきましょう。良いお年を！
参考: Chrome拡張機能をChromeウェブストアで公開するまでの手順のまとめ
参考にさせていただいてます。ストア公開は初めてだったので非常に助かりました。