VScode Thunder Client の導入方法

Last updated at 2022-03-22Posted at 2022-03-15

概要

VScodeにThunder Clientと言うリクエストを送る拡張機能を使えるようにするまでの方法をまとめる。

Thunder Clientって？？

API開発時などに使用するアプリケーションにリクエストを送信するためのVScodeの拡張機能
Postmanとほぼ同じ使用感
Githubのリポジトリ
- https://github.com/rangav/thunder-client-support

今回のゴール

VScodeにThunder Clientを導入して簡単なリクエストを投げてみる。
リクエストはコレクションを作成 → コレクション内にフォルダーを作成 → フォルダ内にリクエストを作成とし、ちょっとだけ本当の開発っぽい感じにリクエストを定義してみる。
リクエストを投げる先は筆者のDocker PHPコンテナのLaravelプロジェクトとして、下記のようなOKを返す簡単なルーティングを記載する。（web.phpに記載）
アプリケーションディレクトリ/routes/web.php
```
// thunder client動作確認用
Route::get('/thunder', function(){
    return 'OK';
});
```

導入方法

VScodeを起動する。
拡張機能を検索するウインドウを開き「Thunder Client」と入力する。
1番目にヒットしたものの「インストール」をクリックする。
これで導入そのものは完了である。インストールされるとVScodeのサイドバーにThunder Clientのアイコン（雷のやつ）が追加される。

簡単な確認（コレクション、フォルダ、リクエストの新規作成とリクエスト実行）

VScodeのサイドバーに追加されたThunder Clientのアイコンをクリックする。
コレクションの新規作成
1. 表示されたThunder Clientのメニューで「Collections」をクリックする。
2. メニュー展開用のボタンをクリックして表示されたメニューの「New Collection」をクリックする。
3. VScodeのエディター上部にコレクション名の入力欄が表示されるので任意のコレクション名を入力してEnterを押下する。（コレクション名は後から変更できる。）
4. 「Collections」に今追加したコレクションが追加される。
フォルダーの新規作成
1. 作成したコレクションにカーソルを合わせると三点リーダーが表示されるのでクリックし、展開したメニューの「New Folder」をクリックする。
2. VScodeのエディター上部にフォルダー名の入力欄が表示されるので任意のフォルダー名を入力してEnterを押下する。（フォルダー名は後から変更できる。）
3. コレクション内部に今追加したフォルダーが追加される。
リクエストの新規作成
1. 作成したフォルダーにカーソルを合わせると三点リーダーが表示されるのでクリックし、展開したメニューの「New Request」をクリックする。
2. VScodeのエディター上部にフォルダー名の入力欄が表示されるので任意のリクエスト名を入力してEnterを押下する。（リクエスト名は後から変更できる。）
3. フォルダー内部に今追加したリクエストが追加される。デフォルトでGETのリクエストが作成されるようだ。
4. 作成したリクエストにカーソルを合わせると三点リーダーが表示されるのでクリックし、展開したメニューの「Open in New Tab」をクリックする。
リクエスト実行（皆さんで簡単なレスポンスを返す環境を作っていただきたい。下記はあくまで筆者の場合です。）
1. エディター部分にリクエストの詳細が表示される。リクエストを送るURLを入力して「Send」をクリックする。（筆者はhttp://を省略していますが明示的に記載したほうが良いかもしれません。）
2. 筆者が用意したDocker PHPコンテナ内のLaravelプロジェクトでリクエストを受け取り下記の処理が実行される。
3. リクエストの詳細の下部にレスポンスで帰った内容が表示される。今回はステータスコード200で「OK」と言う文字列が帰ったので問題なくリクエストの送信と受け取りができた模様である。