Prisma 入門してみたフロントエンド定例 2022/10/7

こんにちは、フロントエンドチームの @high_g_engineer です。
今週のフロントエンド定例の内容を記載します。

フロントエンド定例について、以前の記事（ランサーズのフロントエンドチームが取り組んでいること）でお伝えしたのですが、毎週金曜日に開催しており、実際の業務で取り組んでいることや気になった技術情報等をシェアしあう会になっています。

以下、今週の内容です。

Prisma 入門してみた

モチベーション

Prismaの概要を知る
環境構築する
Prisma schemeについて
Prisma Migrateについて
Prisma Clientについて
Prisma Studioについて

Prismaの概要を知る

https://www.prisma.io/
Node.js, TypeScriptで利用できるORM
スキーマを元に、マイグレーションできる為便利
JSとORMの相性が良いので、かなりライトにDBと仲良く出来る

環境構築する

package.json 準備

npm init -y

ts環境

npm install typescript ts-node @type/node -D

tsconfig.json作成

touch tsconfig.json

tsconfig.json編集

{
  "compilerOptions": {
  "sourceMap": true,
  "outDir": "dist",
  "strict": true,
  "lib": ["esnext"],
    "esModuleInterop": true
  }
}

Prismaインストール

npm i prisma -D

DBにSQLiteを指定（デフォルトはPostgreSQL）

npx prisma init --datasource-provider sqlite

prisma/scheme.prisma と .env が作成される

Prisma scheme

.env

DBのパス指定が記述されているファイルが作成される
↓.envの内容

DATABASE_URL="file:./dev.db"

scheme.prisma

↓初期はこれだけ（DBの指定、clientの指定）

datasource db {
  provider = "sqlite"
  url = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

↓このファイルにスキーマも書いていく

model User {
  id Int @id @default(autoincrement())
  email String @unique
  name String?
  posts Post[]
}

model Post {
  id Int @id @default(autoincrement())
  title String
  content String?
  published Boolean @default(false)
  author User @relation(fields: [authorId], references: [id])
  authorId Int
}

Prisma Migrateについて

scheme.prismaを元にテーブルを作成する為、下記コマンドを実行

npx prisma migrate dev --name init

prisma/以下にmigrations/が作成され、
日時_–nameで指定した文字列 で命名されたディレクトリとmigration.sqlも併せて作成される

migration.sqlの内容は以下
スキーマで記述したとおりに、SQL文が発行される

-- CreateTable
CREATE TABLE "User" (
  "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
  "email" TEXT NOT NULL,
  "name" TEXT
);

-- CreateTable
CREATE TABLE "Post" (
  "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
  "title" TEXT NOT NULL,
  "content" TEXT,
  "published" BOOLEAN NOT NULL DEFAULT false,
  "authorId" INTEGER NOT NULL,
  CONSTRAINT "Post_authorId_fkey" FOREIGN KEY ("authorId") REFERENCES "User" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
);

-- CreateIndex
CREATE UNIQUE INDEX "User_email_key" ON "User"("email");

scheme.prismaを編集し、再度 prisma migrateを実行した場合

npx prisma migrate dev --name add_job_title

↓同じ様にmigration.sqlが作成される

中身は、ALTER TABLEのみといった感じ

-- AlterTable
ALTER TABLE "User" ADD COLUMN "jobTitle" TEXT;

Prisma Clientについて

↓こんな感じでバックエンドのコードがTS（JS）で記述可能です。

import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

async function main() {
  const create_user = await prisma.user.create({
    data: {
      name: 'Alice',
      email: 'alice@prisma.io',
    },
  })
  console.log(create_user)

  const find_user = await prisma.user.findMany()
  console.log(find_user)
}

main()
  .then(async () => {
    await prisma.$disconnect()
  })
  .catch(async (e) => {
    console.error(e)
    await prisma.$disconnect()
    process.exit(1)
  })

PrismaClientのインスタンスを作成

const prisma = new PrismaClient()

スキーマに書いたモデルに対して、.create()でInsertが可能です。

prisma.user.create({
　　data: {
　　　　name: 'Alice',
　　　　email: 'alice@prisma.io',
　　},
})

3.　.findMany()などのメソッドでSelect文的なことができます。

const find_user = await prisma.user.findMany()

他にもfindUniqueを利用することで、where句の様な挙動を利用できたりします。

Prisma Studio

Prismaのデータは、下記のコマンドでGUIベースで確認可能です。

npx prisma studio

次回の更新予定は、10/14（金）になります！

前回の定例内容はこちらから確認可能ですのでご興味いただければ下記のリンクから閲覧いただければと思います。

https://engineer.blog.lancers.jp/?s=フロントエンド定例