0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

最初に

皆さんは普段APIをどのように管理していますでしょうか?
今まで私は下記のツールを使用しておりました。

  • swagger ui
  • postman
  • エクセル

今回は私が上記のツールよりも優れていると勝手に判断した、
APIDogについて紹介します!
皆さんもぜひ触ってみてください!

概要

詳しくは下記の概要を見てみてください。

APIの設計からテストまでこなせる非常に便利なアプリになっており、
windows/macどちらでも使用することができます。
料金は下記のようになっており、
個人開発であれば無料の範囲で使用することができます。
※チーム開発だと少しお値段高いのが難点............

スクリーンショット 2024-06-18 10.29.33.png

実際に触ってみる

アプリを開き、会員登録を行うとこのような画面になっていると思います。
今回は最初から用意されている個人プロジェクトを開いてみます。

画面はこのようになっており、ペットに関わるAPIが見られます。
スクリーンショット 2024-06-18 10.32.38.png

今回はサンプルプロジェクトの「+」をクリックし、
新しいAPIを作ってみます。

まずは上から

  • パス名
  • API名
  • API説明
  • リクエストパラメーター

これらを設定しました。
リクエスト部分に関しては、クエリパラメーターやbody等リクエスト部分はかなりカスタマイズできます。
またtypeに関しても、stringやintegerやdateなど幅広く選択することができ、必須等も選択できます。

スクリーンショット 2024-06-18 10.42.03.png

レスポンスの部分で返却する値を設定できます。
こちらもリクエスト同様値の型を設定できます。
追加ボタンを押すことで、バリデーションエラーの場合や、サーバーエラーの場合なども設定できます。スクリーンショット 2024-06-19 1.17.14.png

スクリーンショット 2024-06-19 0.51.16.png

例を追加を押すことでこのようなダイアログが開きます。
ここでJSONの形で例を記述することが可能です。
先ほどレスポンスでidとemailを指定したので、そのように記述することも可能ですが....
スクリーンショット 2024-06-19 0.51.49.png

自動生成をクリックすることで、
このようにAPIDogによる自動生成が走りダミーデータを作ってくれます!
値はダミーデータになっているので、変更することも可能です。
スクリーンショット 2024-06-19 0.52.23.png

少し手直ししましたが、このように設計完了しましたので、実行することにします。
スクリーンショット 2024-06-19 1.17.14.png

タブの実行ボタンをクリックすることで、このような実行画面が表示されます。
このまま送信としたいところですが、APIのURLというのは、
/users」ではなく、「http://localhost/users」のような形になると思います。
スクリーンショット 2024-06-19 1.18.40.png

右上のハンバーガーメニューをクリックすることで、環境設定を行うことができ、
本番環境や、テスト環境などのURLを設定することができます。
スクリーンショット 2024-06-19 1.22.31.png

今回はローカルMockを指定しました。
ローカルMockというのは、APIDogや用意しているもので特段環境を立ち上げていなくても、
成功例通りのレスポンスを返却確認することができます。
実装が間に合っていないが、フロントエンドでの実装で仮でもAPIが欲しいという場合に使用できます。
こちらはアプリ版のみ使用できる機能だと思われます。
スクリーンショット 2024-06-19 1.24.28.png

実行をクリックすると、設計したAPIが返却されました!

スクリーンショット 2024-06-19 1.29.37.png

右下にステータスが表示されており、
設計通りのAPIが返却されていれば何も表示されませんが、
違っていればエラー文が表示され、何が違うのか確認できます。

ただ先ほど設定した例とは違ってまたダミーデータになっています...
理由としてはここの返却される値はレスポンス設定したものになっており、
例を参照しているわけではありません。

フロントエンドの方のために、設定したい場合は二つパターンがあります。
一つ目は変更タブからレスポンス部分のMockというところに値を入れる方法です。
こちら設定すると必ずそのように返却されます。
スクリーンショット 2024-06-19 1.33.15.png

二つ目は成功例をそのまま設定する方法です。
こちらは配列等を使用する場合に非常に便利です。
成功例の右のところにMock期待というボタンがあるのでクリックしてください(Mというアイコンです)
スクリーンショット 2024-06-19 1.37.17.png

このように名前を設定して保存してください。
スクリーンショット 2024-06-19 1.37.38.png

再度実行するとこのようにレスポンスが先ほど設定したものへと変更されています!
※もし変化がない場合は、高度なMockをクリックして設定を確認してみてください。
スクリーンショット 2024-06-20 0.30.14.png

最後に

以上が設計から実行までの流れでした。
UIも非常に見やすくこれだけでAPI仕様書・設計書として活躍できると思います!
他にもテーブルをインポートしたり、テストケースを書いて自動テストを行ったりとかなり高機能なので、
機会があれば紹介したいと思います!
ありがとうございました。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?