JavaScriptが動かず、AIに「エラーを直して」と貼り付けたのに、別のコードを何度も提案される。そんな経験を減らすには、長い質問文よりも再現できる情報をそろえることが有効です。初心者が今すぐ使える書き方を、短いJavaScriptの例で確認します。
AIに伝えるべきは「何が違うか」
「動きません」だけでは、AIも人間の相談相手も、何を確認すべきか判断しづらいものです。まず期待していた結果と実際の結果を分けます。次に、どこで何を操作すると問題が起きるかを書きます。
AIの提案が正しいかは、回答の見た目では判断できません。原因を一つずつ確かめ、自分の環境で同じ結果になるか検証しましょう。
用語解説：再現手順
ほかの人が同じ操作を実行して、同じ問題を観察できるように記した順序のことです。
JavaScriptの小さなエラーで練習する
下のサンプルは学習用に意図的に間違えたものです。手元で再現する場合は、PC上に`sample.js`を作って以下を保存し、Node.jsがある環境ならターミナルで`node sample.js`と実行できます。
const languages = ["HTML", "CSS"];
console.log(languages[2].toUpperCase());
`languages`には二つの文字列が入っています。配列の要素番号は0から始まるため、`languages[2]`は存在しません。そこから`toUpperCase()`を呼ぶと、TypeErrorが発生します。
用語解説：TypeError
JavaScriptで、値に対して許されない操作を行おうとしたときなどに発生するエラーです。エラーの文面は実行環境で多少異なる場合があります。
「CSSという文字列を大文字にする」が期待結果なら、先に問題を起こした行を特定し、添字の意味を確認する必要があります。エラー全文が長い場合でも、関連するメッセージと該当行は省かずに伝えましょう。
質問前に集める6項目
- 目的：何をしたいか（例：配列からCSSを取得する）
- 環境：言語・実行方法・使用ブラウザーまたはNode.jsのバージョン
- 最小コード：問題が再現する部分だけ。ただし必要な前後関係は残す
- 再現手順：保存→実行など、どの操作で起きるか
- 期待結果と実際の結果：表示されてほしい文字列とエラー内容
- 試したこと：修正・再実行の結果。推測と事実は区別する
これは「正しい呪文」を書く作業ではありません。相手が状況を調査するためのメモを作る作業です。GitHubの不具合報告テンプレートでも、環境、期待動作、実際の動作、再現手順などを別項目として扱えます。
質問文にはパスワード、APIキー、Cookie、他人の個人情報、本番データを貼り付けないでください。エラーに機密情報が含まれている場合は伏せたうえで、再現に必要な部分だけ共有します。
コピペで使える質問テンプレート
【目的】JavaScriptで配列から「CSS」を取り出して大文字に表示したい。
【環境】Node.jsを使ってsample.jsを実行（バージョンは手元で確認）。
【最小コード】
const languages = ["HTML", "CSS"];
console.log(languages[2].toUpperCase());
【再現手順】1. sample.jsを保存 2. node sample.jsで実行
【期待結果】CSS と表示される。
【実際の結果】TypeError が発生する（エラー全文は別途貼る）。
【試したこと】まだなし。
【依頼】原因の候補、確かめる順番、最小限の修正案を説明してください。
【制約】不要な書き換えは避け、修正した行と理由を示してください。
このテンプレートを使うときは、実際に確認した情報だけを埋めます。バージョンやエラー文を覚えていない場合は「未確認」と書いて構いません。AIに質問したあとも、実行ログや画面の変化と照合するのが大切です。
修正案が来たら、必ず手元で再実行する
サンプルでは、配列の2番目を取る添字は`1`です。次のように変更すると、意図した文字列が取得できます。
const languages = ["HTML", "CSS"];
console.log(languages[1].toUpperCase()); // CSS
正しい結果を一度確認できたら、追加で`languages[0]`を使い、何が表示されるか予測してください。正解を覚えるだけでなく、なぜ直ったかを説明できる状態が学習の目標です。
実際のエラーでは、AIの修正案がたまたま動いても、別の条件で問題が起きることがあります。修正前の状態を残し、変更点を一か所ずつ適用して確認しましょう。ブラウザー上のJavaScriptなら開発者ツールのConsoleでエラー表示を確認できます。
（AIによる不具合修正の検証例については『AIによるバグ修正は実用的か？実験してみた』をご参照ください）
（AIへコードの変更条件を伝える方法については『AIに“思い通り”のコードを書かせるには？JavaScript／CSSで失敗しないプロンプト改善術』をご参照ください）
回答がずれたときの切り分け表
| 困ったこと | 追加で確認する情報 |
|---|---|
| 原因を断定してくる | エラー文・行番号・環境・再現条件が一致するか |
| コード全体を書き換えられる | 変更してよい範囲を「この行だけ」などと指定 |
| 同じ修正案が繰り返される | 試した修正と新しい実行結果を追記する |
| 問題が手元で再現しない | 実行ファイル名、バージョン、入力値と操作手順を見直す |
「説明が分かった」と「修正が確認できた」は別です。エラーが消えたかだけでなく、最初に達成したかった動作になっているかを検証してください。
よくある質問
エラー全文を全部貼るべき？
原因に関係するメッセージと位置は重要です。長いログの場合は関連箇所を残して前後の必要な文脈を添えます。秘密情報や個人情報は取り除いてください。
Claude CodeやChatGPT以外でも使える？
目的・環境・再現手順・期待結果・実際の結果を整理する方法は、特定のAI製品だけに依存しません。人に相談するときにも有用です。
AIが「修正できました」と言えば完了？
実行していないAIの説明だけでは完了と言えません。自分のPCで再実行し、期待する結果になったことを確かめてください。
次のエラーでまず実行したいこと
次にエラーが出たら、質問を送る前に「期待結果」と「実際の結果」を2行に分けてメモしてください。そこに再現手順を足すと、何から調べるかが整理しやすくなります。
今日はサンプルの添字を一つ変え、エラーが出る状態と直った状態を両方確認してみましょう。
