React + Zod + Bun + PrismaでTODOリストを作りました

# 背景
React、Next.jsでの開発の違いを体感すべく、React、Next.jsそれぞれでTODOリストを作ることにしました。

当記事は、Reactで開発します。
GitHubは[こちら](https://github.com/asami-okina/todo-list/tree/main/todo-list-react)

# 1. ディレクトリの作成
```bash
mkdir todo-list-react
cd todo-list-react
```

# 2. バックエンドのセットアップ
```bash
cd backend

# Bunをインストール（まだの場合）
curl -fsSL https://bun.sh/install | bash

# プロジェクトの初期化
bun init

# 必要なパッケージをインストール
bun add prisma @prisma/client zod
bun add -d typescript @types/node
bun add @elysiajs/cors 

# Prismaの初期化
bunx prisma init
```

### @elysiajs/corsとは？
フロントエンド（React アプリケーション）がバックエンド（Bun サーバー）にリクエストを送信しようとしたときに発生する CORS（Cross-Origin Resource Sharing）エラーを防ぐために必要。

これがないと、以下のようなCORSエラーが発生します。
![](https://storage.googleapis.com/zenn-user-upload/ab93f4caaa46-20240804.png)
```txt
クロスオリジン要求をブロックしました: 同一生成元ポリシーにより、http://localhost:3000/todos にあるリモートリソースの読み込みは拒否されます (理由: CORS ヘッダー ‘Access-Control-Allow-Origin’ が足りない)。ステータスコード: 200
```

# 3.PostgreSQLのDocker Compose設定
今回、DBはPostgreSQLを用います。
プロジェクトのルートディレクトリにdocker-compose.ymlファイルを作成します。

```txt
version: '3.8'

services:
  db:
    image: postgres:13
    environment:
      POSTGRES_USER: todouser
      POSTGRES_PASSWORD: todopassword
      POSTGRES_DB: todo_db
    ports:
      - "5432:5432"
    volumes:
      - postgres_data:/var/lib/postgresql/data

volumes:
  postgres_data:
```
# 4. 環境変数の設定
backend/.envファイルを作成し、以下の内容を追加します。

```txt
DATABASE_URL="postgresql://todouser:todopassword@localhost:5432/todo_db?schema=public"
```
# 5. Prismaスキーマの設定
backend/prisma/schema.prismaファイルを以下のように編集します。

```txt
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

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

model Todo {
  id        Int      @id @default(autoincrement())
  title     String
  completed Boolean  @default(false)
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}
```

# 6. データベースの起動とマイグレーション
```bash
# プロジェクトのルートディレクトリで
docker-compose up -d

# バックエンドディレクトリで
cd backend
bunx prisma migrate dev --name init
```

# 7. バックエンドのコード実装
backend/src/index.tsファイルを作成し、実装します。
[Github参照](https://github.com/asami-okina/todo-list/tree/main/todo-list-react/backend)

# 8. バックエンドの起動
```bash
bun run src/index.ts
```

# 9. フロントエンドのセットアップ
```bash
cd ../frontend
bun create vite todo-frontend -- --template react-ts
cd todo-frontend
bun install
bun add zod
```
※[Vite](https://ja.vitejs.dev/)とは、Create React Appの代替として人気が高まっているモダンなフロントエンド開発ツールで、高速な開発体験を提供するビルドツールのこと。

# 10. フロントエンドのコード実装
[GitHub](https://github.com/asami-okina/todo-list/tree/main/todo-list-react/frontend/todo-frontend)参照

# 11. フロントエンドの起動
```bash
bun run dev
```

これで、TODOリストアプリケーションの基本的なセットアップと実装が完了しました。

## アプリケーションの動作確認
- バックエンドサーバー: http://localhost:3000
- フロントエンド: http://localhost:5173 (Viteのデフォルトポート)

## UI
### 初期
![](https://storage.googleapis.com/zenn-user-upload/dad09462e235-20240804.png)

### 1件追加
![](https://storage.googleapis.com/zenn-user-upload/4823444e806b-20240804.png)

## 補足
開発が終わったら、Dockerコンテナを停止します。
### 1. Dockerコンテナの停止
Dockerコンテナを停止したい場合は、以下のコマンドを使用します。
```bash
docker-compose down
```
### 2. Dockerコンテナの停止して、データを完全に削除したい場合
-vオプションを追加します
```bash
docker-compose down -v
```

# 3. データベースの内容を直接確認したい場合
以下のコマンドでPostgreSQLコンテナに接続できます。
```bash
docker exec -it <container_name> psql -U todouser -d todo_db
```