VScode Thunder Client 変数を定義して使う

概要

• 別記事で導入方法を紹介したVScodeの拡張機能 Thunder Clientにて変数を定義して使用する方法をまとめる。

前提

• 導入方法は下記の記事で紹介している。
  • VScode Thunder Client の導入方法
• 導入が完了し簡単なレスポンスとリクエストで動作確認ができているものとする。

やること

• リクエストのURLで使用しているlocalhost:8000の値を変数として定義し、複数のリクエストで値を使い回せる様にする。（筆者はhttp://を省略していますが明示的に記載したほうが良いかもしれません。）

  変数名	値
  host	localhost:8000

設定グループの作成と変数の定義

1. 設定グループの作成

   1. VScodeのサイドバーのThunder Clientのアイコンをクリックする。

   2. 表示されたThunder Clientのメニューで「Env」をクリックする。

   3. 表示されたメニューの「New Environment」をクリックする。

      

   4. VScodeのエディター上部に設定グループ名の入力欄が表示されるので任意の設定グループ名を入力してEnterを押下する。コレクション名と同じものにしておくと識別しやすいかもしれない。（設定グループ名は後から変更できる。）

      

   5. 「Env」に今追加した設定グループが追加される。

      

2. 変数の定義

   1. 設定グループをクリックする。

      

   2. エディター部分に設定グループの詳細が表示される。

      

   3. 「Variable Name」に「host」と入力し、「Value」に「localhost:8000」と入力し「Save」をクリックする。「Save」の左部に「Save Compoleted」的な文字列が出れば保存できている。（筆者はhttp://を省略していますが明示的に記載したほうが良いかもしれません。）

      

定義した変数の呼び出し

1. リクエストの詳細を開く。

2. 今回はリクエストを投げるURLのホスト部分を変数hostに格納したため、hostを{{}}の中に記載して設定した変数を呼び出す。URL部分が変更できたら「Send」をクリックしてリクエストを送信する。

   

3. ステータス200と「OK」の文字列が帰ってきたので問題なさそうである。