Day 7・AIと組んで作る・直す — バイブコーディング実践

エラーの読み方とデバッグ — エラーは道案内

エラーは敵ではなく道案内。原因を切り分ける故障探しの手順を学ぶ。

エラーは「怒られ」ではなく「道案内」

赤い文字のエラーが出ると、初学者はドキッとします。でも発想を変えてください。エラーは、プログラムが「ここでつまずきました、場所はここです」と親切に教えてくれる道案内です。何も言わずに黙って壊れるより、ずっと優しいのです。

たとえるなら

カーナビが「300m先を右です」と言ってくれるようなもの。エラーメッセージには、どのファイルの何行目で、何が起きたかが書いてあります。まず落ち着いて、そのカーナビの案内を読むところから始めます。

長い英語のエラーに圧倒されそうになりますが、見るべき場所はだいたい決まっています。全部を理解しようとしなくて大丈夫です。

TEXT

TypeError: cannot read property 'name' of undefined
  at showUser (app.js:12)

「app.jsの12行目で、undefined(中身が空)のものからnameを読もうとした」と読める

上のエラーは「箱が空っぽ(undefined)なのに、その中のラベル(name)を読もうとした」という意味です。原因は12行目の手前で、箱にちゃんと中身が入っていなかった可能性が高い、と当たりがつきます。

[[debu用語](デバッグ)とは、不具合の原因を見つけて直す作業です。コツは「一気に直そうとしない」こと。電気がつかないとき、いきなり家中の配線を疑わず、まず電球→スイッチ→ブレーカーと順に切り分けますよね。あれと同じです。

たとえるなら

故障探しは、犯人当ての消去法です。「ここは正常」「ここも正常」と1つずつ確認して、犯人がいる範囲をどんどん狭めていきます。範囲が半分になれば、探す手間も半分です。

一度に複数変えない

焦って3箇所同時に直すと、直ったとき『どれが効いたのか』、直らなかったとき『どれが悪さしたのか』が分からなくなります。1つ変えて1回試す。地味ですが最速です。

丸投げデバッグ

エラー全文をAIに貼って「直して」とだけ言い、返ってきたコードをそのまま貼り替える。直ることもあるが、なぜ直ったか分からず、次に同じ壁で止まる。

切り分けデバッグ

エラーの種類と場所を自分で読み、『12行目の手前で箱が空だったのでは』と仮説を立ててからAIに相談する。原因が分かるので次から自分で対処できる。

AIにはこう頼む

「このエラーを、初心者向けに一言で何が起きているか翻訳して」「原因の候補を可能性の高い順に3つ、確かめ方つきで」と頼むと、丸投げにならず切り分けが進みます。

読んでも腑に落ちない所は、AIに噛み砕いてもらいましょう。

答えられれば、面接で説明できる状態に一歩近づきます。

エラーメッセージに対する望ましい向き合い方はどれ?

デバッグ(故障探し)のコツとして最も適切なのはどれ?

「デバッグは故障探しの消去法だ」とはどういうことか、身近なたとえで説明してください。

記述式です。まず自分の言葉で答えを考えてから、模範解答を開いて自己採点してください。