AIが作ったゲームが動かないとき、何を伝えれば直せる？

「動かない」だけでは、AIに伝わらない理由

AIがコードを生成する際、それが実際のブラウザ環境で動くかどうかをリアルタイムで確認することはできません。AIは会話の中でやり取りされた情報をもとに次のコードを提案するため、エラーの内容を正確に渡さないと、誤った方向に修正が進んでしまいます。

たとえば「スコアが表示されません」と伝えると、AIはスコア表示に関係するあらゆる可能性を推測します。変数名の誤り、要素のIDの不一致、表示タイミングの問題、CSSで隠れている……可能性が複数あるため、AIは当たりをつけて答えるしかありません。実際のエラーメッセージを渡せば、推測が不要になり、ピンポイントに近い修正が返ってきます。

逆に言うと、伝えるべき情報を正しく集めることが、修正の速さを決める最大の要因です。その情報源が、ブラウザに内蔵されている開発者ツールです。

まずブラウザのコンソールを開く

ブラウザの開発者ツール（DevTools）には、JavaScriptのエラーや警告が自動的に記録されるコンソールという画面があります。ゲームが動かないとき、コンソールにはたいていエラーの原因が赤字で表示されています。

開き方はブラウザによって異なりますが、ChromeとEdgeではゲームのページ上で右クリック→「検証」（または「Inspect」）を選ぶか、キーボードの F12 キーを押すと開きます。Safariでは事前に「開発メニュー」を有効にしてから「Webインスペクタ」を選びます。Firefoxでも F12 で開けます。

DevToolsが開いたら、上部のタブから「Console」（コンソール）を選んでください。ゲームのページをリロードし、エラーが再現した状態で画面を見ます。赤い文字でエラーが出ていれば、それがAIに渡すべき情報の核心です。

コンソールには警告（黄色）と情報（青または白）も表示されます。AIへ伝えるときは、赤いエラーを最優先で含めてください。警告だけでゲームが止まることもあるため、気になる行はすべて含めると確実です。

エラーメッセージの横には「ファイル名:行番号」が表示されることが多く、どのコードの何行目で問題が起きたかがわかります。この情報もそのままコピーしてAIに渡します。

AIに伝える4点セット

エラーを修正してもらうために必要な情報は、次の4つです。この4点がそろうと、AIは問題を一度で特定できる確率が大きく上がります。

• 再現手順：エラーが起きるまでの操作を順番に書く。「ページを開いてスタートボタンを押す」のように、誰でも同じ手順を踏めるレベルで書く。
• 期待する結果：その操作をしたときに、本来どうなってほしいかを書く。「スコアが画面右上に表示される」など具体的に。
• 実際の結果：実際に何が起きたかを書く。「画面が真っ白になり、何も表示されない」「ボタンを押しても反応しない」など見たままを書く。
• エラー本文：コンソールに表示されたエラーメッセージをそのままコピーして貼り付ける。要約や翻訳は不要で、英語のまま貼る。

4点のうち最も重要なのはエラー本文をそのまま渡すことです。「なんかエラーが出ました」という言い換えではなく、コンソールの赤いテキストをコピー&ペーストします。エラーの種類と発生箇所が含まれているため、AIが推測する必要がなくなります。

すぐ使えるテンプレート

次のテンプレートを使うと、4点セットを漏れなくまとめられます。AIへの質問の冒頭に貼り付け、各項目を埋めて送ってください。

以下のエラーを修正してください。

【再現手順】
1. ページを開く
2. （次の操作）
3. （エラーが起きる操作）

【期待する結果】
（本来どうなるべきか）

【実際の結果】
（実際に何が起きたか）

【コンソールのエラー本文】
（ここにコンソールの赤いテキストをそのまま貼る）

【コード全文】
（修正対象のコードをここに貼る）

「コード全文」の欄は、AIが生成した最新のコードをそのまま貼るためのスペースです。「さっきのコード」「前に送ったファイル」などの参照は、会話が長くなるにつれてAIが正確に把握できなくなるため、修正のたびに最新版を貼り直す習慣をつけると確実です。

コードが数百行を超える場合は、エラーが発生している関数やブロックだけを切り出して貼ることもできます。ただし、その場合はファイル全体の構成（変数の宣言場所、関数の呼び出し元など）も簡単に説明すると、AIが文脈を誤解しにくくなります。

よく出るエラーと読み方の目安

コンソールのエラーには決まったパターンがあります。英語で読み取りにくくても、キーワードを知っていると原因の大まかな方向がわかります。以下はAIへ渡す前に自分で把握しておくと便利な代表例です。

ReferenceError: ○○ is not defined

コード中で使おうとした変数や関数が定義されていないときに出ます。変数名のスペルミス、宣言より前に使っている、別のファイルで定義したが読み込まれていない、などが原因として多いです。エラーメッセージの中の名前（○○の部分）を手がかりにコードを検索すると、問題の箇所が見つかりやすくなります。

TypeError: Cannot read properties of null

HTMLの要素をJavaScriptで取得しようとしたとき、その要素が見つからなかった（nullが返った）場合に出ます。getElementById や querySelector に渡しているID名やセレクタが、HTML側の記述と一致しているか確認するよう、AIに伝えるポイントとして添えると修正が早まります。

SyntaxError: Unexpected token

コードの書き方（構文）に誤りがある場合に出ます。括弧の閉じ忘れ、カンマの付け忘れ、全角スペースの混入などが原因になります。エラーメッセージに行番号が書かれているので、その前後数行をセットでAIに見せると効率的です。

これら以外のエラーが出た場合も、メッセージを読もうとせずにそのままコピーして4点セットに含めてください。AIはエラーメッセージの英語を正確に解釈できます。重要なのは、メッセージを省略・要約せずに貼ることです。

修正後の確認と公開への流れ

AIから修正済みのコードを受け取ったら、コンソールを開いたままページをリロードして動作を確認します。エラーが消えたかどうかをコンソールで確認するのが最初の確認ステップです。コンソールが空白（またはエラー以外のログのみ）であれば、修正が効いている状態です。

次に、ゲームの実際の操作をひととおり試します。エラーが消えていても、直した箇所と別の場所に新たな不具合が生まれることがあります。特に、複数の機能が連動する場面（スコア更新 → ゲームオーバー判定 → 結果表示、など）は順番に試して、全体の流れが意図通りかを確かめます。

不具合が残っていれば、再度4点セットのテンプレートを使って新しいエラー情報を収集し、同じ手順でAIに伝えます。「まだ動きません」ではなく、新しい状態のエラー本文と再現手順を改めて渡すことが、次の修正を速めるコツです。

ゲームが期待通りに動いたら、HTMLファイルまたはZIPファイルをアソバースへ投稿するか、公開済みURLを登録して公開できます。投稿前にもう一度コンソールを確認し、エラーが出ていないことを確かめてから公開するのが確実です。

この記事で紹介した4点セットとコンソールの読み方は、AIツールの種類を問わず使えます。生成に使ったツールや言語モデルが変わっても、「情報をまとめて渡す」という考え方は変わりません。

なお、この記事はClaudeが執筆し、アソバース編集部が構成・確認を担当しています。コード例は説明を目的としたものであり、特定の環境で検証したものではありません。