TODO App

フル機能のTODOアプリケーション。TypeScript、React、Express、PostgreSQL、Prismaで構築されています。

機能

• ✅ TODO の作成、編集、削除
• ✅ 完了状態の切り替え
• ✅ 優先度設定（高・中・低）
• ✅ 期限設定と期限切れ表示
• ✅ タグ/カテゴリ管理
• ✅ フィルタリング（完了状態、優先度、タグ）
• ✅ ソート機能（作成日時、期限、優先度、タイトル）
• ✅ レスポンシブデザイン（Tailwind CSS）

技術スタック

バックエンド

• Node.js 20+
• Express - RESTful API
• TypeScript - 型安全性
• Prisma - ORM
• PostgreSQL - データベース
• Zod - バリデーション

フロントエンド

• React 18 - UI フレームワーク
• TypeScript - 型安全性
• Vite - ビルドツール
• Tailwind CSS - スタイリング
• React Context - 状態管理

セットアップ

前提条件

• Node.js 20以上
• PostgreSQL 15以上（またはDocker）
• npm

インストール

1. 依存関係のインストール

   npm install

2. 環境変数の設定

   cp .env.example .env

   .env ファイルを編集してデータベース接続情報を設定：

   DATABASE_URL="postgresql://postgres:password@localhost:5432/todo_app"
   PORT=3000
   NODE_ENV=development
   VITE_API_URL=http://localhost:3000

3. PostgreSQLの起動

   Docker使用の場合:

   docker run -d \
     --name todo-postgres \
     -e POSTGRES_PASSWORD=password \
     -e POSTGRES_DB=todo_app \
     -p 5432:5432 \
     postgres:15-alpine

   ローカルPostgreSQL使用の場合:

   sudo service postgresql start
   createdb todo_app

4. データベースマイグレーション

   npx prisma migrate dev --name init

5. シードデータの投入（オプション）

   npm run db:seed

開発

開発サーバーの起動

フロントエンドとバックエンドを同時に起動：

npm run dev

個別に起動する場合：

# バックエンドのみ
npm run dev:server

# フロントエンドのみ
npm run dev:client

アプリケーションは以下のURLでアクセス可能：

• フロントエンド: http://localhost:5173
• バックエンドAPI: http://localhost:3000/api

データベース管理

Prisma Studioでデータベースを視覚的に管理：

npm run prisma:studio

新しいマイグレーションを作成：

npx prisma migrate dev --name <migration-name>

ビルド

プロダクションビルド

npm run build

ビルド成果物：

• dist/server/ - サーバーコード
• dist/client/ - クライアントコード

プロダクション起動

NODE_ENV=production npm start

API エンドポイント

TODO 操作

• GET /api/todos - TODO一覧取得
  • クエリパラメータ: completed, priority, tagIds
• POST /api/todos - TODO作成
• GET /api/todos/:id - TODO詳細取得
• PUT /api/todos/:id - TODO更新
• DELETE /api/todos/:id - TODO削除
• PATCH /api/todos/:id/toggle - 完了状態切り替え

タグ操作

• GET /api/tags - タグ一覧取得
• POST /api/tags - タグ作成
• DELETE /api/tags/:id - タグ削除

プロジェクト構造

todo/
├── src/
│   ├── server/          # バックエンド
│   │   ├── controllers/ # コントローラー
│   │   ├── routes/      # ルート定義
│   │   ├── middleware/  # ミドルウェア
│   │   └── db/          # データベース設定
│   ├── client/          # フロントエンド
│   │   ├── components/  # Reactコンポーネント
│   │   ├── context/     # React Context
│   │   ├── hooks/       # カスタムフック
│   │   ├── pages/       # ページコンポーネント
│   │   └── api/         # APIクライアント
│   └── shared/          # 共有コード
│       ├── types/       # 型定義
│       └── validation/  # バリデーションスキーマ
├── prisma/
│   ├── schema.prisma    # データベーススキーマ
│   └── seed.ts          # シードデータ
└── dist/                # ビルド成果物

トラブルシューティング

Node.jsバージョンエラー

このプロジェクトはNode.js 18以上が必要です。nvmを使用してバージョンを切り替え：

nvm install 20
nvm use 20

データベース接続エラー

PostgreSQLが起動していることを確認：

# Docker
docker ps | grep todo-postgres

# ローカル
sudo service postgresql status

ポート競合

ポート3000または5173が既に使用されている場合、.envファイルでポート番号を変更してください。

ライセンス

MIT