デバッグのやり方がわからない

✅ 回答

デバッグは「犯人探し」です。闇雲にコードを変えるのではなく、手順を踏んで原因を絞り込みます。

デバッグの5ステップ

1. エラーメッセージを読む — 種類（TypeError等）と行番号を確認
2. 場所を特定する — エラーが起きている行を開く
3. 原因を絞り込む — console.logで変数の値を確認
4. 修正する — 原因がわかったら直す
5. 確認する — 直ったか確認。別の場所が壊れていないかもチェック

console.log の使い方

// console.log でデバッグする例
function calcTotal(items) {
  console.log("items:", items); // 入力を確認
  const total = items.reduce((sum, item) => {
    console.log("処理中:", item.name, item.price); // 各ステップを確認
    return sum + item.price;
  }, 0);
  console.log("total:", total); // 結果を確認
  return total;
}

「ここまでは動いている」「ここで値がおかしくなる」を特定するのが目的です。

開発者ツール（F12）の使い分け

タブ	何がわかる？	使う場面
Console	JSのエラーとconsole.logの出力	JSが動かないとき
Elements	HTMLの構造とCSSの適用状況	見た目がおかしいとき
Network	ファイルの読み込み状況（404等）	画像やCSSが効かないとき
Sources	ブレークポイントで1行ずつ実行	複雑なロジックのバグ

言語別のよくあるバグと対処

言語	よくあるバグ	確認方法
HTML	タグの閉じ忘れ	Elementsタブでインデントを確認
CSS	セレクタが効いていない	Elementsタブで要素を選択→右側のStyles
JS	変数がundefined	console.logで値を出力

「二分探索デバッグ」のテクニック

コードが長くてどこが原因かわからないとき：コードの真ん中にconsole.logを入れる → 「ここまでは正常？」を確認 → 正常なら後半に原因がある、異常なら前半に原因がある。これを繰り返して範囲を半分ずつ狭めていきます。

デバッグテクニック集

// テクニック1: console.logで変数の中身を確認
const users = fetchUsers();
console.log('users:', users); // 何が入っているか確認
console.log('length:', users.length);

// テクニック2: typeof で型を確認
console.log(typeof result); // "string"? "number"? "undefined"?

// テクニック3: debugger文でブレークポイント
function calculate(a, b) {
  debugger; // ここで実行が止まる（DevToolsが開いている場合）
  return a + b;
}

// テクニック4: try-catchでエラーを捕まえる
try {
  const data = JSON.parse(input);
} catch (e) {
  console.error('パースエラー:', e.message);
  console.error('入力値:', input);
}

デバッグの鉄則：「ここまでは動いている」「ここから動かない」の境界を見つけること。console.logを上から順に入れていけば、必ず境界が見つかります。