Seu Dev Notes

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

VSCode の拡張機能 REST Client で、.http ファイルに書いた GET / POST リクエストをエディタ内から送信してレスポンスを確認する手順。### で複数リクエストを区切る方法、変数の定義、Bearer Token 認証付きリクエストの書き方まで。

· 461 字 · 2 分
目次 7 sections
  1. 01 概要
  2. 02 導入
  3. 03 基本的な使用方法
  4. GET リクエスト
  5. POST リクエスト
  6. 複数リクエスト
  7. 04 変数の利用
  8. 05 認証付きリクエスト
  9. Bearer Token
  10. 06 利用シーン
  11. 07 補足

概要#

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

GETリクエスト

POST リクエスト#

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

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


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

POSTリクエスト

複数リクエスト#

### で区切ると、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 リンクがそれぞれのリクエストごとに表示されます。

複数リクエスト

CAUTION

### を使わずにリクエストを連続して書いた場合、 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 リクエストを試すことができます。
#VSCode#REST-API
記事一覧