VSCodeでREST Clientをインストールし、REST APIにGET、POSTメソッドを送信する

3月 10, 2023

1. VSCodeでREST Clientをインストールし、REST APIにGET、POSTメソッドを送信

VSCodeでREST Clientをインストールし、REST APIにGET、POSTメソッドを送信

今回使用した環境

インターネット接続可能のオンラインの環境

64 ビットオペレーティングシステム

Windows 10 22H2

VSCode 1.67.2

REST API は既に存在している前提となっています。この記事で使用しているREST APIはSpring Bootで事前に作成しておきました。

手順

REST Client をインストールして使用する準備

１．VSCodeにて画面左の拡張機能のボタンをクリック、検索で「rest」を入力することで「REST Client」が表示されます。REST Client のインストールボタンをクリックします。

インストールを完了しても、画面に変化はありません。どのように使い始めるのかちょっと悩むところです。

２．任意の場所にフォルダを作成します。筆者の環境では「D:\github\RestClient」としました。ここにGET、POSTメソッドを送信するためのファイルを作成していきます。

３．作成したフォルダをVSCodeで開きます。まだ空フォルダなのでなにもないですね。

GETメソッドを送信

既にREST APIとして用意済みの勘定科目データの一覧を取得するAPI ( kamoku-select/init ) に対してGETメソッドを送信してみます。

※APIについては既にあるものを使うか、個々で用意してください。

１．「KamokuSelectInit.http」というファイルを作成し、中にGETメソッドを書きます。

※.httpの拡張子は.restでも良いようです。

そして「Send Request」をクリックすることでGETメソッドを送信します。

２．画面右側にレスポンスが表示されました。勘定科目のデータが正常に返ってきてますね。

POSTメソッド送信

次は条件を指定して勘定科目のデータを１件取得するAPI ( kamoku-select/search ) に対してPOSTメソッドを送信してみます。

１．「KamokuSelectSearch.http」というファイルを作成し、中にPOSTメソッドを書きます。

そして「Send Request」をクリックすることでPOSTメソッドを送信します。

※ここではリクエストで勘定科目コード「00000001」のデータを送信し、レスポンスで「00000001」の勘定科目データを取得するという仕様となっています。

※POSTメソッドを書く際の注意点としてヘッダとボディの間 ( ここでは3行目 ) には空行を入れておく必要があります。

２．画面右側にレスポンスが表示されました。勘定科目「00000001」のデータが正常に返ってきてますね。

変数を使う

ここまではホスト名とポート番号を「localhost:8080」と固定で書いていましたが、実際は環境によって変わるかもしれないので変数化したいですね。

１．F1キーを押下してコマンドパレットに「settings」と入力します。「基本設定：ワークスペース設定を開く (JSON)」というメニューが出てくるのでクリックします。

２．以下の赤枠のように「settings.json」というファイルが作成されます。ここに変数を書いていきます。ワークスペース内で有効となる変数が定義できるようですね。

画面右側は変数を定義しています。

開発用と本番用として環境変数を作成してみました。「$shared」については開発用、本番用にて共通となる変数です。

{
  "rest-client.environmentVariables": {
    "$shared": { // 共通の環境変数
      "kamokuCd": "00000001",
    },
    "development": { // 開発用の環境変数
      "host": "localhost:8080",
    },
    "production": { // 本番用の環境変数
      "host": "test.jp:8080",
    }
  }
}

３．どちらの環境の変数を適用するかを指定します。F1キーを押下してコマンドパレットに「switch」と入力します。

「Rest Client: Switch Environment」のメニューをクリックします。