生成AI活用

コードのバグ修正・改善をAIに依頼するコツ【プロンプト例あり】

更新日:2026-05-08 著者:unigram 読了目安:1分

エラーメッセージはそのままコピペする

「コードが動かない」という説明よりも、コンソールに出ているエラーメッセージをそのまま貼り付けるほうが、AIは100倍正確に原因を特定できます。

デバッグ依頼のプロンプトテンプレート

「以下のコードを実行すると、ブラウザのコンソールに下記エラーが出ます。原因を特定して修正してください。

【エラーメッセージ】
Uncaught TypeError: Cannot read properties of null (reading ‘addEventListener’)

【コード】
(ここにコードを貼り付ける)」

修正依頼の種類と伝え方

  • エラー修正:エラーメッセージ+コード全文を貼り付ける
  • 動作が違う:「期待する動作」と「実際の動作」を両方書く
  • レイアウト崩れ:「どの要素が」「どのブラウザで」「何がどう崩れるか」を具体的に記述
  • パフォーマンス改善:「このコードをより効率的に書き直してください」
  • コードレビュー:「このコードの問題点・改善点を指摘してください」

「思ったと違う」を正確に伝える方法

「クリックしたとき〇〇になるはずが、〇〇になってしまいます。」
「Chromeでは動くのにSafariで動きません。」
「スマホ(画面幅375px)でレイアウトが崩れます。PCは正常です。」

💡 コツ:問題コードだけでなく「関連するHTML構造も一緒に貼り付ける」と、AIが文脈を把握して正確な原因を特定できます。エラーは必ず文脈と一緒に渡しましょう。

この記事を書いた人

unigram
web、印刷、映像などの制作をしています。@京都、フリーランス18年目。 大学で講師もしています。 自身の備忘録も兼ねて、Web制作・WordPress・SEO・GA4・生成AI活用をテーマに情報発信しています。わかりやすく優しい内容で記事作成を心がけています。