背景
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リストアプリケーションの基本的なセットアップと実装が完了しました。
アプリケーションの動作確認
- バックエンドサーバー: http://localhost:3000
- フロントエンド: http://localhost:5173 (Viteのデフォルトポート)
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