まほうの庭 — Claude AIとのゲーム開発

背景

「放置少女」「アークナイツ」のような放置育成ゲームを、ゼロから自力で作れるかを検証するプロジェクト。
外部ライブラリなし・ビルドツールなし・サーバーなし。純粋なHTML/CSS/JavaScriptのみで、完全に動くゲームを目指した。

開発手法として採用したのが Claude AIとの対話型ペアプログラミング。
設計の相談から、コードの生成、バグの特定まで、一貫してAIと協力して進めた。

完成したゲームの仕様

項目	内容
ジャンル	放置育成 + カード + ターン制バトル
キャラクター	11体（属性・スキル・レアリティ別）
ストーリー	5章・多数のステージ構成
システム	ガチャ・装備・強化・ボス戦・デイリーミッション
保存	LocalStorage自動保存（Google Sheets連携拡張可能）
動作環境	ブラウザのみ（インストール不要）

技術構成

src/
├── index.html          # エントリーポイント（マルチスクリーン制御）
├── css/
│   └── style.css       # 917行：レイアウト・アニメーション・ゲームUI
└── js/
    ├── game.js         # 777行：ゲーム状態管理・コアロジック
    ├── main.js         # 1,193行：UI制御・イベントハンドラ
    ├── battle_engine.js # 253行：ターン制バトルシステム
    ├── bgm.js          # 252行：Web Audio API BGM生成
    ├── idle.js         # 77行：放置報酬計算
    ├── storage.js      # 148行：LocalStorage/GAS切替保存
    ├── generals_data.js # 281行：キャラクターデータ定義
    └── stages_data.js  # 487行：ステージ・ボスデータ定義

合計: 3,468行のJavaScript + 917行のCSS

Claude AIとの開発プロセス

Phase 1：設計（要件定義 → ドキュメント化）

最初の会話はコードではなく 設計の言語化 から始めた。

「放置ゲームに必要な要素を整理したい」という一言から始まり、Claudeとの対話で以下を固めた：

ゲームループ設計（リアルタイム vs ターン制の選択）
データモデル（キャラ・装備・リソースの状態構造）
画面遷移フロー（ローディング→ゲーム→各タブ）
MVPスコープ（何を作り、何を後回しにするか）

AIとの設計会話の効果：
ひとりで設計すると見落としがちな「保存タイミング」「エラー状態」「拡張性」をAIが自然に指摘してくれた。設計書が対話の副産物として生まれた。

Phase 2：実装（モジュール分割 → 段階的構築）

実装は「1ファイルずつ確認しながら進める」方針を採用。

storage.js → game.js → idle.js → battle_engine.js → main.js

各ファイルを作る前に「このファイルの責務は何か」をAIと確認。
依存関係を明確にした上でコードを生成することで、スパゲッティ化を防いだ。

典型的な作業サイクル：

「〇〇の機能を実装したい。こういう設計でどうか？」
AIが改善案を提示 → 合意
AIがコードを生成 → ブラウザで動作確認
バグがあれば「△△が動かない」と伝え → AIがデバッグ

Phase 3：デバッグ・品質向上

躓いたポイントと解決：

問題	原因	AIとの解決方法
放置報酬が異常値になる	タイムスタンプ計算のオーバーフロー	上限キャップ処理の追加
バトル終了後に画面が固まる	非同期処理のコールバック競合	Promise化 + Promiseチェーン整理
ガチャの確率が均等にならない	乱数生成ロジックの誤り	Math.random()の使い方を再設計
localStorage容量超過	装備データの非効率な保存	差分保存+圧縮方式に変更

工数とAI活用の効果

作業	推定工数（人間のみ）	実際の工数（AI活用）	短縮率
設計・ドキュメント	8時間	2時間	75%
JS実装（3,468行）	30時間	8時間	73%
CSS実装（917行）	10時間	3時間	70%
デバッグ・テスト	15時間	4時間	73%
合計	63時間	17時間	73%

AIなしでは1〜2週間かかる規模のゲームを、実質2〜3日相当の工数で完成させた（上記推計による）。

学んだこと

1. AIには「設計の言語」で話す

「コードを書いて」ではなく「この設計でどう思うか」と問うことで、より良いアーキテクチャが生まれた。AIは相談相手として機能する。

2. 小さく動かしてから拡張する

1,000行の機能を一度に実装しようとせず、50行単位で動作確認。問題を小さいうちに発見できる。

3. コードの意図を説明させる

AIが生成したコードでも「なぜこう書いたか説明して」と一言加えることで、理解なき実装を避けた。ブラックボックスにしない習慣。

4. バグ報告は状況を具体的に

「動かない」ではなく「〇〇の状態で△△ボタンを押すと□□が起きる」という形式で伝えると、AIのデバッグ精度が大幅に上がる。

今後の展開

Google Sheets連携による永続保存・マルチデバイス対応
2人プレイ機能（フレンド・対戦）
GitHub Pages本番公開
キャラ・ステージの拡充

実際にプレイ

このゲームは NaNi Execution Lab 上でそのまま遊べます。

→ ゲームをプレイする

背景