はじめに
Next.jsの知識を深めるために、Todoアプリを作ることにしました。そのメモを残しておきます。今回はテーブル作成のメモを残します。何か間違っていることなどございましたらコメントいただけますと、とても喜びます。
今回のゴール
テーブルを作成してテストデータを入れる
１．テーブル作成
schema.prismaを編集
schema.prismaにテーブルの構成を記述していく。今回はTodoアプリを作りたいので下記のような構成にする。
model todo {
id Int @id @default(autoincrement())
title String
content String?
isDone Boolean @default(false)
createdAt DateTime @default(now())
updatedAt DateTime @default(now()) @updatedAt
}
2024/01/18修正
テーブルの名前をtodoとあえて全て小文字にしています。先頭大文字でテーブル名をつけるとマイグレート時に自動的に小文字になるみたいで、後でめんどくさかったので修正しました。
- id
- Todoを識別する一意なID
-
Int型 -
@idで主キーに指定 -
@default(autoincrement())でデフォルトの値を自動的にインクリメントされる値に設定
- title
- Todoのタイトルを表す
-
String型
- content
- タスクの内容を表す
-
String型 -
?はオプショナル(任意)であることを表す(nullでもOKという意味)
- isDone
- Todoが完了したかどうかを表す
-
Boolean型 -
@default(false)でデフォルトの値をfalse(Todo未完了)に設定
- createdAt
- Todoが作成された日時を表す
-
DateTime型 -
@default(now())でデフォルトの値を現在の日時に設定する(@createdAtはないのね)
- updatedAt
- Todoが最後に更新された日時を表す
-
DateTime型 -
@updateAtデコレーターによってレコードが更新されるたびに自動的に現在の日時に更新される
マイグレート
下記のコマンドをターミナルに入力することで、schema.prismaを参照して、テーブルを作成してくれる。SQLを知らなくても書けるから便利。prisma/migrations/日時?/migration.sqlが以下のようなファイルになっているはず。
npx prisma migrate dev --name init
-- CreateTable
CREATE TABLE "todo" (
"id" SERIAL NOT NULL,
"title" TEXT NOT NULL,
"content" TEXT NOT NULL,
"isDone" BOOLEAN NOT NULL DEFAULT false,
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
"updatedAt" TIMESTAMP(3) NOT NULL,
CONSTRAINT "todo_pkey" PRIMARY KEY ("id")
);
下記のコマンドを実行して、schema.prismaに対応するTypeScriptの型を生成する。
npx prisma generate
２．テストデータの挿入
テーブルはできたけど、中身が空なので何か入れよう。２つのやり方を紹介する。
Vercelのダッシュボードから挿入
Vercelにアクセスして、プロジェクト選択、Storageタブ、Postgresのデータベース選択、の順にクリック。
Dataという文字の下にBrowseとQueryで切り替えれそうなUIがあるので、Queryの方をクリックする。そしたら真っ黒な長方形が出る。
ここにINSERT文を書くことでテストデータを挿入できる。下のSQLを貼り付けて、Run Queryをクリック。Ran query successfullyと表示されるはず。
insert into "todo" (title) values ('掃除'),('勉強'),('買い物');
そしたら今度は、Browseの方に切り替える。プルダウンからtodoテーブルを選択すると挿入したテストデータが確認できる。
Prisma Studioから挿入する
Prisma StudioというGUIでテーブル操作ができるものが用意されている。下記のコマンドを実行することで、ローカルサーバが立ち上がり、アクセスできる。
npx prisma studio
使い方は説明しなくても多分わかる。多分。
おわりに
長い記事を書くのが苦手なので細かく区切って書いてます。Todoアプリ完成までに何記事書けるかな～？
参考にさせていただいた記事