はじめに
Node.jsでデータベース操作ができるパッケージ「Prisma」の基本的な使い方をまとめる😊
対象読者
- Prismaを始めて使う人
どんなときに使う?
- Node.jsでデータベース操作したいとき
- 特にNext.jsやExpressと組み合わせて使うことが多い
これから解説すること
- Prismaって何?
- CRUD操作のやり方
結論
✅Prismaを使えばSQLを知らなくてもデータベース操作ができる!
【動作イメージ】レコードを1件追加する
![Image in a image block](/notion/2df2859f-f170-4d84-b18b-ca06d39a122e/Untitled.gif)
Prismaって何?
✅Node.jsでデータベース操作ができるパッケージ。ORMの一種。
![Image in a image block](/notion/882367a9-6b44-4ebd-9a7a-e938f96c0108/Untitled.png)
【補足】ORMとは
Object Relational Mappingの略。
ざっくり説明すると、SQL文を書かなくても簡単にデータベース操作が書けるツールのこと。
Prismaのいいところ
- Node.jsで簡単にデータベース操作ができる。
準備
使用する手法・技術の紹介
事前にインストールしておくもの
- Node.js
- npm
-
Postman(バックエンドにリクエストを送ることができれば他のものでもOK)
ダウンロードリンク:https://www.postman.com/downloads/
-
サーバー(何でもOK)
例:SQLite、ローカルPCにインストールしたMySQL、ネットワーク上のサーバーなど
今からインストールするもの
- Express(Node.jsでバックエンド処理ができれば他のものでもOK)
- Prisma
- nodemon
Expressをインストールする
Expressをインストールする。
npm install express
Prismaをインストールする
Prismaをインストールする。
npm install prisma
Prisma Clientをインストールする。
(プログラムからデータベースにアクセスするために必要)
npm install @prisma/client
Prisma と Prisma Clinetって?
Prisma :コマンドでデータベース操作ができるようになる。
Prisma Client:JavaScriptでデータベース操作ができるようになる。
nodemonをインストールする
nodemonをインストールする。
npm install nodemon
package.jsonの”start”を修正しておく。
(ファイル変更時に自動でサーバーを再起動してくれるように設定)
{
"name": "prisma-sample",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
// ✅変更
"start": "nodemon server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@prisma/client": "^5.7.0",
"express": "^4.18.2",
"nodemon": "^3.0.2",
"prisma": "^5.7.0"
}
}
Prismaを初期化する
npx prisma init
これで「prismaフォルダ」と「.envファイル」ができる。
![Image in a image block](/notion/172e05db-e84f-4da1-ae1c-4465dcb4857a/Untitled.png)
データベースを新規作成
✅これからPrismaでデータベース操作をするので、事前に手動でデータベースそのものを用意する。
今回はMySQLのデータベースを作ってみる。
(PCにインストール済みのMAMPにMySQLが備わっていたのでそれを使う)
【手順1】phpMyAdminにアクセス
MAMPを起動しphpMyAdminを開く。
![Image in a image block](/notion/1877d157-87f5-4818-859d-f5ccadf0ec41/Untitled.gif)
【手順2】データベースを新規作成
今回は「prisma-sample」という名前のデータベースを作成する。
![Image in a image block](/notion/29df017e-286a-448a-93d0-7769b416a8fe/Untitled.png)
prisma/schema.prismaの設定
デフォルトは以下のようになっている。
// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
使用するデータベースに合わせてproviderを変更する。
// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "mysql" // ✅変更
url = env("DATABASE_URL")
}
.envの設定
デフォルトは以下のようになっている。
DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public"
自分のデータベースの情報に書き換える。
// ✅変更
DATABASE_URL="mysql://id:pass@localhost:port番号/DB名?schema=public"
例:MAMPの場合はデフォルトだと以下のようになる。
DATABASE_URL="mysql://root:root@localhost:3306/sample-prisma?schema=public"
MAMPの場合のポート番号の確認方法
![Image in a image block](/notion/9841d66b-7e6a-407d-b29d-6e345b7dde64/Untitled.png)
![Image in a image block](/notion/13de32e2-ad67-4678-adb5-9c7f9e9ad5b8/Untitled.png)
使い方
テーブルを新規作成
以下の手順でテーブルが作れる。
【手順1】prisma/schema.prisma にテーブル定義を書く
以下のようにmodelを書けばOK。
今回はPostsテーブルを作成する。
// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "mysql"
url = env("DATABASE_URL")
}
// ✅追記
model Posts {
id Int @default(autoincrement()) @id
title String
body String
}
【手順2】マイグレートする
コマンドを実行するだけでOK。
npx prisma migrate dev --name init
成功した画面
![Image in a image block](/notion/c0bd07a7-914d-485b-9264-e1cea7bd861b/Untitled.png)
✅実行結果
phpMyAdminを見ると、データベース「sample-prisma」にテーブル「Posts」ができている。
![Image in a image block](/notion/b3847d11-99b4-4b8f-9bb2-e2f38617dda0/Untitled.png)
また「prisma/migrations/20231215131353_init/migration.sql」のようなSQLファイルもできているはず。(内容は理解できなくてもOK)
-- CreateTable
CREATE TABLE `Posts` (
`id` INTEGER NOT NULL AUTO_INCREMENT,
`title` VARCHAR(191) NOT NULL,
`body` VARCHAR(191) NOT NULL,
PRIMARY KEY (`id`)
) DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
データベースの確認
ここまではphpMyAdminでデータベースを確認していたが、以降はPrismaでデータを確認する。
【手順1】Prismaの画面を起動
コマンドを実行するだけでOK。
npx prisma studio
成功した画面
![Image in a image block](/notion/98a5a99c-ee1d-45c6-801d-e6e330f38a6a/Untitled.png)
自動的に「http://localhost:5555/」が開くはず。
![Image in a image block](/notion/9413a98e-a41b-4a24-866d-4f85804a18d4/Untitled.png)
Postsを開くと空のテーブルになっていることが分かる。
![Image in a image block](/notion/3bf533fd-ed3e-469a-a20d-53e4c25d1df1/Untitled.png)
テーブルにレコードを1件追加
Prismaのcreate関数でレコードを1件追加する。
ここではPostmanでPOST送信する。
![Image in a image block](/notion/02e37d80-4aa1-40e0-8cc7-1adf22a6939f/Untitled.png)
【手順1】レコード1件追加するコード
Prismaのcreate関数でレコードを1件追加する処理を書く。
server.js(今回はExpress上でPrismaを使う)
const { PrismaClient } = require("@prisma/client");
const express = require('express');
const app = express();
const PORT = 8000;
// Prismaを使う準備
const prisma = new PrismaClient();
app.use(express.json());
// ✅投稿を作成
app.post("/createPost", async (req, res) => {
// リクエストからタイトルと本文を取得
const { title, body } = req.body;
// データベースに1件追加
const newPost = await prisma.posts.create({
data: {
title: title,
body: body,
},
});
return res.json(newPost);
});
// サーバーを起動
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}.`);
});
→SQLを書かずにレコードが追加できる!
【手順2】Expressのサーバーを起動する
コマンドを実行するだけでOK。
npm start
【手順3】PostmanでPOST送信する
先ほど書いたレコード追加処理を実行するため、実際にPOST送信してみる。
Postmanを開き、Newをクリック。
![Image in a image block](/notion/4ffde739-2e6d-47ff-9601-49488c18be62/Untitled.png)
HTTPを選択。
![Image in a image block](/notion/0b27fb25-ac07-460f-a285-3576a8c2f9b0/Untitled.png)
「POST」を選択し「http://localhost:8000/createPost」と入力する。
![Image in a image block](/notion/d43121f0-7d09-46ce-809a-a7f31282934f/Untitled.png)
「Body」タブを選択し、「row」「JSON」を選択する。
リクエストの内容は以下のとおり。
{
"title": "テスト投稿1",
"body": "本文テスト1"
}
![Image in a image block](/notion/41a0ad64-c71c-4ad7-a563-b9e5264d0a10/Untitled.png)
POST送信する。
![Image in a image block](/notion/1107771f-ea0a-44e6-b13f-5dd19aa5eaaa/Untitled.png)
Prisma Studioでもレコードが増えたか確認してみる。
http://localhost:5555/ にアクセスしてレコードが増えていれば成功🎉
![Image in a image block](/notion/7e3ebc72-a3e6-4abb-b361-f9bb310331cc/Untitled.png)
テーブルからレコードを取得(全件)
【手順1】レコードを取得するコード
Prismaのfindmany関数でレコードを全部取得する処理を書く。
server.js(今回はExpress上でPrismaを使う)
const { PrismaClient } = require("@prisma/client");
const express = require('express');
const app = express();
const PORT = 8000;
// Prismaを使う準備
const prisma = new PrismaClient();
app.use(express.json());
// ✅投稿を取得(全件)
app.get("/posts", async (req, res) => {
const posts = await prisma.posts.findMany();
return res.json(posts);
})
// サーバーを起動
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}.`);
});
→SQLを書かずにレコードが取得できる!
【手順2】Expressのサーバーを起動する
コマンドを実行するだけでOK。
npm start
【手順3】PostmanでGET送信する
先ほど書いたレコード取得処理を実行するため、実際にGET送信してみる。
Postmanで「GET」を選択し「http://localhost:8000/posts」と入力する。
![Image in a image block](/notion/1a8ff69d-d319-4620-a137-d70ef1c52819/Untitled.png)
GET送信する。
![Image in a image block](/notion/a978c03d-f7e6-4c05-a526-448a55780d81/Untitled.png)
先ほどPOST送信で登録したデータが表示されていれば成功🎉
(今はデータが1件しかないので1件しか表示されない)
![Image in a image block](/notion/50fb85c6-508d-492e-9a91-a78150d89339/Untitled.png)
テーブルからレコードを取得(1件)
【手順1】レコードを取得するコード
PrismaのfindUnique関数でレコードを1件取得する処理を書く。
server.js(今回はExpress上でPrismaを使う)
const { PrismaClient } = require("@prisma/client");
const express = require('express');
const app = express();
const PORT = 8000;
// Prismaを使う準備
const prisma = new PrismaClient();
app.use(express.json());
// ✅投稿を取得(1件)
app.get("/:id", async (req, res) => {
const post = await prisma.posts.findUnique({
where: {
id: Number(req.params.id),
},
});
return res.json(post);
})
// サーバーを起動
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}.`);
});
→SQLを書かずにレコードが取得できる!
【手順2】Expressのサーバーを起動する
コマンドを実行するだけでOK。
npm start
【手順3】PostmanでGET送信する
先ほど書いたレコード取得処理を実行するため、実際にGET送信してみる。
Postmanで「GET」を選択し「http://localhost:8000/1」と入力する。
(末尾の1はどういう意味? → IDが1のデータをちょうだい!の意味)
![Image in a image block](/notion/a664e8ac-1c6a-4391-bbc5-4846422f474c/Untitled.png)
GET送信する。
![Image in a image block](/notion/ebb287ba-c0f1-46a4-8ca0-7c013d4f074a/Untitled.png)
先ほどPOST送信で登録したデータが表示されていれば成功🎉
(idが1のデータが取得できる)
![Image in a image block](/notion/f8799a32-47cf-4b4c-9a58-a90ac90ae752/Untitled.png)
テーブルのレコードを更新
【手順1】レコードを更新するコード
Prismaのupdate関数でレコードを更新する処理を書く。
server.js(今回はExpress上でPrismaを使う)
const { PrismaClient } = require("@prisma/client");
const express = require('express');
const app = express();
const PORT = 8000;
// Prismaを使う準備
const prisma = new PrismaClient();
app.use(express.json());
// ✅投稿を更新
app.put("/:id", async (req, res) => {
// リクエストからタイトルと本文を取得
const { title, body } = req.body;
// レコードを更新
const updatedPost = await prisma.posts.update({
where: {
id: Number(req.params.id),
},
data: {
title: title,
body: body,
},
});
return res.json(updatedPost);
});
// サーバーを起動
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}.`);
});
→SQLを書かずにレコードが取得できる!
【手順2】Expressのサーバーを起動する
コマンドを実行するだけでOK。
npm start
【手順3】PostmanでGET送信する
先ほど書いたレコード更新処理を実行するため、実際にPUT送信してみる。
Postmanで「PUT」を選択し「http://localhost:8000/1」と入力する。
(末尾の1はどういう意味? → IDが1を更新して!の意味)
![Image in a image block](/notion/c85eae41-deba-4fd6-818e-4e632f8294a8/Untitled.png)
「Body」タブを選択し、「row」「JSON」を選択する。
リクエストの内容は以下のとおり。
{
"title": "テスト投稿1(更新後)",
"body": "本文テスト1(更新後)"
}
![Image in a image block](/notion/33d09a72-07f7-4507-9956-8a0de1955008/Untitled.png)
PUT送信する。
![Image in a image block](/notion/a559d974-08b7-458c-9d8d-dd9f19611427/Untitled.png)
Prisma Studioでもレコードが更新されたか確認してみる。
http://localhost:5555/ にアクセスしてレコードが増えていれば成功🎉
![Image in a image block](/notion/94baa947-77cb-463f-80b1-00afa873627b/Untitled.png)
テーブルからレコードを削除
【手順1】レコードを削除するコード
Prismaのdelete関数でレコードを削除する処理を書く。
server.js(今回はExpress上でPrismaを使う)
const { PrismaClient } = require("@prisma/client");
const express = require('express');
const app = express();
const PORT = 8000;
// Prismaを使う準備
const prisma = new PrismaClient();
app.use(express.json());
// ✅投稿を削除
app.delete("/:id", async (req, res) => {
const deletedPost = await prisma.posts.delete({
where: {
id: Number(req.params.id),
},
});
return res.json(deletedPost);
})
// サーバーを起動
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}.`);
});
→SQLを書かずにレコードが取得できる!
【手順2】Expressのサーバーを起動する
コマンドを実行するだけでOK。
npm start
【手順3】PostmanでGET送信する
先ほど書いたレコード削除処理を実行するため、実際にDELETE送信してみる。
Postmanで「DELETE」を選択し「http://localhost:8000/1」と入力する。
(末尾の1はどういう意味? → IDが1のデータを削除して!の意味)
![Image in a image block](/notion/cc9a4bf1-01ac-48f8-bdb1-d7a8be4c2ea6/Untitled.png)
DELETE送信する。
![Image in a image block](/notion/5fd98c20-1066-45eb-9038-42d0407116b7/Untitled.png)
Prisma Studioでもレコードが更新されたか確認してみる。
http://localhost:5555/ にアクセスしてレコードが消えていれば成功🎉
![Image in a image block](/notion/e5db14fd-e1f7-4f82-a3ca-f2ef9616d05c/Untitled.png)
まとめ
Prismaを使えばSQLを使わずに簡単にデータベースを操作できた😊
もっと複雑なデータベース操作をしたい場合は公式ドキュメントがおすすめ✨
参考サイト
公式ドキュメント
分かりやすい解説動画
PrismaでMAMPを使う方法