ウェブ開発をしていると、HTTP リクエスト & レスポンス を、HTTP ヘッダーと共に確認することがよくあります。
HTTP でリクエスト送信する方法はいくつかあり、プログなどを見ていると、下のいずれかの方法でやっている方が多い印象です。
- プログラムで HTTP リクエスト処理をして、print をする
- 〇 : ユニットテストコードにも成りえる
- ×: リクエストするまでの前準備が煩雑
- Postman を使う
- 〇: 高機能で細かいことができる
- ×: 高機能すぎて、サクッと使いにはハードルが高い
- Curl / Invoke-WebRequest を使う
- 〇: OS に標準でついている、または簡単にインストールができる
- ×: JSON データを送るときに、面倒になってくる。
いずれの方法も、良い所・悪い所がありますが、今回紹介する VS Code のプラグイン REST Client (by Huachao Mao) は、それぞれの悪い所一切排除したいいとこどりなので、オススメです。
それでは、細かく見ていきましょ。
HTTP リクエストが簡単
変数が使えて、ブラウザに打ち込む感覚で、記述ができます。
例えば、
@hostname = localhost
@port = 5000
@host = {{hostname}}:{{port}}
GET http://{{host}}/とすることで、http://localhost:5000 に GET リクエストできます。
HTTP リクエストは、プラグインをインストールすると GET の上あたりに小さなボタン表示されるので、それをクリックして送信できます。
または、Ctrl + Alt + R とショートカットを使ってもできます。
クエリが見やすい
GET リクエストする場合、クエリを付け加えたい場合があります。その場合このようにします。
GET http://{{host}}/ HTTP/1.1
?page=2
&pageSize=10改行付き書けるので、どういったクエリを送信しているか分かりやすいです。
また、JSON も改行を使ってかけるので、間違わずに送信できます。
下記は、
- 1 から 100 までのランダムなエンドポイントに対し
Content-Type: application/jsonで- JSON データを POST 送信する例です。
POST http://{{host}}/video/{{$randomInt 1 100}}
Content-Type: application/json
{
"name": "john",
"likes": 30,
"views": 100
}やっぱり、人間には改行があった方が見やすいですね。
送受信するデータが見やすい
これまで、どのように HTTP レスポンスが見れるか説明していませんでしたが、
リクエスト結果は、右側に分割ウィンドウがでて、HTTP ヘッダーと共に確認できます。
レスポンスのステータスコードや Content-Type を確認する必要がある場合に便利ですね。
一覧性がある
いくつものリクエストを、まとめて書くこともできます。
この場合、### で区切る必要があります。
こちらは 4 つの HTTP リクエストをまとめたものです。
@hostname = localhost
@port = 5000
@host = {{hostname}}:{{port}}
GET http://{{host}}/ HTTP/1.1
###
POST http://{{host}}/video/15 HTTP/1.1
###
DELETE http://{{host}}/video/15 HTTP/1.1
###
GET http://{{host}}/ HTTP/1.1
?page=2
&pageSize=10
User-Agent: custom agent
Content-Type: text/htmlシンタックスハイライトもされるので、実際にはもっと見やすいです。
ファイルで管理できる
そして、これらのリクエストをファイルとして保存できます。
*.http か *.rest という拡張子にすると、利用ができます。
テキストファイルなので、Git などを使うと、変更箇所も記録されるので、どこを追記・編集したのかも将来的に使えそうですね。
まとめ
これまで Curl や Postman を使っていましたが、Rest Client を知ってからは、これしか使っていません。
ファイルですので、一度作成しておけば、使いまわしもしやすいですし、何せ一覧性がある ので、良いです。
ぜひお試しください！