AIと一緒にデバッグする ── エラーを怖がらなくなる方法

デバッグはAIの最も得意な仕事

実はバイブコーディングでAIが最も力を発揮するのは「新しいコードを書く」ことではなく「バグを直す」こと。

理由：

• エラーメッセージには原因のヒントが含まれている
• AIはエラーパターンを膨大に学習している
• 修正箇所が明確なので、AIの回答精度が高い

---

エラーメッセージの3つのパート

TypeError: Cannot read properties of undefined (reading 'map')
    at renderCards (src/components/CardGrid.astro:12:15)
    at renderPage (src/pages/index.astro:25:3)

パート	内容	読み方
エラー名	TypeError	エラーの種類
メッセージ	Cannot read properties of undefined	何が起きたか
スタックトレース	at renderCards…	どこで起きたか

---

AIへのエラー報告テンプレート

最低限（これだけで十分）

エラーが出ました。直してください：
[エラーメッセージ全文を貼る]

より正確な回答を得たい場合

【やりたいこと】
トップページに記事一覧を表示したい

【やったこと】
npm run devを実行した

【起きたこと】
ブラウザに何も表示されず、ターミナルに以下のエラーが出た

【エラーメッセージ】
[全文を貼る]

【環境】
Mac, Node.js v22, Astro v6

---

よくあるエラーと対処法

Module not found

Error: Cannot find module 'xxx'

原因: パッケージがインストールされていない 解決: npm install xxx を実行

SyntaxError

SyntaxError: Unexpected token

原因: コードの書き方が間違っている（括弧の閉じ忘れなど） 解決: AIにエラー箇所のファイルを見てもらう

EADDRINUSE

Error: listen EADDRINUSE: address already in use :::4321

原因: 同じポートで別のプロセスが動いている 解決: 別のターミナルで起動しているサーバーを停止

Permission denied

Error: EACCES: permission denied

原因: ファイルやフォルダへのアクセス権限がない 解決: sudo をつけて実行（Mac）

---

デバッグの心構え

1. エラーは日常 – プロでも1日に何十回もエラーに遭遇する
2. エラーは味方 – 「ここを直せ」と教えてくれている
3. AIに丸投げでOK – エラーメッセージを貼るだけ
4. 直ったら即コミット – 次のエラーに備える