💡

Stoplight Studio概要・導入方法まとめ

2023/07/31に公開
2

✅ 目的

OpenAPI を使って REST API で型安全な開発スタイルを実践したいです。

OpenAPI 仕様(OAS)は JSON または YAML 形式で記述します。

Stoplight Studio を使うと、リッチな GUI で API 仕様を定義することができます。

この記事では Stoplight Studio の概要と導入方法をまとめます。

✅ 対象読者

  • Swagger などで API 仕様を設計・ドキュメントを作成しているが JSON/YAML 形式で書くのに辛みを感じている人
  • REST API で型安全な開発をしたい人

✅ Stoplight Studio とは

Stoplight Studio は API の設計・API ドキュメントの作成を支援するツールです。

リッチな GUI で API の仕様を定義し、OAS を自動生成します。

「モデル」と「コンポーネント」を定義・再利用することで一貫性を保って効率的に API 設計できます。

GitHub 連携できるので容易にバージョン管理できます。

Postman や OpenAPI などを import できるので、容易に移行できます。

以下が Stoplight Studio の画面イメージです。

  • サイドメニュー:エンドポイント一覧
  • メインエリア :選択したエンドポイントのフォーム

Image from Gyazo

上記のような GUI で OpenAPI の JSON 形式などを意識せずに API を設計できます。

公式ドキュメント
https://stoplight.io/

✅ Stoplight Studio の料金体系

(2023/07/31 時点)

フリープランが用意されています。
1ユーザー・1プロジェクトが上限ですが、ほぼ全ての機能が使えます。

個人開発や技術検証が目的のユーザーにとっては必要十分です。

商用利用前提であれば有料プランを選択するのが無難そうです。

一番安い Basic プランだと
3ユーザー・プロジェクト数無制限・$39/月から始めることができます。
(年間契約の月当たりの料金です。月単位での契約だと料金が上がります)

最新の料金体系については公式ドキュメントを参照してください。
https://stoplight.io/pricing

✅ Stoplight Studio の導入方法

フリープランでの導入方法をまとめます。

  1. pricing 画面の「Try Stoplight for Free」ボタンを押下します。
    Image from Gyazo

  2. メールアドレスを入力し、サインアップします。
    Image from Gyazo

  3. 「click here」をクリックします。
    Image from Gyazo

  4. 企業名とワークスペース URL を入力し「Next」ボタンを押下します。
    Image from Gyazo

  5. 2番で入力したメールアドレス宛に認証コードが送信されます。入力後「Continue」ボタンを押下します。
    Image from Gyazo

  6. アカウント情報を入力します。入力後「Continue」ボタンを押下します。
    Image from Gyazo

  7. 初回登録作業が完了します。プラン画面が表示されます。
    Image from Gyazo

✅ まとめ

  • Stoplight Studio では GUI で API 設計し、OAS は自動生成されるので便利・記述ミスが激減する
  • 「モデル」と「コンポーネント」といった概念で、定義を再利用できるので効率的な API 設計ができる(OpenAPI の仕様なので Stoplight Studio に限らないが)
  • import 機能をサポートしていて、移行が容易
  • GitHub 連携できるので開発プロセスに組み込みやすい

✅ 感想

OpenAPI の仕様言語を理解してなくても GUI で API 設計できるのがとても楽そうです。
これに尽きると思います。

かなり便利なツールなようなので、使いこなしが大事そうな印象でした。
Stoplight Studio の詳細な使い方についても調査・まとめが必要そうです。

有料プランはサクッと導入できるほど安価な価格帯ではないと感じたので、有料プラン導入にはある程度のハードルがありそうだと思いました。

GitHubで編集を提案

Discussion

uchimonuchimon

サービス名はSpotでなくStopで、「Stoplight Studio」だと思います!

みずしまみずしま

ご指摘&zenn初コメントありがとうございます!!
幻覚が見えていたようです!
修正しました!😆