【01】Next.js14でTodoアプリ作成(CREATE編)

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

<details><summary>今までの記事</summary>

### 環境構築編

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

</details>

# 今回のゴール
テーブルを作成してテストデータを入れる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582046/30da7eed-7ad2-b126-9500-cbde080ab5ab.png)

# １．テーブル作成
### 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
}
```

:::note warn
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`が以下のようなファイルになっているはず。
```shell:ターミナル
npx prisma migrate dev --name init
```
```sql: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の型を生成する。

```shell:ターミナル
npx prisma generate
```

# ２．テストデータの挿入
テーブルはできたけど、中身が空なので何か入れよう。２つのやり方を紹介する。

### Vercelのダッシュボードから挿入

Vercelにアクセスして、プロジェクト選択、`Storage`タブ、Postgresのデータベース選択、の順にクリック。

https://vercel.com/

`Data`という文字の下に`Browse`と`Query`で切り替えれそうなUIがあるので、`Query`の方をクリックする。そしたら真っ黒な長方形が出る。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582046/0e4c1948-69a6-e507-9965-870d7778432f.png)

ここに`INSERT`文を書くことでテストデータを挿入できる。下のSQLを貼り付けて、`Run Query`をクリック。`Ran query successfully`と表示されるはず。

```sql:まっくろ長方形
insert into "todo" (title) values ('掃除'),('勉強'),('買い物');
```

そしたら今度は、`Browse`の方に切り替える。プルダウンから`todo`テーブルを選択すると挿入したテストデータが確認できる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582046/80cb876f-4d45-4364-7f6d-86699c373c61.png)

### Prisma Studioから挿入する
`Prisma Studio`というGUIでテーブル操作ができるものが用意されている。下記のコマンドを実行することで、ローカルサーバが立ち上がり、アクセスできる。
```shell:ターミナル
npx prisma studio
```

使い方は説明しなくても多分わかる。多分。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582046/6fc4f226-8d66-f8c5-afd7-fd0b844d925d.png)

# おわりに

長い記事を書くのが苦手なので細かく区切って書いてます。Todoアプリ完成までに何記事書けるかな～？

# 参考にさせていただいた記事
https://qiita.com/curry__30/items/95d3655fa23d84b959a3

https://zenn.dev/mostlove/articles/c9e6f1aa45ea09

https://zenn.dev/stafes_blog/articles/i-love-prisma

https://qiita.com/yuba/items/3c4326e1f171a80543c8