API開発ツール

REST Client

概要

REST Client（RESTクライアント）は、VS Code用の軽量HTTPクライアント拡張です。シンプルなテキストファイル（.http/.rest）でAPIリクエストを定義し、エディタ内で直接実行できます。Git管理が容易で、UIを持たないミニマルな設計により、開発者のプライバシーと効率性を重視するチームに根強い人気があります。

詳細

REST Clientは、Visual Studio Code内でHTTPリクエストを送信し、レスポンスを表示するための拡張機能です。260万回以上ダウンロードされている人気の高い拡張で、その特徴は徹底的にシンプルな設計にあります。リクエスト設定は.httpまたは.rest拡張子のプレーンテキストファイルに記述し、複雑なGUIは一切使用しません。この設計により、PostmanやFiddlerでは困難なリクエスト設定の共有とバージョン管理が簡単に実現できます。シンタックスハイライト、GraphQLサポート、multipart/form-data対応、ファイルアップロード、プロキシサポート、SOAPリクエスト送信など、基本的なAPI開発で必要な機能を網羅しています。複数のリクエストを単一ファイルに記述でき、リクエスト履歴の管理も可能です。テキストベースの設定により、チーム間でのAPI仕様共有、ドキュメント化、CI/CDパイプラインとの統合が自然に行えます。VS Codeエコシステムとの完全統合により、開発ワークフローを中断することなくAPI開発が進められます。

メリット・デメリット

メリット

• テキストベース設計: プレーンテキストでリクエストを定義、可読性が高い
• Git完全連携: バージョン管理と差分確認が自然に行える
• 軽量ミニマル: UIを持たず、VS Code内で完結する設計
• 共有性: ファイルベースでチーム共有やドキュメント化が容易
• 学習コスト低: シンプルなHTTP構文で直感的に理解可能
• 拡張性: 環境変数、認証、プロキシなど実用的機能を装備
• 無料: オープンソースで完全無料
• GraphQL対応: GraphQLクエリもサポート

デメリット

• VS Code依存: VS Code専用で他エディタでは利用不可
• UI不足: GUIベースの便利機能が制限的
• 複雑操作: 高度なテストやスクリプト機能が限定的
• ビジュアル不足: レスポンス表示がテキストベースのみ
• 学習必要: HTTP構文の理解が必要

参考ページ

• VS Code Marketplace - REST Client
• GitHub - vscode-restclient
• REST Client Documentation
• REST Client Wiki

書き方の例

基本的なHTTPリクエスト（.httpファイル）

# ユーザー取得API
GET https://api.example.com/users/{{userId}} HTTP/1.1
Authorization: Bearer {{accessToken}}
Content-Type: application/json
Accept: application/json

###

# ユーザー作成API
POST https://api.example.com/users HTTP/1.1
Authorization: Bearer {{accessToken}}
Content-Type: application/json

{
  "name": "田中太郎",
  "email": "[email protected]",
  "age": 30,
  "department": "engineering"
}

###

# ユーザー更新API
PUT https://api.example.com/users/{{userId}} HTTP/1.1
Authorization: Bearer {{accessToken}}
Content-Type: application/json

{
  "name": "田中花子",
  "email": "[email protected]",
  "active": true
}

環境変数とファイル分離

# 環境変数ファイル（rest-client.env.json）
{
  "development": {
    "baseUrl": "https://api-dev.example.com",
    "accessToken": "dev-jwt-token",
    "userId": "12345"
  },
  "production": {
    "baseUrl": "https://api.example.com",
    "accessToken": "prod-jwt-token",
    "userId": "67890"
  },
  "local": {
    "baseUrl": "http://localhost:3000",
    "accessToken": "local-token",
    "userId": "test-user"
  }
}

# APIリクエストファイル（api-requests.http）
# @name login
POST {{baseUrl}}/auth/login HTTP/1.1
Content-Type: application/json

{
  "username": "{{username}}",
  "password": "{{password}}"
}

###

# @name getUsers  
GET {{baseUrl}}/users?page=1&limit=10 HTTP/1.1
Authorization: Bearer {{accessToken}}

###

# @name createUser
POST {{baseUrl}}/users HTTP/1.1
Authorization: Bearer {{accessToken}}
Content-Type: application/json

{
  "name": "新規ユーザー",
  "email": "[email protected]"
}

GraphQLクエリとミューテーション

# GraphQLクエリ
POST {{graphqlEndpoint}} HTTP/1.1
Authorization: Bearer {{graphqlToken}}
Content-Type: application/json

{
  "query": "query GetUserProfile($userId: ID!) { user(id: $userId) { id name email posts { id title content createdAt } } }",
  "variables": {
    "userId": "{{currentUserId}}"
  }
}

###

# GraphQLミューテーション
POST {{graphqlEndpoint}} HTTP/1.1
Authorization: Bearer {{graphqlToken}}
Content-Type: application/json

{
  "query": "mutation CreatePost($input: CreatePostInput!) { createPost(input: $input) { id title content author { name } } }",
  "variables": {
    "input": {
      "title": "新しい投稿",
      "content": "GraphQLで作成された投稿です",
      "authorId": "{{currentUserId}}"
    }
  }
}

ファイルアップロードとマルチパート

# ファイルアップロード（multipart/form-data）
POST {{baseUrl}}/upload HTTP/1.1
Authorization: Bearer {{accessToken}}
Content-Type: multipart/form-data; boundary=----boundary123

------boundary123
Content-Disposition: form-data; name="file"; filename="sample.txt"
Content-Type: text/plain

< ./files/sample.txt

------boundary123
Content-Disposition: form-data; name="description"

サンプルファイルのアップロード
------boundary123--

###

# バイナリファイルのアップロード
POST {{baseUrl}}/upload/image HTTP/1.1
Authorization: Bearer {{accessToken}}
Content-Type: image/png

< ./images/logo.png

###

# JSONとファイルの組み合わせ
POST {{baseUrl}}/posts HTTP/1.1
Authorization: Bearer {{accessToken}}
Content-Type: multipart/form-data; boundary=----boundary456

------boundary456
Content-Disposition: form-data; name="metadata"
Content-Type: application/json

{
  "title": "画像付き投稿",
  "tags": ["sample", "upload"]
}

------boundary456
Content-Disposition: form-data; name="image"; filename="post-image.jpg"
Content-Type: image/jpeg

< ./images/post-image.jpg
------boundary456--

認証パターンと設定

# Basic認証
GET {{baseUrl}}/protected HTTP/1.1
Authorization: Basic {{basicAuthToken}}

###

# Bearer Token認証
GET {{baseUrl}}/users HTTP/1.1
Authorization: Bearer {{jwtToken}}

###

# APIキー認証（Header）
GET {{baseUrl}}/data HTTP/1.1
X-API-Key: {{apiKey}}
Content-Type: application/json

###

# APIキー認証（Query Parameter）
GET {{baseUrl}}/search?q=example&api_key={{apiKey}} HTTP/1.1

###

# カスタムヘッダー
GET {{baseUrl}}/custom HTTP/1.1
Authorization: Bearer {{accessToken}}
X-Client-Version: 1.2.3
X-Request-ID: {{$guid}}
X-Timestamp: {{$timestamp}}
User-Agent: RestClient/1.0

プリプロセッシングとポストプロセッシング

# リクエスト前の変数設定
# @note テスト用のタイムスタンプを生成
POST {{baseUrl}}/events HTTP/1.1
Authorization: Bearer {{accessToken}}
Content-Type: application/json

{
  "eventType": "test",
  "timestamp": "{{$timestamp}}",
  "requestId": "{{$guid}}",
  "data": {
    "message": "テストイベント"
  }
}

###

# 動的な値を使用したリクエスト
# @note ランダムな値でテストデータを作成
POST {{baseUrl}}/users HTTP/1.1
Authorization: Bearer {{accessToken}}
Content-Type: application/json

{
  "name": "User-{{$randomInt 1000 9999}}",
  "email": "user{{$randomInt 100 999}}@example.com",
  "timestamp": "{{$datetime iso8601}}"
}

###

# レスポンスからの値抽出と再利用
# @name createSession
POST {{baseUrl}}/auth/sessions HTTP/1.1
Content-Type: application/json

{
  "username": "{{username}}",
  "password": "{{password}}"
}

###

# 前のレスポンスのセッションIDを使用
# @note createSessionのレスポンスからsessionIdを取得
GET {{baseUrl}}/profile HTTP/1.1
Authorization: Bearer {{createSession.response.body.sessionId}}