REST Clientの使い方 - VSCodeで簡単にAPIリクエスト

概要

REST Client は Visual Studio Code 上で HTTP リクエストを送信し、レスポンスを直接確認できる拡張機能です。
API 開発や検証を VSCode 内で完結させることができます。

導入

1. VSCode の拡張機能一覧から REST Client をインストール
   

2. 拡張子 .http または .rest のファイルを作成

基本的な使用方法

GET リクエスト

作成したファイルに以下のように記述し、Send Request リンクをクリックしてリクエストを送信します。

GET https://jsonplaceholder.typicode.com/posts/1

POST リクエスト

POST リクエストも同様に記述できます。
データは JSON 形式で送信することができます。

POST https://jsonplaceholder.typicode.com/posts
Content-Type: application/json

{
  "title": "foo",
  "body": "bar",
  "userId": 1
}

複数リクエスト

1つのファイルに複数のリクエストを定義することも可能です。
### で区切ることで、1ファイル内に複数のリクエストを定義できます。

### GET
GET https://jsonplaceholder.typicode.com/posts/1

### POST
POST https://jsonplaceholder.typicode.com/posts
Content-Type: application/json

{
  "title": "bar",
  "body": "baz",
  "userId": 2
}

複数リクエストがある場合、Send Request リンクがそれぞれのリクエストごとに表示されます。

### を使わずにリクエストを連続して書いた場合、
Send Request リンクが1つしか表示されません

GET https://jsonplaceholder.typicode.com/posts/1

POST https://jsonplaceholder.typicode.com/posts
Content-Type: application/json

{
  "title": "bar",
  "body": "baz",
  "userId": 2
}

変数の利用

環境ごとに異なる URL やトークンを変数として定義し、使い回すことができます。

• 定義

@baseUrl = https://jsonplaceholder.typicode.com
@userId = 1

• 利用

GET {{baseUrl}}/posts/{{userId}}

@baseUrl = https://jsonplaceholder.typicode.com
@userId = 1

### GET
GET {{baseUrl}}/posts/{{userId}}

### POST
POST {{baseUrl}}/posts
Content-Type: application/json

{
  "title": "bar",
  "body": "baz",
  "userId": 2
}

認証付きリクエスト

認証が必要な API も簡単にリクエストを送信できます。

Bearer Token

@token = eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

GET https://api.example.com/users/me
Authorization: Bearer {{token}}

利用シーン

• API 開発中の動作確認
• 外部 API の動作検証
• ドキュメントに記載された API の動作確認

補足

• 本記事では、サンプル用に JSONPlaceholderを利用しています。
  JSONPlaceholder はモック API サービスで、GET/POST/PUT/DELETE などの HTTP リクエストを試すことができます。