[VSCode] REST Client は変数を使うとAPIの環境やパラメータ変更が楽になる!

Visual Studio Codeの拡張機能「REST Client」は、エディタからHTTPリクエストを発行できます。このとき、様々な変数が使えるため、環境毎(開発・本番など)のAPI切り替えなどを便利に扱えます。
2019.12.02

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

API Gatewayで作成したAPIの動作を確認するとき、何らかのRESTクライアントを使うと思います。

今回は、私が使っているVisual Studio Codeの拡張機能を紹介します。特に変数が使えるため、APIの環境(開発・本番など)やリクエストパラメータの変更がとても楽に行えます。

REST Cliemtの様子

おすすめポイント

たくさんあるので、抜粋してご紹介します。

  • テキストファイルで管理できる
  • 複数のリクエストを同じファイルに書ける
  • 変数が使える
  • curlコマンドを作れる
  • コードスニペットを作成できる
  • など

この中でも、「変数が使える」がとても便利です! 「GETしたResponseのパラメータを参照してPOSTする」や「dev環境とprod環境でAPIのPathを変える」などが変数を使ってお手軽にできます。

テキストファイルで管理できる

そのままですね。

  • あとから同じテストができる
  • 別の人も同じテストができる
  • Gitで管理できる

テキストファイルの拡張子を.httpまたは.restにすると、シンタックスハイライトやコード補完のサポートが受けれます。

GETリクエストの例

GET https://hoge.execute-api.ap-northeast-1.amazonaws.com/Prod/version

POSTリクエストの例

URLの直下がリクエストヘッダーです。複数書けます。リクエストボディは、1行空けて書きます。

POST https://hoge.execute-api.ap-northeast-1.amazonaws.com/Prod/version
content-type: application/json

{
    "id": "1234"
}

複数のリクエストを同じファイルに書ける

###を区切り文字として使用できるため、次のようにすれば、複数のリクエストを同じファイルに書けます!

GET http://foo.co.jp/aaa/bbb

###

GET http://bar.co.jp/xxx/yyy?page=3&count=10

###

POST https://hoge.co.jp/fuga/
content-type: application/json

{
    "id": "1234"
}

変数が使える

変数の種類はいくつかあります。

  • カスタム変数
    • 環境変数
    • ファイル変数
    • リクエスト変数
  • システム変数

環境変数

本番環境、開発環境、などで便利に使えそうです。

VSCodeのユーザ設定(setting.json)を開きます。

VSCodeの設定画面を開く

例えば下記を追記します。内容は任意で変更してください!

    "rest-client.environmentVariables": {
        "$shared": {
            "version": "v1",
            "email": "hoge@xxx.com"
        },
        "dev": {
            "host": "dev.hoge.jp",
            "version": "v2"
        },
        "stg": {
            "host": "stg.hoge.jp",
        },
        "prod": {
            "host": "prod.hoge.jp",
        }
    }

設定後、コマンドパレットからRest Client Switch Environmentを選択し、任意の環境変数を選択します。

Rest Client Switch Environmentを選択する

任意の環境変数に切り替える

現在の設定は、VSCodeの右下に表示されています。ここを選択して変更も可能です。

右下からでも変更可能

このカスタム変数は次のように{{xxx}}で参照します。

post https://{{host}}/{{version}}/users
content-type: application/json

{
    "email": {{email}}
}

ファイル変数

下記のようにファイル内で有効な変数が作れます。

1行の制限があるため、JSONを記述する場合は1行で書きます。

@baseurl = https://hoge.jp/v1
@id = 1111
@name = {"name": "yamada"}

###

GET {{baseurl}}/users/{{id}}

###

POST {{baseurl}}/users

{{name}}

リクエスト変数

特定のHTTPリクエストに名前をつけることができます。これにより、特定のHTTPリクエストの内容等を参照できます。

例えば、ログインAPIを叩いてトークンを取得し、以降はそのトークンを使用するAPIがあるとします。

このとき、下記のように「ログインAPIを叩いて取得したトークンを@token変数に格納して他のAPIで参照」できます。つまり、トークンをコピペする手間がありません!

# @name login
post https://hoge.co.jp/v1/login

{
  "email": "aaa@bbb.co.jp",
  "password": "xxxxxxxxx"
}

###

@token = {{login.response.body.$.token}}

###

get https://hoge.co.jp/v1/users/
Authorization: {{token}}

なお、ログインするAPIは自分で叩く必要があります。その内容が別の箇所で参照可能になります。

次のように環境変数と組み合わせると、異なる環境(開発・本番など)に対するログインと他のAPIアクセスが簡単に記述できます。

# @name login

post http://{{host}}/v1/login

{
  "email": {{email}},
  "password": {{password}}
}

###

@token = {{login.response.body.$.token}}

###

post https://{{host}}/v1/favorite
Authorization: {{token}}

{
  "id": 123,
  "xxx": "aaa"
}

システム変数

あらかじめ用意されている変数です。

  • UUID生成
  • ランダム整数の生成(最小と最大を指定)
  • タイムスタンプの生成
POST https://api.example.com/comments

{
    "request_id": "{{$guid}}",
    "updated_at": "{{$timestamp}}",
    "created_at": "{{$timestamp -1 d}}",
    "review_count": "{{$randomInt 5, 200}}",
    "custom_date": "{{$datetime 'YYYY-MM-DD'}}"
}

私はまだほとんど使ったことは無いですが、時間情報や乱数が必要なAPIのテストをするとき、役に立ちそうです。

さいごに

API開発をしていると、「開発環境にデプロイしてテストしたあと、続けてステージング環境にデプロイして同様にテストして、、、」な事が多いので、とても便利に使えています!

他にもcurlコマンドを生成したり、細かい応答内容が見れたりと便利です。

参考