オセロゲーム (Express.js + React版)

React + Express.js で構築したオセロゲームです。
フロントエンドはReact Router v7、バックエンドはExpress.jsを使用しています。

🚀 クイックスタート

必要な環境

Node.js 18以上
npm または yarn

🏗️ アーキテクチャと技術構成

フロントエンド技術構成

React 19: 最新のUIライブラリ
React Router v7: SPAのルーティング（ファイルベースルーティング）
TypeScript: 静的型付けによる開発体験向上
Tailwind CSS v4: ユーティリティファーストなCSSフレームワーク
Vite: 高速なビルドツールとHMR対応

バックエンド技術構成

Express.js 4: Node.js用の軽量Webフレームワーク
TypeScript: サーバーサイドでも静的型付け
CORS: クロスオリジンリクエスト対応
UUID: ゲームID生成
tsx: TypeScript実行環境（開発用）

インフラ技術構成

Docker: アプリケーションのコンテナ化
Docker Compose: マルチコンテナアプリケーションの管理
serve: 静的ファイル配信（プロダクション）

📁 プロジェクト構成

全体構成

dohack-example-express/
├── backend/                    # Express.js APIサーバー
│   ├── src/
│   │   ├── server.ts          # メインサーバーファイル
│   │   ├── othelloEngine.ts   # ゲームロジック
│   │   └── types.ts           # 型定義
│   ├── package.json
│   ├── tsconfig.json
│   ├── Dockerfile
│   └── .dockerignore
├── frontend/                   # React アプリケーション
│   ├── app/
│   │   ├── routes/            # ページコンポーネント
│   │   │   ├── home.tsx       # スタート画面
│   │   │   ├── game.tsx       # ゲーム画面
│   │   │   └── result.tsx     # 結果画面
│   │   ├── hooks/
│   │   │   └── useOthelloAPI.ts # API通信フック
│   │   ├── app.css
│   │   ├── root.tsx
│   │   └── routes.ts
│   ├── public/
│   │   └── favicon.ico
│   ├── package.json
│   ├── vite.config.ts
│   ├── tsconfig.json
│   ├── react-router.config.ts
│   ├── Dockerfile
│   └── .dockerignore
├── docker-compose.yml
├── .env.example
├── .dockerignore
└── README.md

バックエンド構成詳細

`backend/src/server.ts`

Express.jsサーバーのメインファイル。7つのAPIエンドポイントを提供：

POST /api/games - 新しいゲーム作成
GET /api/games/:gameId - ゲーム状態取得
POST /api/games/:gameId/moves - プレイヤーの手
POST /api/games/:gameId/computer-move - AIの手
DELETE /api/games/:gameId - ゲーム削除
GET /api/games - 全ゲーム一覧
GET /health - ヘルスチェック

`backend/src/othelloEngine.ts`

オセロゲームのコアロジック：

ゲーム状態管理: Mapベースのメモリ内ストレージ
ルール実装: 有効手判定、石の反転処理
AI戦略: コーナー優先 → エッジ優先 → 最大取得数

`backend/src/types.ts`

TypeScript型定義：

export type Player = 1 | -1;
export type Board = (Player | 0)[][];

export interface GameState {
  id: string;
  board: Board;
  currentPlayer: Player;
  gameOver: boolean;
  blackCount: number;
  whiteCount: number;
  createdAt: Date;
  lastMove?: { row: number; col: number };
}

フロントエンド構成詳細

`frontend/app/routes/`

React Router v7のファイルベースルーティング：

home.tsx: スタート画面（ゲーム説明とスタートボタン）
game.tsx: メインゲーム画面（8x8ボード、AI対戦）
result.tsx: 結果表示画面（勝敗と石数）

`frontend/app/hooks/useOthelloAPI.ts`

API通信を管理するカスタムフック：

export function useOthelloAPI() {
  const [gameState, setGameState] = useState<GameState | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  
  const initGame = useCallback(async () => { /* API呼び出し */ }, []);
  const makeMove = useCallback(async (row: number, col: number) => { /* API呼び出し */ }, []);
  
  return { gameState, loading, error, initGame, makeMove, /* ... */ };
}

🔧 環境構築・セットアップ

1. ローカル開発環境

バックエンドセットアップ

# バックエンドディレクトリに移動
cd backend

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

# 開発サーバーを起動（ポート3001）
npm run dev

フロントエンドセットアップ

# フロントエンドディレクトリに移動（新しいターミナル）
cd frontend

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

# 開発サーバーを起動（ポート5173）
npm run dev

確認

フロントエンド: http://localhost:5173
バックエンドAPI: http://localhost:3001/health

2. Docker環境（推奨）

開発環境

# 開発環境で起動（デフォルト）
docker-compose up -d

# ログを確認
docker-compose logs -f

# 停止
docker-compose down

アクセス先:

フロントエンド: http://localhost:5173
バックエンドAPI: http://localhost:3001

プロダクション環境

# プロダクション環境で起動
NODE_ENV=production FRONTEND_PORT=3000 docker-compose up -d

アクセス先:

フロントエンド: http://localhost:3000
バックエンドAPI: http://localhost:3001

環境設定

# .env ファイルを作成（オプション）
cp .env.example .env

# カスタム設定例
NODE_ENV=development
FRONTEND_PORT=5173

3. プロダクション用ビルド

手動ビルド

# バックエンド
cd backend
npm run build
npm start

# フロントエンド
cd frontend
npm run build

🎯 実装されている機能

ゲーム機能

新しいゲーム作成: REST APIでゲーム状態を管理
プレイヤー vs AI: 戦略的AIによる自動対戦
リアルタイム更新: APIを通じた状態同期
ゲーム履歴: 最後の手の記録

AI戦略

コーナー優先: 角を取れる場合は最優先
エッジ戦略: 端を取れる場合は次に優先
最大取得: 最も多くの石を取れる手を選択

フロントエンド機能

状態管理: カスタムフックによるAPI状態管理
エラーハンドリング: 通信エラーの適切な処理
ローディング状態: 非同期処理中の表示
レスポンシブデザイン: モバイル対応

🛠️ 開発のヒント

バックエンド開発

新しいAPIエンドポイントの追加

// backend/src/server.ts
app.get('/api/stats', (req, res) => {
  try {
    const stats = othello.getGameStats();
    res.json({ success: true, stats });
  } catch (error) {
    res.status(500).json({ success: false, error: 'エラーメッセージ' });
  }
});

データベース連携

現在はメモリ内で状態管理していますが、以下で永続化可能：

// 例: MongoDB連携
import { MongoClient } from 'mongodb';

class OthelloEngine {
  private db: Db;
  
  async createGame(): Promise<GameState> {
    const game = { /* ゲーム状態 */ };
    await this.db.collection('games').insertOne(game);
    return game;
  }
}

フロントエンド開発

新しいページの追加

frontend/app/routes/ に新しい.tsxファイルを作成
frontend/app/routes.ts にルートを追加

// frontend/app/routes.ts
export default [
  index("routes/home.tsx"),
  route("/game", "routes/game.tsx"),
  route("/result", "routes/result.tsx"),
  route("/settings", "routes/settings.tsx"), // 新しいページ
] satisfies RouteConfig;

API呼び出しの追加

// frontend/app/hooks/useOthelloAPI.ts
const getGameStats = useCallback(async () => {
  const response = await fetch(`${API_BASE_URL}/stats`);
  const data = await response.json();
  return data;
}, []);

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

よくある問題

バックエンドサーバーが起動しない

# ポートが使用中の場合
PORT=3002 npm run dev

# 依存関係を再インストール
rm -rf node_modules package-lock.json
npm install

フロントエンドがバックエンドに接続できない

CORS設定を確認: backend/src/server.ts
API URL を確認: frontend/app/hooks/useOthelloAPI.tsのAPI_BASE_URL
両方のサーバーが起動しているか確認

Docker関連の問題

# コンテナとイメージをクリーンアップ
docker-compose down
docker system prune -f

# 再ビルド
docker-compose up --build

型エラーが発生する場合

# TypeScript設定を確認
npm run typecheck

# 型定義を再生成
rm -rf node_modules package-lock.json
npm install

📖 学習リソース

🎨 次のステップ

基本的な拡張

ユーザー認証機能
ゲーム履歴の永続化（データベース）
マルチプレイヤー対応
リアルタイム通信（WebSocket）

高度な拡張

CI/CD パイプライン
テストの追加（Jest, Cypress）
パフォーマンス最適化
セキュリティ強化
クラウドデプロイ（AWS、GCP、Azure）

🔧 開発コマンド

# バックエンド
cd backend
npm run dev      # 開発サーバー起動
npm run build    # ビルド
npm start        # プロダクション起動

# フロントエンド  
cd frontend
npm run dev      # 開発サーバー起動
npm run build    # ビルド
npm run typecheck # 型チェック

# Docker
docker-compose up -d                                    # 開発環境起動
NODE_ENV=production FRONTEND_PORT=3000 docker-compose up -d  # プロダクション起動
docker-compose down                                     # 停止
docker-compose logs -f                                  # ログ表示

🐳 Docker構成

シンプルな構成

1つのdocker-compose.yml: 環境変数で開発/プロダクションを切り替え
1つのDockerfile: 各サービスで環境に応じて動作を変更

コンテナ構成

othello-backend: Express.js APIサーバー（ポート3001）
othello-frontend: React アプリ（開発：ポート5173、プロダクション：ポート3000）

環境の切り替え

# 開発環境（デフォルト）
docker-compose up -d

# プロダクション環境
NODE_ENV=production FRONTEND_PORT=3000 docker-compose up -d

ハッピーハッキング！ 🚀

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
backend		backend
frontend		frontend
.dockerignore		.dockerignore
.env.example		.env.example
README.md		README.md
docker-compose.yml		docker-compose.yml

Doer-org/dohack-example-express

Folders and files

Latest commit

History

Repository files navigation