【2025年】デバッグの技術｜バグを効率的に見つける方法

「バグの原因が分からない」と悩んでいませんか？

現役WEBエンジニアとして、日々デバッグを行っています。

この記事では、効率的なデバッグ方法を解説します。

デバッグの基本姿勢

心構え

原則	説明
仮説を立てる	闇雲に探さない
再現する	まず再現手順を確認
1つずつ	一度に複数変更しない
記録する	試したことを残す

console.logの使い方

基本

// 値の確認
console.log('user:', user);

// オブジェクトを見やすく
console.log(JSON.stringify(user, null, 2));

// テーブル表示
console.table(users);

// グループ化
console.group('ユーザー処理');
console.log('開始');
console.log('user:', user);
console.groupEnd();

条件付きログ

// 特定条件でのみ
if (user.id === 123) {
  console.log('対象ユーザー:', user);
}

ブラウザDevTools

Sources タブ

• ブレークポイント設置
• ステップ実行
• 変数の値を確認
• コールスタック確認

Network タブ

• APIリクエスト確認
• レスポンス確認
• タイミング確認

Console タブ

• エラー確認
• 実行時の値確認
• コード実行

VSCodeデバッグ

launch.json例

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug",
      "program": "${workspaceFolder}/src/index.ts",
      "preLaunchTask": "tsc: build"
    }
  ]
}

ブレークポイント

• 行番号クリックで設置
• 条件付きブレークポイント
• ログポイント

バグの見つけ方

二分探索

問題が起きる最小のコードを特定
1. コードの半分をコメントアウト
2. 問題が起きるか確認
3. 起きる方を再度半分に
4. 繰り返し

最新のコミットから

# 問題が起きるコミットを特定
git bisect start
git bisect bad          # 現在は問題あり
git bisect good abc123  # このコミットは問題なし
# 自動で二分探索

よくあるバグパターン

JavaScript

パターン	原因
undefined	初期化忘れ、API応答前にアクセス
NaN	数値変換失敗
無限ループ	終了条件の誤り
this参照	アロー関数とfunction

対処法

// undefinedチェック
const value = data?.user?.name ?? 'default';

// 型チェック
if (typeof value === 'number' && !isNaN(value)) {}

デバッグのコツ

やるべきこと

1. まず再現手順を確認
2. エラーメッセージを読む
3. 仮説を立てて検証
4. 最近変更した箇所を疑う

やってはいけないこと

• 闇雲に修正
• 一度に複数変更
• 記録を残さない

---

まとめ

デバッグのポイント:

1. 再現手順を確認
2. 仮説を立てて検証
3. DevToolsを活用
4. 1つずつ確認

---

関連記事

• クリーンコード原則
• コードレビューのコツ