技術資料

APIの動作確認で、URLや送信するJSONを少し変えながら、何度もリクエストを送りたいことがあります。

そんなときに便利なのが、VS Code拡張のREST Clientです。リクエストをファイルに書いておけば、1クリックで送信でき、文字列やパラメーターの編集もその場でできます。レスポンスもVS Code上ですぐに確認できるので、ちょっとしたAPIの確認がしやすいです。

今回は、.httpファイルの基本的な書き方から、GET・JSON POST、変数の利用までを整理します。環境切替と、レスポンスの値を次のリクエストへ渡す方法も補足します。

今回の対象とサンプルAPI

• Windows 11のVS Codeで使うことを想定
• REST Client拡張：Huachao Maoのhumao.rest-client
• 仕様の確認対象：2026年10月6日時点の公開ソース（package.jsonのバージョンは0.26.0）
• リクエスト先：HTTPの確認用サービスhttpbin

httpbinは、送ったパラメーターやJSONをレスポンスに含めて返してくれます。以下の例では、架空のデータと確認用のダミートークンだけを送ります。実際のAPIキーや個人情報は送らないでください。

サンプルAPIのGET・POST・404・Bearerヘッダーへの応答は別のHTTPクライアントで確認しています。VS Code上のクリック操作、変数展開、環境切替は未検証で、作者の説明と公開ソースに基づく手順です。使用する拡張のバージョンによって、表示や操作が異なる場合があります。

REST Clientを導入する

VS CodeでCtrl+Shift+Xを押して拡張機能を開き、humao.rest-clientを検索します。Huachao MaoのREST Clientであることを確認してインストールしてください。

配布元は、Visual Studio MarketplaceのREST Clientで確認できます。

続いて、作業用フォルダにsample.httpを作成します。言語モードがHTTPになっていなければ、VS Code右下の言語モードをクリックしてHTTPを選びます。

.httpファイルの基本構造

リクエストは、次の順番で書きます。

1. HTTPメソッドとURL
2. 必要なヘッダー
3. ヘッダーとボディを区切る空行
4. 必要なリクエストボディ

GETでボディを送らない場合は、メソッドとURLだけでも始められます。JSONをPOSTするときは、ヘッダーの後に空行を入れてからJSONを書く、という形です。

まずはGETを送る

sample.httpに、次のリクエストを書いてみます。

GET https://httpbin.org/get?keyword=rest-client&limit=2
Accept: application/json

リクエストの上に表示されるSend Requestをクリックすると送信できます。リクエスト内にカーソルを置いてCtrl+Alt+Rを押す方法や、Ctrl+Shift+Pでコマンドパレットを開き、Rest Client: Send Requestを選ぶ方法もあります。

レスポンスが開いたら、HTTPステータス、ヘッダー、本文を確認します。httpbinの/getでは、クエリパラメーターが本文のargsに入ります。今回の例で確認したい部分は、次のような形です。

{
  "args": {
    "keyword": "rest-client",
    "limit": "2"
  }
}

これはレスポンスの一部だけを抜き出した例です。実際にはヘッダーなどの情報も含まれます。URLのkeywordやlimitを編集してもう一度送れば、変更した値が届いているか確認できます。

JSONをPOSTする

JSONを送る場合は、Content-Type: application/jsonを指定し、その後に空行を入れてボディを書きます。

POST https://httpbin.org/post
Accept: application/json
Content-Type: application/json

{
  "title": "rest-client-sample",
  "enabled": true
}

httpbinの/postでは、送ったJSONがレスポンスのjsonに入ります。titleが文字列、enabledが真偽値として受け取られているか確認してみましょう。

Acceptは受け取りたいレスポンスの形式、Content-Typeは送るボディの形式を伝えるヘッダーです。JSONを送ったからといって、相手が必ずJSONを返すとは限らないので、レスポンス側のContent-Typeも確認します。

複数のリクエストを一つのファイルに保存する

GETとPOSTの両方を残したいときは、###で区切ります。sample.httpを次の内容にすれば、それぞれのリクエストを選んで送信できます。

### パラメーターを確認
GET https://httpbin.org/get?keyword=rest-client&limit=2
Accept: application/json

### JSONを送信
POST https://httpbin.org/post
Accept: application/json
Content-Type: application/json

{
  "title": "rest-client-sample",
  "enabled": true
}

### 404の応答を確認
GET https://httpbin.org/status/404

各リクエストのSend Requestをクリックするか、送信したいブロックにカーソルを置いて実行します。ファイルを開いただけで、すべてのリクエストが順番に実行されるわけではありません。

本文を選択して実行する場合は、選択した範囲が送信対象になります。途中のヘッダーだけを選択したまま実行しないように注意してください。

リクエストがファイルに残るので、「どのURLへ、どのJSONを送って確認したか」を後から見返せます。ファイルを共有する場合は、相手が使うURLやテストデータも分かるようにコメントを付けておくと扱いやすいかと思います。

HTTPエラーもレスポンスとして確認する

最後のリクエストは、意図的にHTTP 404を返す例です。JSONが表示されたかだけで成功を判断せず、ステータスと本文を合わせて確認します。

確認するもの	見るところ
HTTPステータス	APIが成功・認証エラー・入力エラーなどをどう返しているか
レスポンスヘッダー	Content-Typeや、API固有の制限・認証に関する情報
レスポンス本文	期待する値、型、エラー内容が含まれているか

404や500の応答が返った場合と、名前解決・TLS接続・タイムアウトなどでHTTP応答を取得できない場合は分けて考えます。公開サービスの一時的な障害で想定外の応答になった場合も、URLとステータスを確認してから切り分けます。

共通のURLを変数にする

同じURLを何度も書く場合は、ファイル変数を使えます。@変数名 = 値で定義し、{{変数名}}で参照します。

@baseUrl = https://httpbin.org
@keyword = rest-client

### GET
GET {{baseUrl}}/get?keyword={{keyword}}&limit=2
Accept: application/json

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

{
  "title": "rest-client-sample",
  "enabled": true
}

これなら、接続先を変更するときに@baseUrlの一か所を編集すれば済みます。変数定義とリクエストの間にも空行を入れておきます。

変数の値をURLに使う場合は、空白や記号の扱いにも注意が必要です。ファイル変数では、{{%keyword}}のように%を付けてパーセントエンコードできます。

Bearerトークンを.envから読み込む

認証が必要なAPIでは、例えばAuthorization: Bearer トークンのようにヘッダーへ指定します。共有する.httpファイルに実際のトークンを直接書くのは避けたいところです。

ここでは、同じ作業用フォルダに.envとauth.httpを作成します。.envの内容は次のとおりです。

HTTPBIN_DEMO_TOKEN=demo-token-for-httpbin

auth.httpからは、{{$dotenv 変数名}}で参照します。

GET https://httpbin.org/bearer
Authorization: Bearer {{$dotenv HTTPBIN_DEMO_TOKEN}}
Accept: application/json

この例では、コマンドパレットのRest Client: Switch EnvironmentからNo Environmentを選び、作業用フォルダの.envを使う前提にします。公開ソースでは環境別の.env.環境名や親ディレクトリも探索するため、既存プロジェクトの認証情報を誤って使わないよう、ファイルの配置と参照する変数名を確認してください。

httpbinの/bearerはBearerヘッダーを確認するためのものです。このダミートークンで応答が返っても、実際のサービスのトークン検証や権限確認ができたことにはなりません。レスポンスに送信したトークンも含まれるため、実際の認証情報を使わないでください。

実際のプロジェクトで.envを使う場合は、Gitの管理対象から外し、値を伏せた.env.exampleなどを共有します。すでにGitで管理しているファイルは、.gitignoreへ追加するだけでは対象外になりません。

また、ファイルから秘密情報を分けても、送信した値が履歴やレスポンスへ残る可能性はあります。REST Clientにはリクエスト履歴の機能があるため、共有PCや画面キャプチャでは特に注意が必要です。不要な履歴はコマンドパレットのRest Client: Clear Request Historyから削除できます。

環境ごとに接続先を切り替える

ローカル環境と検証環境で接続先を切り替えたい場合は、VS Codeの設定にrest-client.environmentVariablesを定義できます。

コマンドパレットのPreferences: Open Workspace Settings (JSON)で、現在のワークスペースの設定を開きます。次の設定を既存の設定と合わせて記述します。

{
  "rest-client.environmentVariables": {
    "sample": {
      "baseUrl": "https://httpbin.org"
    },
    "local": {
      "baseUrl": "http://localhost:8000"
    }
  }
}

環境切替を試すリクエストは、別のenvironment.httpに書きます。

GET {{baseUrl}}/get?keyword=rest-client
Accept: application/json

コマンドパレットのRest Client: Switch Environmentからsampleを選べば、httpbinへ送る設定になります。localは設定例なので、実行するには8000番ポートで/getを受け付けるAPIが必要です。実際の開発用APIに合わせてURLとパスを変更してください。

ここで気を付けたいのは、ファイル内に同じ名前の@baseUrlを定義しないことです。ファイル変数は環境変数より優先されるので、残したままだと環境を切り替えても接続先が変わりません。先ほどのsample.httpとファイルを分けたのは、この違いを分かりやすくするためです。

送信前に選択中の環境とURLを確認する習慣を付けておくと、接続先の取り違えを減らせます。特にPOSTなどの更新系リクエストは、再送するたびに処理が実行される可能性があるので注意してください。

レスポンスの値を次のリクエストで使う

APIを続けて確認するとき、前のレスポンスに含まれるIDなどを、次のリクエストへ渡したくなることがあります。REST Clientでは、リクエストに名前を付けて、そのレスポンスを参照できます。

ここではchain.httpを作り、POSTした文字列を次のGETへ渡す例にしてみます。

@baseUrl = https://httpbin.org

### 最初に送信
# @name postEcho
POST {{baseUrl}}/post
Content-Type: application/json

{
  "title": "rest-client-sample"
}

### POSTのレスポンスを利用
GET {{baseUrl}}/get?title={{postEcho.response.body.$.json.title}}
Accept: application/json

# @name postEchoがリクエストの名前です。postEcho.response.body.$.json.titleは、そのレスポンス本文のJSONからjson.titleを取得します。$.json.titleの部分はJSONPathによる指定です。

実行するときは、先にPOSTのSend Requestをクリックし、レスポンスが返ってからGETを送ります。GETのレスポンスでargs.titleがrest-client-sampleになっていれば、期待する値が届いています。

参照先のPOSTは自動実行されません。未送信の状態や、JSONPathで値が見つからない状態では、変数の参照文字列がそのまま残ることがあります。参照部分にカーソルを合わせて値を確認し、元のレスポンスの構造と実行順序を見直してください。

これは入力した文字列を受け渡す例なので、登録したデータの取得やログイン処理は行っていません。実際のAPIでIDやトークンを渡す場合も、参照する値とレスポンスの構造を確認して組み立てます。環境を切り替えた場合は、参照元のリクエストから送り直し、以前の環境のレスポンスを使わないようにします。

確認用のリクエストを残しておく

まずはGETとJSON POSTを.httpファイルに保存し、値を変更して再送できれば十分便利です。共通のURLを変数にし、必要になったところで環境切替やレスポンスの再利用を加えていけば、確認手順を整理しやすくなります。

ただし、手動でレスポンスを見るだけでは、期待する結果を継続的に検査する自動テストの代わりにはなりません。REST Clientで確認した条件を、必要に応じてテストコードへ反映する、といった使い方が良いかと思います。

PHP側から同じようなリクエストを送る実装については、PHPのcURLで外部API連携を実装する記事も参考にしてください。

参考資料

• REST Client：Visual Studio Marketplace
• REST Client作者のREADME：使い方と変数の説明
• REST Clientの公開ソース：バージョン・コマンド・設定項目
• REST Clientの公開ソース：.env参照の処理
• REST Clientの公開ソース：変数の優先順位と未解決時の処理
• REST Clientの公開ソース：レスポンスの値を取り出す処理
• Git公式：gitignoreと管理済みファイルの扱い
• httpbin：HTTPの確認用サービス