アーキテクチャ

システム概要

yukuyuku-appは、Next.js 15とFirebaseを使用したモダンな旅行管理アプリケーションです。 PWA対応により、モバイルアプリのような体験を提供します。

技術スタック

フロントエンド

  • • Next.js 15 (App Router)
  • • React 18
  • • TypeScript
  • • Tailwind CSS
  • • Lucide React Icons
  • • next-pwa (PWA)

バックエンド・インフラ

  • • Firebase Authentication
  • • Firestore Database
  • • Vercel (デプロイ)
  • • GitHub Actions (CI/CD)

ディレクトリ構造

src/
├── app/                    # Next.js App Router
│   ├── docs/              # 開発者向けドキュメント
│   ├── join/[code]/       # 旅行招待ページ
│   ├── trip/[tripId]/     # 旅行詳細ページ
│   ├── globals.css        # グローバルスタイル
│   ├── layout.tsx         # ルートレイアウト
│   └── page.tsx           # ホームページ
├── components/            # 再利用可能コンポーネント
│   ├── Header.tsx
│   ├── LoginModal.tsx
│   ├── CreateTripModal.tsx
│   └── ...
├── contexts/              # React Context
│   └── AuthContext.tsx    # 認証状態管理
├── lib/                   # ユーティリティ・設定
│   ├── firebase.ts        # Firebase設定
│   ├── firestore.ts       # Firestore操作
│   └── constants.ts       # 定数・ヘルパー
└── types/                 # TypeScript型定義
    └── index.ts

データフロー

認証フロー

Google認証

ログイン画面
→
Firebase Auth
→
AuthContext
→
アプリ画面

ゲスト認証

招待URL
→
匿名認証
→
閲覧専用

※ セッション終了時に自動削除

データフロー

旅行管理フロー

  1. ユーザーが旅行を作成（招待コード自動生成）
  2. 招待URLで他のユーザーを招待
  3. メンバーがスケジュール・メモ・チェックリストを編集
  4. リアルタイムでFirestoreに変更を保存

認証・認可

アクセス権限

  • 読み取り: メンバーのみ（memberIds に含まれるユーザー）
  • 作成: 認証済みユーザー
  • 更新: メンバーのみ
  • 削除: 作成者のみ
  • ゲスト: 閲覧専用（招待URL経由のみ）

パフォーマンス最適化

フロントエンド

  • • Next.js App Router（サーバーコンポーネント）
  • • 動的インポートによるコード分割
  • • PWAによるオフライン対応
  • • 画像最適化（next/image）

バックエンド

  • • Firestoreインデックス最適化
  • • バッチ処理によるwrite操作効率化
  • • CDN配信（Vercel Edge Network）

デプロイメント

CI/CD パイプライン

  1. GitHub mainブランチへのpush
  2. Vercelが自動でビルド・デプロイ
  3. プレビューデプロイメント（Pull Request時）
  4. 本番環境への自動反映

今後の拡張予定

機能拡張

  • しおり印刷機能
  • PDFのオフライン対応
  • 日付未定欄設置
  • ブックマーク機能
  • ダークモード対応
  • 言語共通化（i18n）