環境構築¶

Phase 2 構築・配置完了報告¶

実施内容¶

Phase 2の構築・配置フェーズにおいて、以下の作業を完了しました。

1. プロジェクトセットアップ¶

Vite + React + TypeScript環境

Vite 7.x を使用した高速な開発環境の構築
React 19.x + TypeScript 5.8.x の最新版を採用
ESModules対応の設定

2. テスト環境構築¶

Vitest + React Testing Library

Vitest 3.2.x によるテスト環境構築
React Testing Library によるコンポーネントテスト対応
jsdom環境でのDOMテスト実行
カバレッジレポート生成設定
3A原則（Arrange, Act, Assert）に基づく日本語テスト記述

3. コード品質管理¶

ESLint + Prettier

ESLint 9.x による静的解析設定
Prettier 3.x によるコード自動整形
import文の自動ソート設定（@trivago/prettier-plugin-sort-imports）
フォーマットチェックのCI統合

4. プロジェクト構造¶

ヘキサゴナルアーキテクチャの実装

app/src/
├── domain/           # ドメイン層
│   ├── models/      # Puyo, Field, Game等のドメインモデル
│   ├── services/    # ドメインサービス
│   └── repositories/# リポジトリインターフェース
├── application/      # アプリケーション層
│   ├── ports/       # ポート定義
│   └── services/    # ユースケース実装
├── infrastructure/   # インフラストラクチャ層
│   ├── repositories/# リポジトリ実装
│   └── services/    # 外部サービス連携
└── presentation/     # プレゼンテーション層
    ├── components/   # UIコンポーネント
    └── ports/        # UIポート

5. CI/CD設定¶

GitHub Actions

.github/workflows/ci.yml: テスト・ビルド・リント自動実行
.github/workflows/deploy.yml: Vercelへの自動デプロイ
Node.js 20.xでの実行環境
カバレッジレポートのアーティファクト保存

Vercel デプロイメント

vercel.json: Vercel設定ファイル
mainブランチへの自動デプロイ設定
PRプレビューデプロイ対応

6. 開発スクリプト¶

package.jsonに以下のスクリプトを追加：

コマンド	説明
`npm run dev`	開発サーバー起動（Vite）
`npm run build`	TypeScriptビルド + Viteビルド
`npm run preview`	プロダクションプレビュー
`npm test`	Vitestでテスト実行（ウォッチモード）
`npm run test:coverage`	カバレッジ付きテスト実行
`npm run test:ui`	Vitest UIでテスト実行
`npm run lint`	ESLintでコード検証
`npm run format`	Prettierでコード整形
`npm run format:check`	フォーマットチェック

実装サンプル¶

ドメインモデルPuyoの実装とテストを作成：

src/domain/models/Puyo.ts: 関数型プログラミングによるイミュータブルなぷよモデル
src/domain/models/Puyo.test.ts: 3A原則に基づく単体テスト

次のステップ¶

Phase 3の開発フェーズに移行し、以下のイテレーション開発を開始できます：

Iteration 1: ゲーム基盤（MVP）
ドメインモデル実装（Field, Game）
基本UI実装
操作システム
Iteration 2: 消去・連鎖システム
連鎖検出
スコア計算
ゲームオーバー判定
Iteration 3: UI/UX改善
アニメーション
音響システム
ゲーム機能拡張

環境構築手順¶

新規開発者向けのセットアップ手順：

# リポジトリのクローン
git clone <repository-url>
cd case-study-game-dev

# appディレクトリへ移動
cd app

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

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

# 別ターミナルでテスト実行
npm test