Trello フルスタッククローン

Cloudflare Workers上で動作するTrelloクローンアプリケーション。モダンなフルスタック技術とドメイン駆動設計（DDD）を採用した実装例です。

技術スタック

フロントエンド

• React 19 - モダンなUIライブラリ
• Vite - 高速ビルドツール＆開発サーバー
• TanStack Router - ファイルベースルーティング
• TanStack Query - サーバーステート管理
• Tailwind CSS 4 - ユーティリティファーストCSS
• Better Auth - 認証システム

バックエンド

• Hono - 軽量・高速なWebフレームワーク
• Cloudflare Workers - エッジコンピューティングプラットフォーム
• Cloudflare D1 - サーバーレスSQLiteデータベース
• Drizzle ORM - 型安全なORM
• Zod - スキーマバリデーション

アーキテクチャ

• ドメイン駆動設計（DDD） - 値オブジェクト、エンティティ、リポジトリパターン
• 依存性注入（DI） - カスタムDIコンテナによる疎結合な設計
• レイヤードアーキテクチャ - Controller → Service → Repository → Domain

セットアップ

依存関係のインストール

npm install

環境変数の設定

Drizzle Studioを使用する場合は、以下の環境変数を設定してください：

CLOUDFLARE_ACCOUNT_ID=your-account-id
CLOUDFLARE_DATABASE_ID=your-database-id
CLOUDFLARE_D1_TOKEN=your-d1-token

開発

開発サーバーの起動

npm run dev

アプリケーションは http://localhost:3000 で起動します。

データベース管理

# スキーマからマイグレーションファイルを生成
npm run db:gen

# ローカルDBにマイグレーションを適用
npm run db:migrate

# 本番DBにマイグレーションを適用
npm run db:migrate:remote

# ローカルDB用のDrizzle Studioを起動
npm run db:studio

# 本番DB用のDrizzle Studioを起動
npm run db:studio:prod

リンティング

npm run lint

型チェック

npm run cf-typegen  # Cloudflare Workers型定義の生成
npm run check       # TypeScript + ビルド + デプロイドライラン

本番環境

ビルド

npm run build

プレビュー

npm run preview

デプロイ

npm run deploy

モニタリング

npx wrangler tail

プロジェクト構成

src/
├── react-app/           # フロントエンド
│   ├── routes/          # TanStack Routerのルート定義
│   ├── features/        # 機能別コンポーネント
│   ├── lib/             # ライブラリ設定
│   └── App.tsx
│
└── worker/              # バックエンド
    ├── controllers/     # HTTPリクエストハンドラ
    ├── service/         # ビジネスロジック
    ├── domain/          # ドメインモデル
    │   ├── entities/    # エンティティ
    │   └── value-object/ # 値オブジェクト
    ├── infrastructure/  # リポジトリ実装
    ├── db/              # データベーススキーマ
    ├── middleware/      # ミドルウェア
    └── index.ts         # エントリーポイント

アーキテクチャの特徴

ドメイン駆動設計（DDD）

• 値オブジェクト: バリデーション付きの型安全なプリミティブ

  • .of(value) - バリデーションエラー時は例外をスロー
  • .tryOf(value) - 成功/失敗の結果オブジェクトを返却

• エンティティ: イミュータブルなビジネスドメインオブジェクト

  • 静的ファクトリメソッドで生成
  • ビジネスロジックをメソッドとして持つ

• リポジトリパターン: データ永続化の抽象化

  • インターフェースとして定義
  • Drizzle ORMで型安全なクエリ実行

依存性注入

• カスタムDIコンテナで依存関係を管理
• ミドルウェアでHonoコンテキストに注入
• テスタビリティの向上

認証

• Better Authによるセッションベース認証
• /api/auth/* エンドポイントで認証処理
• injectAuth ミドルウェアで保護されたルート

開発ガイド

詳細なアーキテクチャ説明や開発パターンについては CLAUDE.md を参照してください。

参考リンク

• Cloudflare Workers ドキュメント
• Hono ドキュメント
• Drizzle ORM ドキュメント
• TanStack Router ドキュメント
• Better Auth ドキュメント