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リクエストの中身を見ていきます。
// 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を呼び出すことができます。
###
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"
}
ファイル変数
同じ値を複数箇所で使用する場合は、変数にすると便利です。
ファイル変数は以下のように同じファイル内に書きます。
// グローバル変数をここに宣言します。
@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リクエストに使いたいので、以下のように実装しました。
###
// 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ファイルの中に以下のように書くと、環境別の変数を指定することもできます。
例えば 開発環境 と 本番環境 を簡単に切り替えることができるので、とても便利です。
{
"rest-client.environmentVariables": {
"sandbox": {
"baseUrl": "devBaseUrl",
"accessToken": "devAccessToken",
"secretKey": "devSecret"
},
"production": {
"baseUrl": "prodBaseUrl",
"accessToken": "prodAccessToken",
"secretKey": "prodSecret"
}
}
}
こんな感じで環境を簡単に切り替えることができます！
最後に
REST Client拡張ツールでは他にもいろんなこともできますが、今回は記者が実際に使用していた機能や使い方を紹介しました。
さらに細かい説明を読みたい方は公式ページをご参照ください。→ REST Client公式ページ