【REST Client】REST APIを簡単に試せるVSCode拡張

REST Client

WEBアプリやスマホアプリの開発ではAPIの呼び出しや書き込みなど、必ず使う技術の一つでしょう。
今回は、VSCode内で使えるREST APIが簡単に確認できる拡張ツール：REST Clientを紹介します。
直近のアプリ開発で記者の使い方を共有しながら紹介します！

インストール方法

REST ClientはVScodeのマーケットプレースからインストールできます。
簡単なインストール方法は以下になります。↓

インストール手順：

1. VSCodeの左メニューからExtensionアイコンをクリックして、Extensionのウィンドーを開きます。
2. Extensionウィンドーの検索フィルドにREST　Clientを入力して検索します。
3. 一覧からREST　Clientを探してInstallボタンを押して拡張をインストールします。
4. しばらく待っていると、Installボタンが消えてインストールされます。

Extensionウィンドーはキーボードショートカットで開くこともできます！
• Windows：Ctrl + Shift + X
• Mac：Shift + CMD + X

使い方

では、実際に拡張を使ってみましょう。
REST Clientはファイルの拡張子が.httpか.restの中に動作しますので、まずは.httpのファイルを新規作成します。

基本的な使い方

まずは、一番簡単な例から見ていきます。
実はAPIのURLをそのまま書くだけでAPIが呼べます！
以下のURLはQiitaでFlutterのタグを使っている記事の情報を取得するAPIです。
https://qiita.com/api/v2/tags/Flutter
→ Qiita API仕様書

以下のようにURLを貼り付けますと、すぐに自動認識されSend Requestという文字が上に表示されます。
Send Requestボタンを押すと、実際にHTTPリクエストを呼び出して、そのレスポンスが右側のウィンドーに表示されます。

リクエストタイプの指定がない場合は、デフォルトで GETリクエストになります。

一般的な使い方

次に記者が実際に作業していたた時の使い方を紹介します。(一般的な使い方もこうするでしょう)
もう少し複雑なリクエストを行う場合は、メソッド・ヘッダー・ボデイを含めた、スタンダード RFC 2616 プロトコルに準拠して書きます。

以下のPOSTリクエストの中身を見ていきます。

test.http

// 1.これはリクエスト行になります。
// POST以外に、他のの HTTPリクエスト：GET、PATCH、PUT、DELETE なども対応できます。
// ちなみに、リクエストタイプを指定しない場合は、デフォルトでGETリクエストになります。
POST https://example.com/api/v1/oauth/token
// 2.リクエスト行の直下にリクエストヘッダーを記載します。
Accept: application/json
Content-type: application/json; charset=utf-8
Authorization: Bearer {token}

// 3.リクエストヘッダー下を１行空けて、リクエストボディをJSON形式で記載します。
{
    "login_id": "example_user1",
    "password": "examplePassword1",
    "device_token": "3fc46825012asdf1b8d110006ff8b7021c2da123sv34fg6828a98626b259e234"
}

複数HTTPリクエストを書く

個人的にREST CLIENTが特に気に入っている理由は、１つのファイル内に複数のリクエストを書けることです。
以下の例のように###で行を区切ることで、各HTTPリクエストを分けることができます。
この場合は、各リクエスト行の上にSend Requestが表示され、それぞれのボタンを押すとそのAPIを呼び出すことができます。

test.http

###

GET https://qiita.com/api/v2/tags/Flutter

###

GET https://qiita.com/api/v2/tags/Javascript

###

POST https://qiita.com/api/v2/oauth/token
Accept: application/json
Content-type: application/json; charset=utf-8
Authorization: Bearer {token}

{
    "login_id": "example_user1",
    "password": "examplePassword1",
    "device_token": "3fc46825012asdf1b8d110006ff8b7021c2da123sv34fg6828a98626b259e234"
}

ファイル変数

同じ値を複数箇所で使用する場合は、変数にすると便利です。
ファイル変数は以下のように同じファイル内に書きます。

test.http

// グローバル変数をここに宣言します。
@baseURL = "https://qiita.com/api/v2"
@loginId = "example_user1"
@password = "examplePassword1"
@deviceToken = "3fc46825012asdf1b8d110006ff8b7021c2da123sv34fg6828a98626b259e234"

###

GET {{baseURL}}/tags/Flutter

###

GET {{baseURL}}/tags/Javascript

###

POST {{baseURL}}/oauth/token
Accept: application/json
Content-type: application/json; charset=utf-8
Authorization: Bearer {token}

{
    "login_id": {{loginId}},
    "password": {{password}},
    "device_token": {{deviceToken}}
}

リクエスト変数

リクエストのレスポンスを変数として使うこともできます。
記者の場合は、認証APIのレスポンスに含まれているトークン値を、他のHTTPリクエストに使いたいので、以下のように実装しました。

test.http

###

// 1.リクエスト変数に宣言したいHTTPリクエストの上に以下のようにリクエスト名 「# @name {変数名}」 を宣言します。
# @name oauthRequest
POST {{baseURL}}/oauth/token
Accept: application/json
Content-type: application/json; charset=utf-8

{
    "login_id": {{loginId}},
    "password": {{password}},
    "device_token": {{deviceToken}}
}

// 2.
// /oauth/token APIのレスポンスを使うため、リクエストの後に宣言する必要があります。
// {{リクエスト名}.(response|request).(body|headers).$.{取得したい値}}
// この場合は、APIのレスポンスの中にある「access_token」を使うので、以下のように書きます。
@authToken = "{{oauthRequest.response.body.$.access_token}}"

###

POST {{baseURL}}/oauth/revoke
Accept: application/json
Content-type: application/json; charset=utf-8

{
    "token": {{authToken}}
}

### 

POST {{baseURL}}/user/get/
Accept: application/json
Content-type: application/json; charset=utf-8

{
    "token": {{authToken}}
}

環境変数

settings.jsonファイルの中に以下のように書くと、環境別の変数を指定することもできます。
例えば 開発環境 と 本番環境 を簡単に切り替えることができるので、とても便利です。

settings.json

{
    "rest-client.environmentVariables": {
        "sandbox": {
            "baseUrl": "devBaseUrl",
            "accessToken": "devAccessToken",
            "secretKey": "devSecret"
        },
        "production": {
            "baseUrl": "prodBaseUrl",
            "accessToken": "prodAccessToken",
            "secretKey": "prodSecret"
        }
    }
}

こんな感じで環境を簡単に切り替えることができます！

最後に

REST Client拡張ツールでは他にもいろんなこともできますが、今回は記者が実際に使用していた機能や使い方を紹介しました。
さらに細かい説明を読みたい方は公式ページをご参照ください。→ REST Client公式ページ