2024-05-29OpenAPI, Prism

はじめに

こんにちは。システム開発推進部第一グループの坂本です。普段はフロントエンドの開発タスクに携わっています。
今回は、Swaggerドキュメントを使用してコードを書かずにAPIのモックサーバーを作成することが出来るPrismを使ってみたので記事にしました。

なんでやってみようと思ったのか

普段の開発において、APIの開発がある程度終わってからフロントエンドの開発に移る、というフローで業務を進めることが多々あるかと思います。
しかし、バックエンドとフロントエンドの開発を同時に行えたとしたらどうでしょう。『APIの開発待ち』という時間を大幅に削減することが出来ます。また、仮にAPIとフロントの繋ぎ込みの段階で問題が発生した場合、早めにフィードバックを行うことができ、手戻りも最小限に抑えることが出来るのではないのでしょうか。
APIのモックサーバーがあればこのようにフロントエンドとバックエンド、双方の開発効率を向上させることが期待できます。

必要なライブラリのインストール

というわけで、さっそく本題に移ります。
まずは必要なライブラリからインストールしていきます。
PrismのGitHubリポジトリにある通り、以下のコマンドを打ち込みます。お使いの環境に合わせて npmか yarnのどちらかを選択してください。

動作確認

問題なくインストール出来たら、早速動作確認をしていきます。試しに sample.yamlという名前でSwaggerでAPI仕様書を作成してみます。中身はSwagger Editorからコピペしてきたサンプルを使用します。もちろん、既に仕様書がある場合はそちらを使ってみても構いません。
なお、今回は動作確認を簡略化するため、サンプルにある securitySchemes（L794以降）はコメントアウトして認証情報を載せなくてもレスポンスが返ってくるようにしています。同じ条件で試してみたい方は編集したうえで先をお読みください。

yamlファイルが作成出来たら、ファイルが存在しているディレクトリ内で以下のコマンドを打ち込みます。

起動までに多少時間がかかりますが、無事に立ち上がれば以下のようなメッセージが出てきます。

読んでみれば分かる通り、 http://127.0.0.1:4010で立ち上がっているみたいなので、実際に叩いてみようと思います。
私は普段APIを叩くときにTalend API TesterというChromeの拡張機能を使っているので本記事ではこちらのツールを使用しますが、curlコマンドだったり他のツールだったりを使用して試していただいても大丈夫です。
ということで、今回はSwaggerのサンプル仕様書にある GETの /pet/findByStatusを叩いてみます。

するとこのようにちゃんとレスポンスが返ってきました！

ちなみにPrism側ではこんな感じになっています。

なお、今回は動作確認を簡略化するため securitySchemesを無効化しましたが、有効にした場合は以下のように必要な認証情報を載せないと401エラーが返ってきます。

おわりに

意外と簡単に出来ましたね。モックサーバーを立ち上げるだけであれば特別な知識もそれほど必要ないので、バックエンドだけでなくフロントエンドに携わる方もぜひ挑戦してみてください。

参考にしたもの

• Prism | Open-Source HTTP Mock and Proxy Server | Stoplight
• stoplightio/prism: Turn any OpenAPI2/3 and Postman Collection file into an API server with mocking, transformations and validations.
• 【OpenAPI】Prismでモックサーバ作成