2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

超初心者向けPostmanでAPIをパケットキャプチャする方法

Posted at

どうも、tanakashinichiです!この記事では、その時のPostmanでのcURLインポート方法と、さらに「え、こんなに簡単なの!?」って衝撃を受けた、もっと楽な方法を紹介しますね。

そもそも、なんでブラウザのAPIリクエストをPostmanで試したいの?

これ、結構あるあるだと思うんですけど、

  • ブラウザで動いてるアプリのAPIの挙動を確認したい
  • 特定の操作をした時のAPIリクエストを再現してデバッグしたい
  • 他の人がブラウザで叩いたAPIリクエストを共有してもらって試したい

みたいな時に、ブラウザの開発者ツールで見たリクエストをPostmanに持っていけると、めちゃくちゃ捗るんですよね。

PostmanでcURLをインポートする手順

まずは、僕が最初に試したPostmanでのやり方から。これはこれで知っておくと便利です。

ステップ1:ブラウザの開発者ツールでcURLをコピー

これはPostmanの機能じゃないんですけど、APIをキャプチャする第一歩ですね。
github.png

  1. まずは、調べたいAPIリクエストが発生するページをブラウザで開きます。
  2. キーボードの F12 キーを押して、開発者ツールを開きます。(Macなら Option + Command + I とかですね)
  3. 開発者ツールの「Network」タブに切り替えます。
  4. ページを操作して、目的のAPIリクエストを発生させます。Networkタブにリクエストがずらっと表示されるはずです。
  5. 目的のリクエストを見つけたら、右クリックして「Copy」→「Copy as cURL (bash)」を選びます。これで、そのリクエストのcURLコマンドがクリップボードにコピーされます。

ステップ2:PostmanにcURLをインポート

さあ、コピーしたcURLをPostmanに持っていきましょう。
postman-2.1.png

  1. Postmanを開きます。
  2. 画面左上の方にある「Import」ボタンをクリックします。
  3. さっきコピーしたcURLコマンドを貼り付けます。
  4. 基本的にはそのまま「Import Into Collection」でOKです。
  5. これで、コピーしたAPIリクエストがPostmanのCollectionにインポートされます。

ステップ3:Postmanでリクエストを送信&結果を確認

インポートできたら、あとはPostmanで実行するだけです。
postman-2.2.png

  1. インポートされたリクエストを選びます。
  2. 「Send」ボタンをクリック!
  3. 画面下側の「Response」タブに、APIからの応答が表示されます。ステータスコードとか、レスポンスボディとか、ヘッダーとか、詳しく確認できますね。

うん、これでブラウザで見たリクエストをPostmanで再現できた!…って、最初は感動したんですけど、正直、この「インポート」の操作がちょっと手間だなって感じたんですよね。特に、色々なリクエストをサクッと試したい時には、もうちょっとスムーズにできないかな〜って。

え、こっちの方が断然楽じゃん!もっと簡単なAPIパケットキャプチャ方法

PostmanでのcURLインポートも便利なんですけど、実はもっと直感的で簡単な方法を見つけちゃったんです。それが、最近僕がAPI開発でメインで使ってるApidogを使う方法です。

Apidogなら、PostmanみたいにCollectionにインポートするっていう堅苦しい感じじゃなくて、もっと気軽にcURLを読み込んで、すぐにリクエストを試せるんですよ。

ApidogでcURLをインポートする手順

やり方はPostmanよりシンプルです。

  1. Apidogを開いて、適当なプロジェクトを開くか、新しく作ります。(プロジェクト管理もApidogは便利なんですよね)
  2. 画面左上の「+」ボタンの横にある「インポート」ボタンをクリックします。
  3. インポート方法の選択肢が出るので、「cURL」を選びます。
  4. Postmanの時と同じように、ブラウザでコピーしたcURLコマンドをテキストエリアに貼り付けます。
  5. 「確定」ボタンをクリック!
    apidog-3.2.png

これだけです!PostmanみたいにCollectionを選ぶとか、そういうステップがないんですよ。貼り付けて確定するだけ。

Apidogでリクエストを送信&結果を確認

cURLを読み込んだら、すぐにリクエスト画面が開きます。
apidog-3.3.png

  1. 読み込まれたリクエストの内容(URL、メソッド、ヘッダー、ボディなど)を確認します。
  2. 「送信」ボタンをクリック!
  3. 画面下側にレスポンスが表示されます。Postmanと同じように、ステータスコードやボディ、ヘッダーなどが見れます。

どうですか?Postmanのインポート手順と比べると、Apidogの方が圧倒的にステップが少ないし、直感的じゃないですか?「ブラウザでcURLコピー」→「Apidogに貼り付け」→「送信」の3ステップで、すぐにAPIを試せるんです。

Postmanだと、インポートしたリクエストがCollectionに保存されるのは良い点でもあるんですが、「ちょっとだけ試したい」っていう時には、Apidogのこの手軽さが本当に助かります。

まとめ:PostmanもApidogも、使い分けが大事かも

今回はPostmanとApidogを使ったcURLインポート(パケットキャプチャ)の方法を紹介しました。

Postmanは長年使われている定番ツールで、機能も豊富です。Collectionを使ったAPI管理やテスト自動化など、しっかり作り込みたい場合にはやっぱり強いなと感じます。

一方、Apidogは今回紹介したcURLインポートの手軽さ以外にも、API設計、ドキュメント自動生成、Mockサーバー機能、そしてテスト機能まで、API開発に必要な機能が全部詰まったオールインワンツールです。特にチームでAPI開発を進めるなら、Apidogで全部まとめて管理できるのは大きなメリットだと思います。日本語にもしっかり対応してるし、UIも分かりやすいので、初心者の方にもおすすめです。

個人的には、サクッとAPIの挙動を確認したい時や、他の人からcURLをもらって試したい時はApidog、腰を据えてAPIのテストスイートを組んだり、Collectionを整理したりする時はPostman、みたいな使い分けが良いのかなと感じています。

皆さんもぜひ、自分の開発スタイルに合ったツールを見つけて、API開発・テストを効率化してみてください!

2
2
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
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?