Zenn
😺

Visual Studio Code拡張 REST Client(VSCode上で簡単にAPIテスト)

2022/04/11に公開
VS Code
API
#
rest
idea

概要

REST APIをちょっと試すのに何か手軽なツールは無いかなと探していたところ、Visual Studio Code(以下VSCode)の拡張機能で名前もそのまんま「REST Client」というものが良さげだったので使い方をまとめる。

機能の概要としては下記のような感じ。

  • リクエストコマンドをテキスト形式(.httpファイル)として保存しておける。

  • レスポンスをVSCode内で表示できる(左にリクエスト、右にレスポンス、といった具合)

  • レスポンスを全体保存、Body部分だけ保存、といったことができる。

  • リクエストのパラメーターを変えつつ連続実行みたいなことはできなさそう。

目次

1. インストール

まずはインストール。

  1. VSCodeサイドバーの拡張機能アイコンをクリックし、検索欄でrest clientと入力し、多分候補の一番上に出てくるHuachao MaoさんのREST Clientをインストールする。
    ※ちなみにその下のThunder Clientも人気なようだ。

  2. はいインストールできました。

2. 使い方

ここでは「GitLabで公開されているプロジェクト一覧を取得する」という例で試します。

参考：GitLabのAPI等

2.1. リクエスト(GET)

2.1.1. 基本

  1. VSCode上で新規ファイルを作成し、言語の選択でhttpを選択する。

  2. とりあえずリクエストしたいAPIコマンドを入力する。今回はhttps://gitlab.com/api/v4/projectsというものを入力する。
    ※Send Requestという文字は勝手に表示される。

  3. Send Requestの部分がクリックできるようになっているので、クリックする。

  4. そうすると右側にレスポンスが表示される。

2.1.2. 複数コマンドを1ファイルに記述

### でコマンドを区切ると、1つのファイル内に複数コマンドを書いておける。
しかしファイル内にあるコマンドを全部実行してくれるというわけではない。

2.2. レスポンス操作

  1. レスポンス部分は折り畳みなどができる。

  2. 右上のアイコンで保存やクリップボードにコピーができる。

    • Save Full Response
    • Save Response Body
    • Copy Response Body

  3. ちなみにResponse Bodyで保存した場合。GitLabのAPIで取得した結果はJSON形式なので拡張子が勝手にjsonになっている。

  4. Body部分は一行で保存されているので、人間が見やすいようにしたいなら整形したほうが良い。
    一応整形の方法はCtrl + Shift + pでコマンドパレットを出しformat documentで検索して出てくるコマンドを実行する。
    ※これは多分特に拡張機能とか入れてなくても標準でできるはず…。

3. その他の機能

  • もちろんGETだけでなくPOSTもできる。
  • GraphQLリクエストも送れる。
  • cURLリクエストも送れる。
  • 変数が使えるよう。
    リクエストして受け取ったパラメータを変数に入れて次のリクエストに使うとか。

この辺の機能はまだ使ってないのでようわかりませんが、詳細は公式ページを参照してください。
https://marketplace.visualstudio.com/items?itemName=humao.rest-client

Discussion