ロジカルスタジオでは、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}で実行しています`);
});json形式でデータを送信したり、レスポンスを受け取ったりするようにしています。
②サーバーの起動
下記のコマンドでサーバーを起動しましょう。
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②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"
}下記のレスポンスが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"
}id = 1にデータが追加されました。
このように、VScode内で簡単にPOSTリクエストの送信とそのレスポンスを確認することができます。
③GETリクエストの送信
それでは、GETリクエストもサクサクと送信しちゃいましょう。
先ほどとは少し手順が変わり、GETリクエストの場合は、下記のコードの「Send Request」のボタンを押すだけでHTTPリクエストを送信できます。
それでは、実践してみましょう！
### Get students' information
Send Request
GET http://localhost:3000/student
Content-Type: application/jsonSend 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"
}
]わーい！ロージーがたくさん増えましたね！
ボタン1つで、今まで格納したデータを参照することができました。
さいごに
今回は、VScodeの拡張機能である「REST Client」を使用してみて、非常に便利であったため、皆様にもぜひご活用していただきたくご紹介しました。
REST ClientはAPIがしっかりと動作しているのかを確認するための拡張機能です。
REST Clientを入れるだけで、VScode内で、HTTPリクエストの送信やレスポンスの確認が行えるため、手間がかかりません。
ご自身が作成したAPIが機能するかのテストのために、ぜひ使用してみてください！
記事を読んでロジカルスタジオに興味を持った方は、ぜひコチラからご応募ください！
