👻
VSコードのREST Clientとtest.http

2025/03/05に公開
VS Code
 REST ClientについてPostmanなど大掛かりなクライアントを使うまでもない時に、

さくっと動かしたい時に、便利なクライアント
１．VSコードのプラグインで、REST Clientをインストールしている状況

２．VSコードで開いてるフォルダの直下に、test.httpのファイルを置いて、しかるべき記述をする

（　しかるべき記述については、後述　）

３．なにかのRestAPIで実装したバックエンドを起動させる
図のように、Send Requestを押すと、右側に結果が返ってくる

test.httpのしかるべき記述は、

https://marketplace.visualstudio.com/items?itemName=humao.rest-client

のREST Clientのサイトに、

下の図の赤枠のように書いてある

test.httpのサンプル
GET http://localhost:3000/users

###

POST http://localhost:3000/signup
Content-Type: application/json

{
  "name": "Nikolas",
  "email": "burk@prisma.io"
}

###

POST http://localhost:3000/post
Content-Type: application/json

{
  "title": "Hello World",
  "authorEmail": "alice@prisma.io"
}

###

PUT http://localhost:3000/post/1/views

###

PUT http://localhost:3000/publish/5

###

GET http://localhost:3000/user/3/drafts

###

GET http://localhost:3000/feed
おそらく、REST Clientのプラグインが入ってればVSコードで、test.httpを開いたら、

Send Request

のリンクが勝手に表示されて、押せる状況になってる。

 補足「npm run dev」のデバッグ起動の件上記で、

npm run devでバックエンドを起動してるケースの話で。

バックエンド側の実装をデバッグ実行したいケース。
npm run devのコマンドが打てるということは

package.jsonに、"scripts"の"dev"についての挙動が

下記のような記述で書いてある
  "scripts": {
    "dev": "ts-node src/index.ts"
  },
.vscode/launch.json

に、
{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Debug Next.js + JSON Server",
            "runtimeExecutable": "npm",
            "runtimeArgs": ["run", "dev"],
            // **** "cwd": "${workspaceFolder}/21_nextjs_app_router/start", // package.json のあるディレクトリを指定
            "env": {
              "NODE_ENV": "development"
            },
        }
    ]
}
があれば、デバッグ実行で「npm run dev」が動作する

下の図は、デバッグ実行している様子。

package.jsonが、VSコードを開いたフォルダの直下に無い場合は、

// **** "cwd": "${workspaceFolder}/21_nextjs_app_router/start", // package.json のあるディレクトリを指定

の部分の行を生かす（今、コメントアウトされている)
${workspaceFolder}は、VSコードを開いたフォルダのこと、

package.jsonがある場所を指定しておけば、

npm run devを実行する直前に、そこまで、cdコマンドで移動した上で

npm run devを実行してくれることになる

そこにある、package.jsonの"scripts"の"dev"に書かれた内容で

デバッグ実行してくれる。
REST Clientについて

補足「npm run dev」のデバッグ起動の件

Discussion
