API通信確認方法はThunderClientが便利

なぜ記事を書こうと思ったか

サービスの開発中にAPI通信が動作してるか確認する必要があった為、API通信確認方法の備忘録として残す為。

おすすめのAPI通信確認方法

おすすめのAPI通信確認方法としては、コードエディタにVScodeを利用している場合、VSCode拡張機能である「Thunder Client」をおすすめします。

昔は「Postman」というサービスがAPI通信確認方法として利用されており、VScodeを使っていない場合は、利用するのもありだと思いますが、「Thunder Client」はVScodeで完結できる為、非常に便利です。

「Thunder Client」の導入方法と使い方

  • 導入方法(インストールするだけですが笑)

VScode拡張機能を開き、以下のThunder Clientをクリックし、インストールを押して下さい。

スクリーンショット 2022-06-26 18 13 01
  • 使い方

1.拡張機能のマークの下に新しい雷のマークがあるので、クリックして下さい。

スクリーンショット 2022-06-26 18 23 45

2.「New Request」を押して下さい。

スクリーンショット 2022-06-26 18 26 05

3.検索バーの下にあるHeaderタブをクリックして下さい。

スクリーンショット 2022-06-26 18 26 44

4.「Raw」のチェックマークにチェックマークを入れて下さい。

スクリーンショット 2022-06-26 18 31 08

5.HttpHeadersにいらない情報がある為、全て削除して下さい。

6.HttpHeaderにcookieの値やX-CSRFtokenなど必要情報を入力して下さい。

もしわからない場合は、API通信できているか確認したいURLに関連するURLをグーグルで表示し、デベロッパーツールを開いて下さい。

「Network」タブを開き、⌘+Rを押し、RequestHeaderの中身を全てコピーして下さい。

スクリーンショット 2022-06-26 19 00 12

7.コピーした内容をThunderClientのHttpHeaderに貼り付け、検索バーにURLを入力後、Sendをクリックして下さい。

その後、ステータスコードなどが表示されます。

スクリーンショット 2022-06-26 19 03 45

最後に

間違っている箇所があれば、ぜひ教えていただけると嬉しいです。

読んで頂きありがとうございました。