UZU Docs

Appearance

Web アプリケーション概要 ​

UZU Web アプリケーションは Next.js 15 をベースとした、モダンなマーダーミステリープラットフォームのWebインターフェースです。

技術スタック ​

フレームワーク ​

  • Next.js 15: App Router を使用したReactフレームワーク
  • React 19: 最新のReact機能を活用
  • TypeScript: 型安全性を確保

スタイリング ​

  • Tailwind CSS: ユーティリティファーストのCSSフレームワーク
  • CSS Modules: コンポーネントごとのスタイル分離

状態管理とデータフェッチング ​

  • Apollo Client: GraphQLクライアント
  • React Hook Form: フォーム管理
  • Zustand: グローバル状態管理

開発ツール ​

  • ESLint: コード品質管理
  • Prettier: コードフォーマッター
  • GraphQL Code Generator: 型定義の自動生成

プロジェクト構造 ​

javascript/apps/web/
├── app/                 # Next.js App Router
│   ├── (routes)/       # ルートグループ
│   ├── api/            # APIルート
│   └── layout.tsx      # ルートレイアウト
├── components/         # 共有コンポーネント
├── hooks/             # カスタムフック
├── lib/               # ユーティリティ関数
├── services/          # APIサービス層
└── types/             # 型定義

主要機能 ​

ユーザー管理 ​

  • ソーシャルログイン（Google, Apple, Twitter）
  • プロフィール管理
  • フレンド機能

イベント管理 ​

  • イベント作成・参加
  • リアルタイム更新
  • スケジュール管理

シナリオシステム ​

  • シナリオ閲覧
  • レビュー・評価
  • お気に入り管理

プレイルーム ​

  • WebRTCによる音声通話
  • リアルタイムチャット
  • キャラクター選択

開発環境セットアップ ​

前提条件 ​

  • Node.js 20+
  • pnpm または npm
  • Docker (バックエンドサービス用)

インストール ​

bash
# ディレクトリ移動
cd javascript/apps/web

# 依存関係インストール
npm install

# 環境変数設定
cp .env.example .env.local

開発サーバー起動 ​

bash
# 開発サーバー起動
npm run dev

# または task コマンドを使用
task js:dev SERVICE=web

開発サーバーは http://localhost:3000 で起動します。

ビルドとデプロイ ​

プロダクションビルド ​

bash
# ビルド
npm run build

# プロダクションモードで起動
npm run start

静的エクスポート ​

bash
# 静的HTMLとして出力
npm run build
npm run export

コーディング規約 ​

インポート規則 ​

  • 相対インポートを使用（パスエイリアスは避ける）
  • 順序: React → 外部ライブラリ → 内部モジュール

コンポーネント規則 ​

  • 関数コンポーネント + TypeScriptを使用
  • props の型定義を明確にする
  • カスタムフックで複雑なロジックを分離

スタイリング規則 ​

  • Tailwind CSS を優先
  • 複雑なスタイルは CSS Modules を使用
  • テキストスタイル: t-(dense|normal|comfort)_(xs|sm|md|...)_(regular|bold)

非同期処理 ​

  • Next.js 15+ の非同期パラメータパターンを使用
  • エラーハンドリングを適切に実装

パフォーマンス最適化 ​

画像最適化 ​

  • Next.js Image コンポーネントを使用
  • 適切なサイズと形式を指定
  • Lazy loading を活用

コード分割 ​

  • 動的インポートで必要な時にロード
  • ルートベースの自動分割を活用

キャッシュ戦略 ​

  • Apollo Client のキャッシュを活用
  • ISR（Incremental Static Regeneration）の活用
  • Edge Caching の設定

テスト ​

ユニットテスト ​

bash
# テスト実行
npm run test

# カバレッジレポート
npm run test:coverage

E2Eテスト ​

bash
# Playwright テスト実行
npm run test:e2e

トラブルシューティング ​

よくある問題 ​

  1. ビルドエラー

    • 型定義の不整合 → npm run gen でGraphQL型を再生成
    • ESLintエラー → npm run lint:fix で自動修正

  2. 開発サーバーの問題

    • ポート競合 → 他のプロセスを停止または別ポートを使用
    • Hot Reload が効かない → .next ディレクトリを削除して再起動

  3. GraphQLエラー

    • スキーマ不一致 → バックエンドと同期を確認
    • 認証エラー → トークンの有効期限を確認

関連ドキュメント ​

リソース ​