シンプルオセロ React版

React Router v7、TypeScript、Tailwind CSSを使用したWebオセロゲームです。 人間 vs コンピューターの対戦が楽しめます。

🎮 ゲームの特徴

• 3つの画面: スタート画面 → ゲーム画面 → 結果画面
• AI対戦: 戦略的なコンピューター相手との対戦
• リアルタイム表示: スコアとターン状況の即座更新
• 視覚的ヒント: 置ける場所のハイライト表示
• レスポンシブ: スマートフォンでも快適にプレイ可能

🚀 環境構築と起動方法

必要な環境

• Node.js: バージョン 18.0.0 以上
• npm: Node.jsに付属（バージョン 8.0.0 以上推奨）

1. Node.jsのインストール

Windows / macOS

1. Node.js公式サイトから最新のLTS版をダウンロード
2. インストーラーを実行してインストール

Ubuntu / Debian

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

インストール確認

node --version  # v18.0.0以上が表示されることを確認
npm --version   # バージョンが表示されることを確認

2. プロジェクトのセットアップ

# プロジェクトディレクトリに移動
cd dohack-example-react

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

3. アプリケーションの起動

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

起動後、ブラウザで http://localhost:5173 にアクセスしてください。

4. その他のコマンド

# TypeScriptの型チェック
npm run typecheck

# プロダクション用ビルド
npm run build

# プロダクション版の起動
npm run start

🏗 アーキテクチャ

技術選択の理由

• React: 宣言的UIとコンポーネント再利用
• TypeScript: 型安全性による開発効率向上
• React Router v7: モダンなフルスタックルーティング
• Tailwind CSS: 高速プロトタイピングと一貫性
• Vite: 高速ビルドとHMR

技術スタック

技術	バージョン	用途
React	19.1.0	UIライブラリ
TypeScript	5.8.3	型安全性の確保
React Router	7.7.1	ルーティング（Framework Mode）
Vite	6.3.5	ビルドツール
Tailwind CSS	4.1.11	ユーティリティファーストCSS

アーキテクチャパターン

┌─────────────────┐
│  Presentation   │  ← React コンポーネント
│     Layer       │    (home.tsx, game.tsx, result.tsx)
├─────────────────┤
│   Business      │  ← カスタムフック
│     Logic       │    (useOthello.ts)
├─────────────────┤
│     State       │  ← React State + SessionStorage
│   Management    │    (ゲーム状態の管理)
├─────────────────┤
│    Routing      │  ← React Router v7
│     Layer       │    (Framework Mode)
└─────────────────┘

📁 プロジェクト構成

dohack-example-react/
├── app/                          # アプリケーションのメインディレクトリ
│   ├── routes/                   # ページコンポーネント
│   │   ├── home.tsx             # スタート画面
│   │   ├── game.tsx             # ゲーム画面
│   │   └── result.tsx           # 結果画面
│   ├── hooks/                    # カスタムフック
│   │   └── useOthello.ts        # オセロのゲームロジック
│   ├── welcome/                  # ウェルカム画面（未使用）
│   ├── app.css                   # グローバルスタイル
│   ├── root.tsx                  # アプリケーションのルート
│   └── routes.ts                 # ルーティング設定
├── public/                       # 静的ファイル
├── build/                        # ビルド出力（自動生成）
├── package.json                  # プロジェクト設定
├── tsconfig.json                 # TypeScript設定
├── vite.config.ts               # Vite設定
└── README.md                     # このファイル

🎯 コンポーネント詳細

1. スタート画面 (app/routes/home.tsx)

• ゲームのタイトル表示
• ゲーム開始ボタン
• ゲーム画面への遷移

2. ゲーム画面 (app/routes/game.tsx)

• 8×8のオセロ盤面: グリッドレイアウトで実装
• リアルタイムスコア: 黒（プレイヤー）と白（コンピューター）
• ターン表示: 現在のプレイヤーを表示
• 有効手ハイライト: クリック可能な場所を視覚的に表示
• ゲーム終了時の自動遷移: 結果画面へ1.5秒後に移動

3. 結果画面 (app/routes/result.tsx)

• 最終スコア表示: 両プレイヤーの獲得駒数
• 勝敗判定: 勝利/敗北/引き分けの表示
• 再プレイ機能: 新しいゲームの開始
• キーボード操作: Enter（再プレイ）、Escape（スタート画面）

🧠 ゲームロジック (app/hooks/useOthello.ts)

主要な状態管理

interface GameState {
  board: Board;           // 8×8の盤面状態
  currentPlayer: Player;  // 現在のプレイヤー（1: 黒, -1: 白）
  gameOver: boolean;      // ゲーム終了フラグ
  blackCount: number;     // 黒の駒数
  whiteCount: number;     // 白の駒数
}

主要な機能

1. 盤面初期化: 中央4マスに初期配置
2. 有効手判定: 8方向の挟み判定
3. 駒の配置とひっくり返し: クリック時の処理
4. AI思考ルーチン: 戦略的な手の選択
5. ゲーム終了判定: 両プレイヤーが打てない状態の検出

AI戦略

コンピューターの思考順序：

1. 角の優先: 四隅は取られにくい最重要ポジション
2. 辺の優先: 端は比較的安全
3. 獲得数最大: 最も多くの駒を取れる手を選択

🎨 スタイリング（Tailwind CSS）

Tailwind CSS設計思想

• ユーティリティファースト: 小さな単機能クラスの組み合わせ
• レスポンシブ対応: モバイル対応の組み込みブレークポイント
• コンポーネント指向: 再利用可能なスタイルパターン
• 保守性重視: インラインスタイルによる一元管理

主要なTailwindクラス

// メインコンテナ
className="bg-white rounded-3xl p-8 shadow-2xl text-center max-w-2xl w-[90%]"

// ゲームボード
className="grid grid-cols-8 grid-rows-8 gap-0.5 bg-green-800 p-2.5 rounded-xl"

// セル（通常）
className="bg-green-600 rounded-md flex items-center justify-center cursor-pointer"

// セル（有効手）
className="bg-green-400 shadow-[inset_0_0_10px_rgba(255,255,255,0.3)]"

// ボタン
className="bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-8 py-4 rounded-full"

// ディスク
className="w-[70%] h-[70%] border-2 border-gray-900 rounded-full"

カラーパレット（Tailwind基準）

// メインカラー
bg-gradient-to-br from-indigo-500 to-purple-600  // 背景グラデーション
bg-gradient-to-r from-indigo-500 to-purple-600   // ボタングラデーション

// ゲームボード
bg-green-800     // ボード背景
bg-green-600     // セル背景
bg-green-400     // 有効手ハイライト

// フィードバックカラー
text-green-500   // 勝利
text-red-500     // 敗北
text-yellow-500  // 引き分け

🔧 カスタマイズ方法

AIの難易度調整

app/hooks/useOthello.tsのselectBestMove関数を修正：

// より簡単なAI（ランダム選択）
const selectedMove = validMoves[Math.floor(Math.random() * validMoves.length)];

// より高度なAI（評価関数の追加）
// 位置ごとの重みを考慮した選択など

盤面サイズの変更

8×8以外のサイズに変更する場合：

1. BOARD_SIZE定数を追加
2. 初期化ロジックの修正
3. CSSグリッドの列数調整

見た目のカスタマイズ

Tailwindクラスの変更例：

// テーマカラーの変更（青→赤系）
// 変更前
className="bg-gradient-to-r from-indigo-500 to-purple-600"
// 変更後
className="bg-gradient-to-r from-red-500 to-pink-600"

// ボードカラーの変更（緑→青系）
// 変更前
className="bg-green-800"
// 変更後  
className="bg-blue-800"

// アニメーション速度の調整
// 変更前
className="transition-all duration-300"
// 変更後
className="transition-all duration-500"

カスタムカラーの追加：

app/app.cssに追加：

@theme {
  --colors-custom-primary: #ff6b6b;
  --colors-custom-secondary: #4ecdc4;
}

使用例：

className="bg-custom-primary text-custom-secondary"

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

よくある問題

1. Node.jsのバージョンエラー

   node --version  # バージョン確認
   # Node.js 18以上が必要

2. 依存関係のインストールエラー

   rm -rf node_modules package-lock.json
   npm install

3. ポート競合エラー

   # 別のポートで起動
   npm run dev -- --port 3000

4. TypeScriptエラー

   npm run typecheck  # エラー詳細の確認

開発時のヒント

• Hot Reload: ファイル保存時の自動更新機能
• 開発者ツール: ブラウザのコンソールでエラー確認
• React DevTools: Reactコンポーネントの状態確認

📚 学習リソース

使用技術の学習

• React: 公式ドキュメント
• TypeScript: 公式ハンドブック
• React Router: 公式ガイド
• Tailwind CSS: 公式ドキュメント
• CSS Grid: MDN ガイド

次のステップ

1. テストの追加: Jest + React Testing Library
2. 状態管理の改善: Zustand や Redux Toolkit
3. Tailwindカスタマイズ: カスタムコンポーネント作成
4. PWA化: サービスワーカーとマニフェスト
5. マルチプレイヤー: WebSocket を使用したオンライン対戦

📄 ライセンス

このプロジェクトはMITライセンスの下で公開されています。

---

開発者へのメッセージ: このオセロゲームはReact学習の入門プロジェクトとして設計されています。コードを読み、改造し、新しい機能を追加することで、Reactの理解を深めてください！