Prismaとは
Prismaは次世代ORM（Object-Relational Mapping）ツールです。
Prismaを使用することで、データベースとのやり取りが非常にシンプルになります。
Prismaの環境構築手順
まず、以下のコマンドで開発環境を準備します。
npm create vite@latest my-prisma -- --template vanilla
cd my-prisma
npm install次に以下のコマンドでexpress, corsとprismaをインストールします。
npm i -D express cors
npx prisma initprismaをインストールすると、.envを.gitignoreに追加してくださいという警告とNext stepsが表示されます。
$ npx prisma init
Need to install the following packages:
prisma@5.15.0
Ok to proceed? (y) y
✔ Your Prisma schema was created at prisma/schema.prisma
You can now open it in your favorite editor.
warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.
Next steps:
1. Set the DATABASE_URL in the .env file to point to your existing database. If your database has no tables yet, read https://pris.ly/d/getting-started
2. Set the provider of the datasource block in schema.prisma to match your database: postgresql, mysql, sqlite, sqlserver, mongodb or cockroachdb.
3. Run npx prisma db pull to turn your database schema into a Prisma schema.
4. Run npx prisma generate to generate the Prisma Client. You can then start querying your database.次に「prisma/schema.prisma」に以下のmodelを追加します。
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "postgresql"
url = env("DATABASE_URL")
}
model Books {
id Int @default(autoincrement()) @id
title String
price Int
}次に.envを開くと仮のDATABASE_URLが書かれていますので、こちらを修正します。
DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public"まず、PostgreSQLをダウンロードします。
MacならPostgres.appが使いやすいのでオススメです。
Postgres.appの場合はまずアプリを起動してInitializeボタンを押して初期化します。
初期化が終わったら「postgres」のデータベースが一覧に表示されるのでダブルクリックします。
すると、postgres=# の状態でターミナルが開くので、「CREATE DATABASE booksdb;」でデータベースを作成後に「\c booksdb;」でbooksdbに接続してください。
postgres=# CREATE DATABASE booksdb;
CREATE DATABASE
postgres=# \c booksdb;
You are now connected to database "booksdb" as user "i"今回作成するサンプルは私はUser: i, Password: pass1234を使用します。
なので、.envのDATABASE_URLは渡しの場合は以下のようになります。
DATABASE_URL="postgresql://i:pass1234@localhost:5432/mydb?schema=public"ここまでできたら、以下のコマンドを実行して、prisma/schema.prismaファイルで定義されたスキーマに基づいて新しいマイグレーションファイルを作成します。
npx prisma migrate dev --name initマイグレーションファイルの作成が完了したら、「npx prisma studio」を実行すると、localhost:5555でPrismaのModelが確認可能になります。
$ npx prisma studio
Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma
Prisma Studio is up on http://localhost:5555schema.prismaに「model Books」を追加したので、localhost:5555の表示画面にもModelのBooksが確認できます。
Booksをクリックすると、id, title, priceのテーブルも確認できます。
server.jsを作成して以下のコードを追加する。
import { PrismaClient } from '@prisma/client'
import express from 'express'
import cors from 'cors'
const app = express()
const PORT = 9999
const prisma = new PrismaClient()
app.use(express.json())
app.use(cors())
app.get('/api/', async (req, res) => {
const books = await prisma.books.findMany()
return res.json(books)
})
app.post('/api/', async (req, res) => {
const { title, price } = req.body
const books = await prisma.books.create({
data: {
title,
price: Number(price)
}
})
return res.json(books)
})
app.listen(PORT, () => {
console.log('http://localhost:9999/api/')
})server.jsを作成してら「node server.js」で起動して、VS Code拡張機能のThunder ClientでPOSTします。
最後にGETやPrismaのhttp://localhost:5555/を見ると、追加されていることが確認できます。
この状態ならmain.jsでfetchを使用しても取得できます。
async function getBooksData() {
const response = await fetch('http://localhost:9999/api/')
const books = await response.json()
console.log(books);
}
getBooksData()
