API開発ツール

Thunder Client

概要

Thunder Client（サンダークライアント）は、Visual Studio Code専用のAPI開発拡張機能です。エディタ内でAPIテストが完結し、開発ワークフローとの統合が抜群です。GUIベースのスクリプトレステスト、コレクション管理、環境変数サポートにより、Postmanの軽量代替として多くの開発者に支持されています。2025年1月の一部有料化後も高い人気を維持しています。

詳細

Thunder Clientは、VS Code内でのAPI開発体験を最適化するために設計された軽量なREST APIクライアント拡張機能です。最大の特徴は、スクリプトを書かずにGUIベースでAPIテストができることです。従来のPostmanでは基本的なテストでも大量のボイラープレートコードが必要でしたが、Thunder Clientではドロップダウンメニューを使用した直感的なインターフェースで、ステータスコードチェックやレスポンス検証を簡単に実行できます。データはローカルに保存され、Gitリポジトリとの統合により、チーム間でリクエストコレクションを共有できます。VS Code内で完結するため、コードエディタとAPIテストを行き来する必要がなく、開発効率が大幅に向上します。環境変数機能では、暗号化環境サポートにより、トークンやAPIキーなどの機密情報を安全に管理できます。GraphQLサポート、OAuth 2.0認証、AWS認証、NTLM認証など、現代のAPI開発で必要な機能を包括的に提供しています。Postmanコレクションのインポート機能により、既存のワークフローからの移行も容易です。

メリット・デメリット

メリット

• VS Code完全統合: エディタ内でAPIテストが完結、ワークフロー中断なし
• スクリプトレステスト: GUI操作のみで基本的なテストが実行可能
• 軽量高速: VS Code拡張として動作し、リソース消費が少ない
• Git統合: プロジェクトファイルとしてリクエストを管理、チーム共有が容易
• 暗号化環境: 機密情報を暗号化して安全に保存
• 豊富な認証: OAuth 2.0、AWS、NTLM、Bearer認証などに対応
• インポート機能: Postmanコレクションから簡単移行
• ローカルストレージ: クラウド依存なしでプライバシー保護

デメリット

• VS Code依存: VS Codeでしか利用できない制約
• 有料化: 2025年1月以降、商用利用は有料プランが必要
• 機能制限: Postmanと比較して高度な機能が制限的
• エコシステム小: プラグインや拡張機能の選択肢が少ない
• チーム機能: エンタープライズ向けコラボレーション機能が限定的

参考ページ

• Thunder Client公式サイト
• VS Code Marketplace
• GitHub - Thunder Client Support
• Thunder Client Documentation
• Thunder Client Pricing

書き方の例

基本的なHTTPリクエスト

// Thunder Client GUI設定例
{
  "method": "GET",
  "url": "https://api.example.com/users/{{userId}}",
  "headers": {
    "Authorization": "Bearer {{accessToken}}",
    "Content-Type": "application/json",
    "Accept": "application/json"
  },
  "params": {
    "page": "1",
    "limit": "10"
  }
}

// 環境変数設定
{
  "baseUrl": "https://api.example.com",
  "accessToken": "your-jwt-token",
  "userId": "12345",
  "apiVersion": "v2"
}

POSTリクエストとJSONボディ

// リクエスト設定
{
  "method": "POST",
  "url": "{{baseUrl}}/users",
  "headers": {
    "Authorization": "Bearer {{accessToken}}",
    "Content-Type": "application/json"
  },
  "body": {
    "name": "田中太郎",
    "email": "[email protected]",
    "age": 30,
    "department": "engineering",
    "skills": ["JavaScript", "Python", "React"]
  }
}

// GUI テスト設定
[
  {
    "type": "status-code",
    "operator": "equal",
    "value": "201"
  },
  {
    "type": "json-query",
    "path": "$.id",
    "operator": "exists"
  },
  {
    "type": "json-query", 
    "path": "$.email",
    "operator": "contains",
    "value": "@"
  }
]

環境変数の動的設定

// レスポンスから環境変数を設定
{
  "setEnvVar": [
    {
      "varName": "userId",
      "source": "json",
      "path": "$.data.id"
    },
    {
      "varName": "userToken",
      "source": "header",
      "path": "Authorization"
    },
    {
      "varName": "sessionId", 
      "source": "cookie",
      "path": "session_id"
    }
  ]
}

// 暗号化環境変数
{
  "encrypted": true,
  "variables": {
    "apiKey": "encrypted:abc123...",
    "secretToken": "encrypted:def456...",
    "dbPassword": "encrypted:ghi789..."
  }
}

GraphQLクエリ

// GraphQL設定
{
  "method": "POST",
  "url": "{{baseUrl}}/graphql",
  "headers": {
    "Authorization": "Bearer {{graphqlToken}}",
    "Content-Type": "application/json"
  },
  "body": {
    "query": "query GetUserProfile($userId: ID!) { user(id: $userId) { id name email posts { id title content } } }",
    "variables": {
      "userId": "{{currentUserId}}"
    }
  }
}

// GraphQL テスト
[
  {
    "type": "json-query",
    "path": "$.data.user",
    "operator": "exists"
  },
  {
    "type": "json-query",
    "path": "$.data.user.email",
    "operator": "contains",
    "value": "@"
  }
]

認証設定

// OAuth 2.0設定
{
  "auth": {
    "type": "oauth2",
    "authUrl": "https://auth.example.com/oauth/authorize",
    "tokenUrl": "https://auth.example.com/oauth/token",
    "clientId": "{{clientId}}",
    "clientSecret": "{{clientSecret}}",
    "scope": "read write",
    "grantType": "authorization_code"
  }
}

// AWS認証
{
  "auth": {
    "type": "aws",
    "accessKey": "{{awsAccessKey}}",
    "secretKey": "{{awsSecretKey}}",
    "region": "us-west-2",
    "service": "apigateway"
  }
}

// Bearer Token
{
  "auth": {
    "type": "bearer",
    "token": "{{accessToken}}"
  }
}

// Basic認証
{
  "auth": {
    "type": "basic",
    "username": "{{username}}",
    "password": "{{password}}"
  }
}

コレクション管理

// コレクション構造
{
  "collectionName": "User Management API",
  "requests": [
    {
      "name": "Login",
      "method": "POST",
      "url": "{{baseUrl}}/auth/login",
      "folder": "Authentication"
    },
    {
      "name": "Get Users",
      "method": "GET", 
      "url": "{{baseUrl}}/users",
      "folder": "User Operations"
    },
    {
      "name": "Create User",
      "method": "POST",
      "url": "{{baseUrl}}/users",
      "folder": "User Operations"
    }
  ],
  "folders": [
    "Authentication",
    "User Operations", 
    "Admin Functions"
  ]
}

// Gitリポジトリ統合
// thunder-tests/
//   ├── thunderclient.json       // コレクションデータ
//   ├── thunderEnvironment.json  // 環境変数
//   └── thunderCollection.json   // リクエスト詳細

VS Code統合とワークフロー

// VS Code設定（settings.json）
{
  "thunder-client.saveToWorkspace": true,
  "thunder-client.showActivityFromCollection": true,
  "thunder-client.followRedirects": true,
  "thunder-client.certificates": [],
  "thunder-client.proxy": ""
}

// ワークスペース設定
{
  "folders": [
    {
      "path": "./src"
    }
  ],
  "settings": {
    "thunder-client.workspaceRelativePath": "api-tests",
    "thunder-client.saveRequestOnSend": true
  }
}

// キーボードショートカット例
{
  "key": "ctrl+alt+r",
  "command": "thunder-client.new-request"
},
{
  "key": "ctrl+alt+e", 
  "command": "thunder-client.change-environment"
}