REST Clientの使い方：VS CodeでAPIリクエストを手軽に送信する 🐝
はじめに
REST APIの疎通確認を、気軽に行いたいと思い、
VS Code拡張の「REST Client」を使って遊んでみました。
モックサーバー（Beeceptor）を使いながら、基本的な使い方を紹介します 🐝
REST Clientとは？
REST Clientは、VS Code や Cursor で利用できる拡張機能です。
HTTPリクエストをエディタ上から簡単に送信でき、
外部APIとの疎通確認や動作確認に便利なツールです。
インターネット上の他のプログラムに
- データを送信する
- データを受信する
といった操作を、GUI感覚で行えます。
以下の記事がとても分かりやすかったので、参考にしました。
今回使うもの
今回の検証では、以下を使用します。
- VS Code または Cursor
- REST Client（拡張機能）
- Beeceptor（インターネット上でデータをやり取りできるモックサーバー）
準備
REST Clientをインストールする
まずは、拡張機能から REST Client をインストールします。
プロジェクトを作成する
任意のディレクトリにプロジェクトを作成し、request.http ファイルを作成します。
このファイルに、送信するHTTPリクエストを記述していきます。
Beeceptorを準備する
次に、Beeceptorを使ってモックサーバーを準備します。
Beeceptorの画面で、サブドメインに hello-restclient と入力し、
「Create Mock Server」ボタンをクリックします。
疎通確認（curl）
モックサーバーが起動したら、まずはcurlコマンドで疎通確認を行います。
表示されているcurlコマンドをコピーし、
ターミナルから実行します。
リクエストがBeeceptor側に届いていれば、準備は完了です。
httpファイルからリクエストを送信する
それでは、REST Clientを使ってリクエストを送信してみます。
request.http に、以下の内容を記述します。
※ サブドメインは環境に合わせて修正してください。
# プロフィール送信
POST https://hello-restclient.free.beeceptor.com
Content-Type: application/json
{
"name": "名無しさん",
"hobbies": ["読書", "お絵描き", "プログラミング"]
}
エディタ上に表示されている Send Request をクリックします。
レスポンスを確認する
エディタの右側に、レスポンス内容が表示されます。
Beeceptor側でリクエストを受信できていればOKです。
なお、赤枠のボタンを押すと Request Body を整形表示できます。
コラボフローAPIで使ってみた （おまけ）
最後に、業務API（コラボフローAPI）で使ってみた例です。
REST Clientでは、変数を定義して再利用できます。
これを使うと、リクエストがとても見やすくなります。
@baseUrl = http://localhost/collaboflow/api/index.cfm
@app_cd = 1
@authHeader = Basic xxxxxxxxxx
# 申請済みの一覧取得
GET {{baseUrl}}/v1/myrequests?app_cd={{app_cd}}
X-Collaboflow-Authorization: {{authHeader}}
このように書くことで、URLや認証情報をまとめて管理できます。
無事、申請済み一覧を取得することができました。
さいごに
REST Clientは、
- APIの疎通確認
- リクエスト内容の確認
- 簡単な検証
といった用途に便利なツールです。
curlと同じような感覚で気軽に試せるうえ、
リクエスト内容をファイルとして残しておけるのも便利です。
Discussion