VSCodeでRESTAPIへのリクエストを行いたい
APIサーバのテストをする際に、HTTPリクエストを投げてレスポンスを確認をしたい場合があります。
そういった場合に使えるメジャーなツールとしては、「Postman」があります。私も今までPostmanを使用していました。
しかし、ソースコード開発はVisual Studio Code(VSCode)を使用しているので、ちょっとリクエストを試そうと思った時にいちいちPostmanを起動するのは面倒に感じていました。
そこで、VSCodeで同じようなことができる拡張機能はないかと思い調べてみたところ、
以下の２つの拡張機能が人気がありそう、ということがわかりました。
1.REST Client
VSCode拡張機能「RESTClient」
2.Thunder Client
VSCodeの拡張機能「ThunderClient」
※スクリーンショットはいずれも2021/11/27時点のものです。
REST Clientは2016年にリリース、Thunder Clientは2021年にリリースなので、ダウンロード数としてはREST Clientに軍配があがりますが、どちらも最終更新が2021年で更新されているプラグインであること、また、どちらも評点が高いことがわかります。「REST」というワードで検索すると、他にも多くの拡張機能が出てきますが、ダウンロード数と評点の組み合わせで見るとこの２つが上位になるかと思います。また、「VSCode REST 拡張機能」でGoogle検索すると、この２つに関する記事が上位でした。
どちらもVSCodeの「拡張機能」から検索し、「インストール」ボタンを押せば、インストールできます。
REST Clientの使い方と特徴
REST Clientの使い方
REST ClientはVSCode上の左メニューには追加されないので、一見どのように使えば良いのかわかりませんが、
まずは新しくファイルを作成し（保存場所はどこでも構いません）、拡張子を「.http」か「.rest」として保存しましょう。
次に、ファイルにどのようなリクエストを送信するのかを記述します。
例えば、GETリクエストであれば、
GET https://shiraberu.tech
と記述して保存します。
※GETメソッドの場合、先頭の「GET」は無しでもOK。
コマンドパレットで「rest」と入力するとREST Clientで実行できるコマンドがわかりますので、
今回はそこから「Send Request」を指定します。
RESTClientコマンドパレット
POSTリクエストの場合は、以下のように記述します。
POST https://shiraberu.tech HTTP/1.1 (←URLは適当です。)
content-type: application/json
{
"name": "xxx"
}
また、「###」で区切ることで複数リクエストを１つのファイルに記述できます。
実行結果としては、カーソルがアクティブになっている場所のリクエストの実行結果が表示されます。
他にも変数を使うことができたり、リクエストの履歴を確認できたり、さまざまな機能があります。
詳細な説明は以下をご覧ください。
REST Clientの特徴
– テキストファイルで管理ができるため、管理がしやすい。Gitなどでバージョン管理もできるし、複数人での共有もしやすい。
– 生のHTTPリクエストに近い形でリクエストを作成でき、生のレスポンスコードが返ってくるため、リクエストとレスポンスの構造を知るには良い。curlをよく使う人など、テキストベースで複雑なリクエストを作成することに慣れている人や、生データの構造を知りたい人にはおすすめ。
– ただ、送信するデータやクエリの指定なども、もれなく、構文ミスなく指定しなければならないため、使い勝手は後述するThunder Clientに軍配が上がると思う。
Thunder Clientの使い方と特徴
Thunder Clientの使い方
インストールするとVSCodeの左メニューに以下のようなアイコンが表示されます。
これをクリックすると以下のような画面が表示されます。
ThunderClient画面
「New Request」ボタンをクリックすると、右側にリクエスト設定画面が表示されるので、
そこでメソッドやクエリ、POSTデータなどを設定し、「Send」ボタンを押下すれば、一番右側にレスポンスが表示されます。
レスポンス表示エリアの株の「Preview」ボタンを押せば、レスポンス画面がある場合は、画面プレビューが表示されます。
詳細な説明は以下をご覧ください。
Thunder Clientの特徴
– Postmanと画面が似ているため、Postmanを使ったことがある人には馴染みやすいUI。
– Postmanを使ったことがなくても、UIが非常にわかりやすいので、操作性は高いと思います。
– REST Clientのように全てテキストベースで記述するわけではないので、送信したいリクエストを作成しやすいと思います。
REST ClientとThunder Clientを比べてみた感想
個人的にはPostmanを使ってきた経験があるので、Thunder ClientのUIが非常に馴染みやすく、今後はこれを使用しようかと思いました（Postmanからのインポート機能もあるようです）。
REST Clientはテキストベースで非常にシンプルであることが良いと思いました。
また、HTTPプロトコルについて勉強する場合には理解を深めるツールとして有効かと思います。
