はじめに

Next.jsの知識を深めるために、Todoアプリを作ることにしました。そのメモを残しておきます。今回はテーブル作成のメモを残します。何か間違っていることなどございましたらコメントいただけますと、とても喜びます。

今までの記事

環境構築編

https://qiita.com/naoyuki2/items/e974c630c6cbd3c55254

今回のゴール

テーブルを作成してテストデータを入れる

１．テーブル作成

schema.prismaを編集

schema.prismaにテーブルの構成を記述していく。今回はTodoアプリを作りたいので下記のような構成にする。

schema.prisma

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

migration.sql

    -- 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アプリ完成までに何記事書けるかな～？

参考にさせていただいた記事