Zenn
⭐

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

2024/08/04に公開
React
Prisma
todo
zod
Bun
tech

背景

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

当記事は、Reactで開発します。
GitHubはこちら

1. ディレクトリの作成

mkdir todo-list-react
cd todo-list-react

2. バックエンドのセットアップ

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エラーが発生します。

クロスオリジン要求をブロックしました: 同一生成元ポリシーにより、http://localhost:3000/todos にあるリモートリソースの読み込みは拒否されます (理由: CORS ヘッダー ‘Access-Control-Allow-Origin’ が足りない)。ステータスコード: 200

3.PostgreSQLのDocker Compose設定

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

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ファイルを作成し、以下の内容を追加します。

DATABASE_URL="postgresql://todouser:todopassword@localhost:5432/todo_db?schema=public"

5. Prismaスキーマの設定

backend/prisma/schema.prismaファイルを以下のように編集します。

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. データベースの起動とマイグレーション

# プロジェクトのルートディレクトリで
docker-compose up -d

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

7. バックエンドのコード実装

backend/src/index.tsファイルを作成し、実装します。
Github参照

8. バックエンドの起動

bun run src/index.ts

9. フロントエンドのセットアップ

cd ../frontend
bun create vite todo-frontend -- --template react-ts
cd todo-frontend
bun install
bun add zod

※Viteとは、Create React Appの代替として人気が高まっているモダンなフロントエンド開発ツールで、高速な開発体験を提供するビルドツールのこと。

10. フロントエンドのコード実装

GitHub参照

11. フロントエンドの起動

bun run dev

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

アプリケーションの動作確認

UI

初期

1件追加

補足

開発が終わったら、Dockerコンテナを停止します。

1. Dockerコンテナの停止

Dockerコンテナを停止したい場合は、以下のコマンドを使用します。

docker-compose down

2. Dockerコンテナの停止して、データを完全に削除したい場合

-vオプションを追加します

docker-compose down -v

3. データベースの内容を直接確認したい場合

以下のコマンドでPostgreSQLコンテナに接続できます。

docker exec -it <container_name> psql -U todouser -d todo_db

関連記事

Next.jsを使った開発における勘所を鍛える
React + zod + Bun + PrismaでTODOリストを作りました
Next.js(App Router) + zod + PrismaでTODOリストを作りました
Next.js(App Router) + zod + Prisma+React Hook FormでTODOリストを作りました
GitHub

Discussion