東京電機大学旭祭実行委員会 シフト管理アプリ

使用技術

選定理由

1. インフラ・開発環境

1-1. ホスティング
採用技術: Cloudflare Workers
採用理由:

• 低遅延なレスポンス
• 無料枠が寛大で今回の要件にも耐えられる
• Cloudflareエコシステムによる一元管理
  エコシステム内で通信が完結するので処理も高速
  • Cloudflare D1 (データベース)
  • Cloudflare Durable Objects (WebSocketでの状態管理)
  • Hono (APIルーティング)

1-2. パッケージ管理
採用技術: pnpm
採用理由:

• npmに比べ、パッケージインストールが高速
• モノレポ機能に標準対応
  • 今回はapps/webとapps/apiでプロジェクトを分離
  • フロントとバックを疎結合にして保守性・拡張性を担保

2. フロントエンド

2-1. ライブラリ
採用技術: React + Vite
採用理由: SPA開発のデファクトスタンダードで、チーム開発に最適
SPA(CSR) vs SSR (CSR, SSR, SPA, MPA, PPRの意味 | Zenn)

• シフトやチャットのリアルタイム同期にCSRが必須
  • アプリ全体をSSRにしてもCSRが混在することになる
    • 状態管理が複雑化し、Hydration Errorが頻発
• SPAデメリット 1: SEO対策の難しさ
  要件外 (団体内でのみ運用するので、SEO対策が不要)
• SPAデメリット 2: 初期表示の遅さ
  解決策: PWA化してキャッシュ設定を最適化する

2-2. 非同期状態管理・検証
目的: フロント・バック間のデータ整合性維持
採用技術: TanStack Query, Zod
採用理由:

• 非同期処理の簡略化 (TanStack Query)
  • データ取得・更新、キャッシュ管理、同期を自動化
  • Optimistic Update (楽観的更新) によるUX向上
• スキーマ検証 (Zod)
  • 取得したデータを検証し、型安全でないデータを弾ける
  • エコシステムが大きく、Hono, Drizzle, Better Authとの連携が強い

2-3. ルーティング
目的: SPAの画面遷移とURL管理
採用技術: TanStack Router (Next.js経験者のためのTanStack Router入門 | Zenn)
採用理由:

• ルーティングの厳密な型安全性
  • パスやクエリが型推論・検証されるのでリンク切れや実行時エラーを防げる
  • 絞り込み等でクエリを大量に使っても型を通せるので、管理が安全かつ容易
• TanStack Queryとの相性
  • TanStack Query前提のAPI設計で、キャッシュを最大限活用できる
  • React RouterではTanStack Queryとのコンフリクトがある
• ルート単位のCode Splittingも可能

2-4. コンポーネント
目的: コンポーネントの設計コストの削減・デザイン効率化
採用技術: shadcn/ui (ReactのUIコンポーネントならshadcn/uiがちょうどいい | Zenn)
採用理由:
Tailwind + Radix UI(or Base UI)のコンポーネントを、必要に応じてプロジェクトにコピーできる

• 開発速度が向上する
• UIライブラリと異なりカスタマイズ性が高い
• 単なるコンポーネントなのでバンドルサイズが小さい
  公式サイトのcreateページでGUI上でカスタマイズできるらしい

2-5. コード最適化
目的: Reactコードをビルド時に自動で最適化する
採用技術: React Compiler
採用理由:

• useMemoやuseCallbackを書かずに済む
• 依存関係も整理してくれるらしい

2-6. PWA化
目的: PWA化 (プッシュ通知・キャッシュ管理・オフライン対応)
採用技術: vite-plugin-pwa (ViteアプリのPWA化 | Zenn)
採用理由:

• Viteエコシステムなら一択
• 設定がシンプルで、ほぼ自動で目的を達成できる

3. バックエンド

3-1. フレームワーク
目的: APIルーティング
採用技術: Hono (Webフレームワーク)
採用理由:

• 軽量かつ高速、記法もシンプル
• Workers向けに最適化されている
• RPC機能: APIの型をフロントに共有でき、バグを防止できる
  • Zodとの相性が良い

3-2. データベース
目的: データ永続化
採用技術: Cloudflare D1 (SQLite互換)
採用理由:
Workersとの相性

• 接続設定が最小の記述で完結する
• Workersと同じエッジ環境で動作するので、超低遅延

3-3. ORM
目的: 型安全なデータベース操作
採用技術: Drizzle
採用理由:

• エッジ環境でも動作する軽量さ
• スキーマから型を自動生成し、型推論させられる
• SQLiteの制約を吸収できる
  例えばD1 (SQLite互換) にはDATE型がないが、スキーマ定義によってINTEGERをDateオブジェクトに変換させられる

3-4. 状態管理・同期
目的: シフト調整・チャット機能のリアルタイム同期
採用技術: Cloudflare Durable Objects
採用理由:

• WebSocketの双方向通信でリアルタイム同期を実現する
• 整合性が保証され、複数のユーザーが同時にアクセスしてもデータが競合しない
• Workersとの相性
  • 接続設定が最小の記述で完結する
  • Workersと同じエッジ環境で動作するので、超低遅延
  • Workersから直接WebSocketをハンドリングできる

3-5. 認証基盤
目的: 安全かつ柔軟な認証
採用技術: Better Auth
採用理由:

• HonoやWorkersと相性が良く、セッションも管理しやすい
• Discord OAuth / Notion OAuthに対応
  • メール配信は高コストなので、Discord認証が最も現実的で安全な認証かも？