デバッグ

デバッグとは

デバッグ (Debug) は、プログラムの不具合 (バグ) を発見し、原因を特定して修正する作業である。プログラミングの時間の大半はデバッグに費やされるとも言われ、効率的なデバッグ手法を身につけることは生産性に直結する。

デバッグの基本手順

デバッグは以下の手順で進める。

1. バグを再現する (同じ条件で同じエラーを起こす)
2. 原因の範囲を絞り込む (どのファイル、どの関数か)
3. 仮説を立てる (なぜこの動作になるのか)
4. 仮説を検証する (ログ出力、ブレークポイント)
5. 修正する
6. 再現手順で修正を確認する

最も重要なのはステップ 1 の再現である。再現できないバグは修正できない。

console.log デバッグ

最も手軽な方法は console.log で変数の値を出力することである。

function calculateTotal(items: Item[]) {
  console.log("items:", items);           // 入力を確認
  const subtotal = items.reduce((sum, item) => {
    console.log("item.price:", item.price); // 各要素を確認
    return sum + item.price;
  }, 0);
  console.log("subtotal:", subtotal);     // 中間結果を確認
  return subtotal * 1.1;
}

手軽だが、大量に入れると出力が読みにくくなる。修正後に消し忘れるリスクもある。

ブレークポイント

IDE やブラウザの開発者ツールでは、コードの特定の行で実行を一時停止できる。停止中に変数の値を確認し、1 行ずつ実行を進められる。

操作	意味
Step Over	現在の行を実行し、次の行へ
Step Into	関数の中に入る
Step Out	現在の関数から抜ける
Continue	次のブレークポイントまで実行

console.log より効率的で、変数の値をリアルタイムに確認できる。

二分探索デバッグ

バグの原因がわからないとき、コードの中間地点にログを入れて「ここまでは正常か」を確認する。正常なら後半に、異常なら前半にバグがある。この繰り返しで原因を絞り込む。

全体のコード
├── 前半 ← ここまで正常？
│   ├── 前半の前半
│   └── 前半の後半
└── 後半 ← ここで異常？
    ├── 後半の前半
    └── 後半の後半

ラバーダックデバッグ

コードの動作を声に出して説明する手法である。ゴム製のアヒル (ラバーダック) に向かって説明するという逸話が名前の由来。人に説明しようとすると、自分の理解があいまいな部分に気づき、バグの原因が見えてくることがある。

よくあるバグのパターン

パターン	例	対策
off-by-one	ループが 1 回多い/少ない	境界値をテスト
null 参照	undefined のプロパティにアクセス	null チェックを入れる
型の不一致	文字列の "1" + 1 が "11"	型を明示的に変換
非同期の順序	await の付け忘れ	async/await を正しく使う
スコープの誤り	意図しない変数を参照	変数のスコープを狭く保つ

デバッグの心構え

心構え	説明
思い込みを捨てる	「ここは正しいはず」が原因であることが多い
1 つずつ変える	複数箇所を同時に変えると原因がわからなくなる
休憩する	行き詰まったら離れる。戻ると解決策が見えることがある
バージョン管理を活用	動いていた状態との差分を確認する

デバッグの技法と考え方は関連書籍に詳しい。