540
619

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

サクッとAPIを叩く方法 (VS CodeでHTTPリクエストが送れちゃう拡張機能)

Last updated at Posted at 2022-06-19

概要

  • 開発中のAPIを試したり、サードパーティのAPIをサクッと叩いてみたいといった時に皆さんどのようにしますか?
  • 私は、curlコマンドやPostmanをよく使っています。
  • ただ、もっと楽にHTTPリクエストを投げ、かつその時使用した情報を残すことができる方法を以前のチームメンバーに教えていただいたので、記事にしました。

REST Client

  • 今回、紹介するのはVS CodeのエクステンションにあるREST Clientというものになります。

  • このREST ClientというのはVS Code上でHTTPリクエストを送信し、レスポンスを確認できる拡張機能となっています。

スクリーンショット 2022-06-19 22.35.48.png

使用方法

  • 使用方法はすごく簡単で、拡張子が「.http」か「.rest」というファイルで決められた構文に従いHTTPリクエストを記述するだけです。

下記にcrudの例を載せていきたいと思います。
また今回はREST APIのsampleを使用し、crudを試していこうと思います。

全体的な操作感

  • まず全体的な操作感を書いていくのですが、左のタブがHTTPリクエストを記述し、右のタブが送信したHTTPリクエストのレスポンスが表示されます。

  • 1ファイル内で複数のHTTPリクエストを書く場合には、 ###で区切ることができます。

  • また、ヘッダーについてはリクエストを記載している行の直下から空行までをリクエストヘッダと認識するようです。

  • コマンドとしては、Windowsの場合は、Ctrl + Alt + R / Macの場合は、Cmd + Alt + RでHTTPリクエストを送信することができます。

  • もしくは、下記のスクショにあるように、それぞれのHTTPリクエストのメソッド名の上に表示されている「Send Request」をクリックすると、当該のHTTPリクエストを送信することができます。

スクリーンショット 2022-06-19 22.56.57.png

  • もしくはコマンドパレットから「rest」と入力し実行するコマンドもあります。

スクリーンショット 2022-06-19 22.50.58.png

GET

  • Getの場合は、methodを省略した形でも送信することができます。

GET https://reqres.in/api/users?page=2HTTP/1.1
Content-Type: application/json

###

https://reqres.in/api/users/2

スクリーンショット 2022-06-19 22.56.31.png

PUT/PATCH/POST/DELETE

  • bodyを含めるような場合は、下記のようにリクエストヘッダから1行あけて記載していきます。

POST https://reqres.in/api/users HTTP/1.1
Content-Type: application/json

{
    "name": "morpheus",
    "job": "leader"
}

###

PUT https://reqres.in/api/users/2 HTTP/1.1
Content-Type: application/json

{
    "name": "morpheus",
    "job": "zion resident"
}

###

PATCH https://reqres.in/api/users/2 HTTP/1.1
Content-Type: application/json

{
    "name": "morpheus",
    "job": "zion resident"
}

###

DELETE https://reqres.in/api/users/2 HTTP/1.1
Content-Type: application/json

スクリーンショット 2022-06-19 23.00.23.png

まとめ

  • いやぁ、非常に便利ですね。
  • これファイルとして残せるので、チームで共有したい場合はGitなどで共有すると開発効率/あとはデモ等でも使用できそうですね!

参考

540
619
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
540
619

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?