Claude Codeでゲーム開発：ターミナルから1本完成させる手順
遊びをつくる執筆にClaudeを使用しています。
Claude Codeは、ターミナル上で動くAIコーディングエージェントです。チャット画面にコードを貼り付けるのではなく、プロジェクトフォルダの中に入り、ファイルを読み書きしながら作業を進めます。「指示を出す → AIが実装する → 自分で確認する」という繰り返しで、ブラウザゲームを1本仕上げることが目的です。 この記事が答える問いは「Claude Codeを使ってゲームを最後まで作るには、どういう順番で何をすればよいか」です。インストール方法の紹介にとどまらず、企画の整理からファイル完成まで、つまずきやすいポイントを含めて手順を示します。
この記事の目次
Claude Codeがゲーム開発に向いている理由
ブラウザゲームの開発では、HTMLとJavaScriptのファイルが複数にわたることが珍しくありません。ゲームロジック、描画、スコア管理、入力処理をそれぞれ別のファイルに分けたとき、チャット型のAIに「この関数が壊れています」と伝えるだけでは、AIは周囲のコードを見ていないため的外れな修正を返しがちです。
Claude Codeはプロジェクトフォルダ全体を参照しながら動くため、「gameLoop.jsのupdate()がscore.jsのaddPoint()を呼ぶ設計にして」という指示が意図どおりに通りやすくなります。複数ファイルをまたぐ変更を1回の指示でまとめて依頼できるのが、チャット型との最大の違いです。
ただし、Claude Codeは生成したコードの動作を自動でブラウザ確認することはしません。実行・確認は人間の担当です。「AIが全部やってくれる」ではなく「AIと分担して速く進める」という理解で使うと期待値がずれません。
作業を始める前に決めておくこと
Claude Codeを起動する前に、次の3点を自分の言葉でメモしておくと指示の精度が上がります。
ゲームの核となるループを一文で書く
「プレイヤーが矢印キーでブロックを操作し、揃ったら消える」「クリックで弾を撃ち、敵を倒す」のように、繰り返しの核を一文にします。これが曖昧なまま開発を始めると、AIへの指示のたびに方向が揺れ、後から大きく作り直すことになります。
完成の定義を決める
「スコアが表示されてゲームオーバー画面が出る」「5ステージ遊べる」など、「これができたら完成」の条件を先に書きます。ゲーム開発は追加したい要素が次々と出てくるため、完成の定義がないと終わりません。
ファイル構成の方針を決める
単純なゲームならindex.html1ファイルで始めて問題ありません。複数ファイルに分けるなら、最初から役割を決めておきます（例：main.jsでゲームループ管理、enemy.jsで敵クラス定義）。後からClaude Codeに「ファイルを分割して」と頼むことはできますが、序盤に決めておくほうが手戻りが少なくなります。
ターミナルでの基本的な進め方
Claude Codeの導入と起動については公式ドキュメントを参照してください。ここでは起動後の流れに絞ります。
1. プロジェクトフォルダに移動して起動する
ゲーム用のフォルダを作り、そのフォルダの中でClaude Codeを起動します。フォルダが空の状態でも構いません。「このフォルダがプロジェクトのルートです」という状況をAIに伝えるためです。
2. 最初の指示は「骨格だけ作る」に絞る
いきなり「敵が動くシューティングゲームを作って」と指示すると、長いコードが一度に生成され、どこがどう動いているか把握しにくくなります。最初の指示は「index.htmlとmain.jsを作り、Canvasに青い四角を表示するだけの骨格を作って」のように、確認できる最小単位を指定します。
3. ブラウザで確認してから次の指示を出す
生成されたファイルをブラウザで開き、意図どおりに動くかを確認します。確認前に次の指示を出すと、バグが重なって原因の切り分けが難しくなります。「動いた」「動かなかった（エラーメッセージはこれ）」を確認してから次のステップに進みます。
4. 機能を一つずつ追加する
「プレイヤーをキーで動かす」「弾を発射する」「敵を追加する」「当たり判定を実装する」のように、一回の指示で追加する機能は原則1つにします。エラーが出たときに原因が一か所に絞れるためです。
5. エラーが出たらメッセージをそのまま渡す
コンソールに表示されたエラーメッセージをコピーして「このエラーが出ています：〔メッセージ〕」とClaude Codeに伝えます。「なんか動かない」より「Uncaught TypeError: cannot read properties of undefined」のほうが修正の精度が上がります。
完成に近づくにつれて意識すること
ゲームのコアが動き始めると、磨き作業に移ります。この段階でよくある問題と対処を整理します。
スコープが広がりすぎる
「敵を追加したい」「BGMを鳴らしたい」「エフェクトを付けたい」と追加したい要素が増え、完成がどんどん遠のくパターンです。最初に決めた完成の定義に立ち返り、「それは次のバージョンに回す」と判断する習慣が必要です。Claude Codeは指示すれば何でも実装しようとしますが、スコープを管理するのは人間の役割です。
コードが長くなるほど指示の精度が問われる
プロジェクトが大きくなると、「〇〇を直して」という曖昧な指示でAIが意図しないファイルを変更するリスクが増します。「enemy.jsのmove()メソッドだけ変更して、他のファイルは触らないで」のように、変更範囲を明示する習慣をつけます。
バージョン管理を早めに始める
Gitを使ったことがない場合も、Claude Codeに「このプロジェクトでGitを初期化して、初回コミットして」と頼むだけで始められます。「動いていた状態に戻りたい」という場面は開発中に必ず来るので、動作確認が取れたタイミングでこまめにコミットします。
最後の仕上げで確認すること
ゲームが完成に近づいたら、スマートフォンのブラウザでも動作確認をします。PCで作ったゲームがスマートフォンのタッチ操作に対応していないケースは多くあります。タッチ対応が必要なら「タッチイベントを追加して、マウスと同じ操作ができるようにして」とClaude Codeに依頼します。
完成後にアソバースへ投稿する流れ
ゲームが完成したら、HTMLファイル一式をZIPにまとめてアソバースに投稿できます。単一のHTMLファイルであればそのまま投稿することも可能です。投稿後は公開URLが発行されるので、ブラウザでプレイできる状態になります。
ZIPを作る際は、index.htmlがZIPのルートに置かれているかを確認します。フォルダの中にさらにフォルダが入った構造だと、プラットフォームがエントリーポイントを見つけられないことがあります。
次の行動
まずゲームの核となるループを一文で書き、「骨格だけ作る」という最初の指示をターミナルで試してみてください。Claude Codeの導入手順は公式ドキュメントで確認できます。完成したゲームはアソバース（https://aso-verse.com）にZIPまたはHTMLファイルで投稿・公開できます。
参考資料
- Claude Code 公式ドキュメント（Anthropic）
- MDN Web Docs — Canvas API
- MDN Web Docs — Touch events
