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

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

# インストール方法
`REST Client`は`VScode`の[マーケットプレース](https://marketplace.visualstudio.com/items?itemName=humao.rest-client)からインストールできます。
簡単なインストール方法は以下になります。↓
![rest_install.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017768/8e387cac-4e6a-3da2-0e63-98a2f6b33fa0.gif)
### インストール手順：
1\. VSCodeの左メニューから`Extension`アイコンをクリックして、`Extension`のウィンドーを開きます。
2\. Extensionウィンドーの検索フィルドに`REST　Client`を入力して検索します。
3\. 一覧から`REST　Client`を探して**Install**ボタンを押して拡張をインストールします。
4\. しばらく待っていると、Installボタンが消えてインストールされます。

:::note info
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仕様書](https://qiita.com/api/v2/docs#タグ)

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


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

![rest_ex_1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017768/5dde9322-caa1-f743-55c9-bf577d367f2e.gif)


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

以下の**POST**リクエストの中身を見ていきます。
```swift: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を呼び出すことができます。

```swift: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"
}
```

## ファイル変数
同じ値を複数箇所で使用する場合は、変数にすると便利です。
ファイル変数は以下のように同じファイル内に書きます。
```swift: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リクエストに使いたいので、以下のように実装しました。


```swift: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`ファイルの中に以下のように書くと、環境別の変数を指定することもできます。
例えば **開発環境** と **本番環境** を簡単に切り替えることができるので、とても便利です。

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

```
こんな感じで環境を簡単に切り替えることができます！
![rest_env.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017768/b3425965-1e29-cbe0-b3d7-b66829777a6c.gif)


# 最後に
`REST Client`拡張ツールでは他にもいろんなこともできますが、今回は記者が実際に使用していた機能や使い方を紹介しました。
さらに細かい説明を読みたい方は公式ページをご参照ください。→ [REST Client公式ページ](https://marketplace.visualstudio.com/items?itemName=humao.rest-client)