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

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

#拡張機能

#VSCode（Visual Studio Code）

#VSCode拡張機能

藤井元貴

2019.12.02

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

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

curlコマンド
Postman
Insomnia REST Client
Chromeの拡張機能
など

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

REST Client - Visual Studio Marketplace

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

そのままですね。

あとから同じテストができる
別の人も同じテストができる
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）を開きます。

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

    "rest-client.environmentVariables": {
        "$shared": {
            "version": "v1",
            "email": "[email protected]"
        },
        "dev": {
            "host": "dev.hoge.jp",
            "version": "v2"
        },
        "stg": {
            "host": "stg.hoge.jp",
        },
        "prod": {
            "host": "prod.hoge.jp",
        }
    }

設定後、コマンドパレットから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": "[email protected]",
  "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のテストをするとき、役に立ちそうです。