2024.09.07

【REST Client】VSCodeでHTTPリクエストをテストする方法（無料）

かなむ

VSCodeでの開発中、APIの動作を確認するためにHTTPリクエストをテストすることは頻繁にあります。外部ツールを使わずに、VSCode内で簡単にリクエストを送信できたら便利ですよね。そんな時に役立つのが「REST Client」拡張機能です。この記事では、REST Clientを使ってHTTPリクエストを手軽にテストする方法を紹介します。

結論
REST Client導入手順の詳細
POSTリクエストでのデータ送信例
まとめ

結論

下記手順で導入、実行します。

VSCodeに拡張機能「REST Client」をインストールする
HTTPリクエストファイル（~.http）を作成する
リクエストを実行（Send Request）する

かなむ

順に解説します。

REST Client導入手順の詳細

REST Clientのインストール

VSCodeに拡張機能「REST Client」をインストールします。VSCodeのサイドバーから拡張アイコンをクリックし、検索窓に「REST Client」と入力し、表示された結果からREST Clientをインストールしてください。

HTTPリクエストファイルの作成

下記手順でリクエストファイルを作成します。

テキストファイル（~.http または～.rest）を作成する
テキストファイル内に実行するリクエストを記述する

まず、任意の場所にREST Clientを使用するためのテキストファイル（拡張子は .http または .rest）を作成します。ここでは例として、C#で作成する最小APIであるMinimalApiというプロジェクトのルートディレクトリに、request.httpファイルを作成してみました。

作成したファイルに、テストしたいHTTPリクエストを記述します。たとえばローカルホストのルートディレクトリ（ポート）にGETリクエストを送信する場合は下記のようになります。

GET http://localhost:5181/

リクエストの実行

先ほど記述したリクエスト行の上に「Send Request」というボタンが表示されているはずです。

このボタンをクリックすると、リクエストを送信できます。実際にクリックすると、レスポンスがVSCode内の新しいタブに表示されます。下記は成功した場合のレスポンスです。

今回は「Hello World!」を返却するAPIに対してリクエストを送信しているので、このように表示されています。

POSTリクエストでのデータ送信例

REST Clientを使うと様々な形式のデータをPOSTリクエストで送信することも可能です。ここでは、JSONPlaceholder API（Web開発者やフロントエンドエンジニア向けに提供されている、テストやモックデータ用の無料のオンラインAPI）を使って、様々なデータ形式のリクエストを送信する例を紹介します。

POSTリクエスト（JSONデータ）

JSONデータをPOSTリクエストで送信する場合は下記のようになります。

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

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

POSTリクエスト（XML形式）

XMLデータの場合は下記のように記述します。

POST http://jsonplaceholder.typicode.com/posts
Content-Type: text/xml

<post>
  <title>foo</title>
  <body>bar</body>
  <userId>1</userId>
</post>

POSTリクエスト（form-data形式）

form-dataの場合は下記のように記述します。ここではファイルアップロードを疑似的に実施しています。

POST http://jsonplaceholder.typicode.com/posts
Content-Type: multipart/form-data; boundary=boundary

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

This is a sample file content.
--boundary--

まとめ

REST Clientは、VSCode内でHTTPリクエストを簡単にテストできる便利なツールです。インストールも簡単で、テキストファイルを使ってリクエストを定義し、すぐに実行できます。また、複数のリクエストを一つのファイルにまとめて管理する機能や、環境変数の設定、ファイル間でデータを共有する機能も備わっています。APIの動作確認や開発中のテストに便利なこの拡張機能を、ぜひ活用してみてください！

#REST Client #VSCode #Web API #アプリ開発 #デバッグ #拡張機能

ABOUT ME