VScodeの拡張機能REST ClientでHTTPリクエストを簡単に送信

ロジカルスタジオでは、8、9月に学生さん向けにお仕事体験を開催しました。

多くの学生さんにご参加いただきました。ご参加いただいた方はありがとうございました！

さて、お仕事体験の際に使用したVisual Studio Code(以下VScode)の拡張機能である『REST Client』が、便利でしたので、
本稿ではRESC Clientを使ってみたという内容になっています！

REST Clientとは

VScode内で直接、HTTPリクエストの送信やそのレスポンスを確認することができるものです。

作成したAPIがしっかりと機能するかのテストを簡単に行うことができます。

どのように使用するのかを説明していきます。

APIを用意しよう

①APIの作成

APIの作成方法はこちらの記事をご参照ください。

※上記の記事を参考にして、APIを用意しましたが、使用言語はJavaScriptとなっております。

〜環境〜
・node.js v22.3.0
・npm v10.8.1

Studentテーブルを作成して、下記の情報をStudentテーブルに格納したり、データを取得したりしています。

・student_name
・university_name
・email(メールアドレス)

server.jsというファイルを作成して、下記のコードを記述しています。

コードはこんな感じです。ドン！

const express = require('express');
const { PrismaClient } = require('@prisma/client');
const prisma = new PrismaClient();

const app = express();
app.use(express.json());

app.post('/student', async (req, res) => {
    const { student_name, university_name, email } = req.body;
    const student = await prisma.student.create({
        data: { student_name, university_name, email },
    });
    res.json(student);
});

app.get('/student', async (req, res) => {
    const student = await prisma.student.findMany();
    res.json(student);
});


const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`サーバーはポート${PORT}で実行しています`);
});const express = require('express');
const { PrismaClient } = require('@prisma/client');
const prisma = new PrismaClient();

const app = express();
app.use(express.json());

app.post('/student', async (req, res) => {
    const { student_name, university_name, email } = req.body;
    const student = await prisma.student.create({
        data: { student_name, university_name, email },
    });
    res.json(student);
});

app.get('/student', async (req, res) => {
    const student = await prisma.student.findMany();
    res.json(student);
});


const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`サーバーはポート${PORT}で実行しています`);
});

json形式でデータを送信したり、レスポンスを受け取ったりするようにしています。

②サーバーの起動

下記のコマンドでサーバーを起動しましょう。

server.jsの部分は、ご自身がつけたファイルの名前に変更してください。

$ node server.js
$ node server.js

REST Clientを使ってみよう

①.httpもしくは.restファイルの作成

拡張子が「.http」か「.rest」のファイルを作りましょう。

今回は、requests.httpというファイルを作成して、下記のコードを記述しています。

### Create a new student
Send Request
POST http://localhost:3000/student
Content-Type: application/json
{
    "student_name": "ロージー",
    "university_name": "Logical Studio University",
    "email": "logi@logical-studio.com"
}

### Get students' information
Send Request
GET http://localhost:3000/student
Content-Type: application/json### Create a new student
Send Request
POST http://localhost:3000/student
Content-Type: application/json
{
    "student_name": "ロージー",
    "university_name": "Logical Studio University",
    "email": "logi@logical-studio.com"
}

### Get students' information
Send Request
GET http://localhost:3000/student
Content-Type: application/json

②POSTリクエストの送信

初めは、POSTリクエストから行ってみたいと思います。

POSTリクエストの送信方法は、いたって簡単です。下記の手順を踏めば一瞬で送信できます。

①””(ダブルクォーテーション)の間、上記なら「ロージー」や「Logical Studio University」と書いているところに、格納したい値を入力

②requests.httpファイルの中にある「Send Request」と書かれているボタンを押す

これだけで送れちゃいます。楽々ですね。それでは、実践してみましょう！

ダブルクォーテーションの間を埋めて、「Send Request」ボタンを押すと…

### Create a new student
Send Request
POST http://localhost:3000/student
Content-Type: application/json
{
    "student_name": "ロージー",
    "university_name": "Logical Studio University",
    "email": "logi@logical-studio.com"
}### Create a new student
Send Request
POST http://localhost:3000/student
Content-Type: application/json
{
    "student_name": "ロージー",
    "university_name": "Logical Studio University",
    "email": "logi@logical-studio.com"
}

下記のレスポンスがVScode内で右から左にぴょこっと飛び出してきます。

HTTP/1.1 200 OK
X-Powered-By: Express
Content-Type: application/json; charset=utf-8
Content-Length: 121
ETag: W/"79-kyKqP5gioZD8FD/UM5HtkVCgRew"
Date: Thu, 05 Sep 2024 09:37:56 GMT
Connection: close

{
  "id": 1,
  "student_name": "ロージー",
  "university_name": "Logical Studio University",
  "email": "logi@logical-studio.com"
}HTTP/1.1 200 OK
X-Powered-By: Express
Content-Type: application/json; charset=utf-8
Content-Length: 121
ETag: W/"79-kyKqP5gioZD8FD/UM5HtkVCgRew"
Date: Thu, 05 Sep 2024 09:37:56 GMT
Connection: close

{
  "id": 1,
  "student_name": "ロージー",
  "university_name": "Logical Studio University",
  "email": "logi@logical-studio.com"
}

id = 1にデータが追加されました。

このように、VScode内で簡単にPOSTリクエストの送信とそのレスポンスを確認することができます。

③GETリクエストの送信

それでは、GETリクエストもサクサクと送信しちゃいましょう。

先ほどとは少し手順が変わり、GETリクエストの場合は、下記のコードの「Send Request」のボタンを押すだけでHTTPリクエストを送信できます。

それでは、実践してみましょう！

### Get students' information
Send Request
GET http://localhost:3000/student
Content-Type: application/json### Get students' information
Send Request
GET http://localhost:3000/student
Content-Type: application/json

Send Requestを押してみると・・・

下記のレスポンスがPOSTリクエストと同様に、VScode内で右から左にぴょこっと飛び出してきます。

[
  {
    "id": 1,
    "student_name": "ロージー",
    "university_name": "Logical Studio University",
    "email": "logi@logical-studio.com"
  },
  {
    "id": 2,
    "student_name": "ロージー2",
    "university_name": "Logical Studio University",
    "email": "logi2@logical-studio.com"
  },
  {
    "id": 3,
    "student_name": "ロージー3",
    "university_name": "Logical Studio University",
    "email": "logi3@logical-studio.com"
  }
][
  {
    "id": 1,
    "student_name": "ロージー",
    "university_name": "Logical Studio University",
    "email": "logi@logical-studio.com"
  },
  {
    "id": 2,
    "student_name": "ロージー2",
    "university_name": "Logical Studio University",
    "email": "logi2@logical-studio.com"
  },
  {
    "id": 3,
    "student_name": "ロージー3",
    "university_name": "Logical Studio University",
    "email": "logi3@logical-studio.com"
  }
]