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

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

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

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

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

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

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

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

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

これはPostmanの機能じゃないんですけど、APIをキャプチャする第一歩ですね。
![github.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4043706/12bbad9d-5747-488d-b8db-05ecb0fb029e.png)

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

### ステップ２：PostmanにcURLをインポート

さあ、コピーしたcURLをPostmanに持っていきましょう。
![postman-2.1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4043706/476a758b-7ba2-49ad-b6cd-40747d94f5ea.png)

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

### ステップ３：Postmanでリクエストを送信＆結果を確認

インポートできたら、あとはPostmanで実行するだけです。
![postman-2.2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4043706/3a5cb479-8254-46ca-8dee-1ed0f95c289b.png)

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

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

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

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

[Apidog](http://www.apidog.com/jp/?utm_source=opr&utm_medium=a2qiita4&utm_content=postman-cURL)なら、PostmanみたいにCollectionにインポートするっていう堅苦しい感じじゃなくて、もっと気軽にcURLを読み込んで、すぐにリクエストを試せるんですよ。

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

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

1.  Apidogを開いて、適当なプロジェクトを開くか、新しく作ります。（プロジェクト管理もApidogは便利なんですよね）
2.  画面左上の「＋」ボタンの横にある「インポート」ボタンをクリックします。
3.  インポート方法の選択肢が出るので、「cURL」を選びます。
4.  Postmanの時と同じように、ブラウザでコピーしたcURLコマンドをテキストエリアに貼り付けます。
5.  「確定」ボタンをクリック！
![apidog-3.2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4043706/238a8914-0c18-491d-8071-8358dd1bb595.png)

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

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

cURLを読み込んだら、すぐにリクエスト画面が開きます。
![apidog-3.3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4043706/449f4aa0-127a-4974-bd33-649867d44e1d.png)

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

どうですか？Postmanのインポート手順と比べると、[Apidog](http://www.apidog.com/jp/?utm_source=opr&utm_medium=a2qiita4&utm_content=postman-cURL)の方が圧倒的にステップが少ないし、直感的じゃないですか？「ブラウザでcURLコピー」→「Apidogに貼り付け」→「送信」の3ステップで、すぐにAPIを試せるんです。

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

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

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

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

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

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

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