こんにちは、 Gaji-Labo アシスタントエンジニアの石垣です。
今回は OpenAPI の定義ファイルを Stoplight Studio で書く機会があったため、自身の理解を深めるためにも OpenAPI と Stoplight Studio についてまとめてみます。
OpenAPIとは?
OpenAPI は、REST APIの定義を記述するためのフォーマットである「OpenAPI Specification」の略称です。元々「Swagger」という REST API を設計、構築、文書化、および使用などを行うためのフレームワークが存在し、そこで用いられていたフォーマットが標準化されたものが OpenAPI のようです。
スキーマ駆動開発で分離されているバックエンドとフロントエンドの実装を繋ぎこむために OpenAPI が用いられます。
OpenAPI の定義は JSON や YAML 形式で記述されますが、ツールを使うことで直接 JSON などを書くことなく記述することが可能です。
今回は Stoplight Studio というツールを使って OpenAPI を書いてみます。
Stoplight Studio を使用する
![Stoplight公式サイトのキャプチャ](https://i0.wp.com/blog.gaji.jp/wp-content/uploads/2021/10/c4846a8dded53947d9bc5ca941531a23.jpg?resize=640%2C307&ssl=1)
Stoplight Studio は OpenAPI 定義ファイルの作成と管理のためのツールです。
公式サイトからダウンロードし、起動するとプロジェクトの選択画面が表示されます。
![](https://i0.wp.com/blog.gaji.jp/wp-content/uploads/2021/10/b8d5ce397d3be17bec63b8b2cbf53985.jpg?resize=640%2C344&ssl=1)
今回は新規プロジェクト上で API を定義し、エンドポイントにアクセスすると値が返ってくるサンプルを作成してみます。
OpenAPI で定義できる API やモデル、エンドポイントは、Stoplight Studio では左上のメニューから作成することができます。
![Stoplight Studio の左上のメニューのキャプチャ](https://i1.wp.com/blog.gaji.jp/wp-content/uploads/2021/10/2d71c1566f1b2cc15e9b3b0218f6fdea.png?resize=640%2C420&ssl=1)
まずは API 本体を作成します。作成するとサンプルのモデルが追加されます。
![](https://i1.wp.com/blog.gaji.jp/wp-content/uploads/2021/10/27a204273db6c8cad52fd94d6463c573.jpg?resize=640%2C342&ssl=1)
次にモデルを作成します。API の中にモデルを作成するには、API内のModel
を右クリックして New Model
を選択します。
モデルのスキーマでそのモデルが返す値を定義します。今回は Example という名前で以下のような値を定義しました。
![](https://i0.wp.com/blog.gaji.jp/wp-content/uploads/2021/10/e5cd9166c532b493a31eef9f73add916.jpg?resize=640%2C342&ssl=1)
次にエンドポイントを作成します。今回は example/
で作成しました。
エンドポイント側が 200 応答した時に値が返るようにするため、Schema の TYPE に先程作成したモデルを指定します。
![](https://i2.wp.com/blog.gaji.jp/wp-content/uploads/2021/10/bfee8e7b94939fc39a58e7b26a7bb3b5.jpg?resize=640%2C342&ssl=1)
エンドポイントを作成すると、Mock Server でAPIの確認をすることが可能になります。右上のMocks
を選択し、先程作成した example/
を見てみます。
![](https://i1.wp.com/blog.gaji.jp/wp-content/uploads/2021/10/bfa1bdea83a2738ee312b83228922632.jpg?resize=640%2C342&ssl=1)
エンドポイントにアクセスすると、先程定義した値が Mock で返されているのが分かります。
![定義した値が Mock で返されているブラウザ表示のキャプチャ](https://i1.wp.com/blog.gaji.jp/wp-content/uploads/2021/10/c494a8ff8fac0e3301ddd318dcf3973e.png?resize=640%2C307&ssl=1)
これで一連の定義を行うことが出来ました。
右上のメニューからコードを見ると、実際の定義ファイルが作成されているのが分かります。
![](https://i2.wp.com/blog.gaji.jp/wp-content/uploads/2021/10/c2a24d52506aad0faa061bdb9e00fc64.png?resize=640%2C272&ssl=1)
まとめ
今回は Stoplight Studio で OpenAPI の定義を書く方法についてまとめました。
まだ OpenAPI に関しては勉強途中のため、今後も仕様・書き方の双方を学んでいきたいと思っています。よろしくお願いします!
Gaji-Laboでは、React経験が豊富なフロントエンドエンジニアを募集しています
弊社ではReactの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?
もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です!