😱 序文：コードは嘘をつかないが、期待通りに動かない！
あなたはついに、HTML、CSS、DOM操作、非同期処理、クラス設計といった、すべての武器を手に入れました。しかし、どんなに完璧なプログラマーでも、**バグ（不具合）**は必ず発生します。
コードを書いていると、「なぜかボタンが反応しない」「変数の値が途中で変わっている」「APIから取得したはずのデータが表示されない」といった問題にぶつかります。
プログラマーにとって、バグ修正（デバッグ）は日常業務の半分を占めると言っても過言ではありません。このデバッグを素早く、的確に行う能力こそが、開発スピードを劇的に上げる鍵となります。
今回は、JavaScript開発で最も強力なデバッグツールである**ブラウザの開発者ツール（Developer Tools）**を使いこなし、バグを恐れず、むしろ楽しんで解決するための必殺テクニックを伝授します！
1. 🔍 まずは状況把握：console.log()の正しい使い方
デバッグの基本は、プログラムの実行中に**「何が起こっているか」**を把握することです。これまでにも使ってきたconsole.log()は、そのための最も基本的なツールです。
ただし、ただ変数を表示するだけでなく、**「どこで、何の値を確認しているか」**を明確にすることが重要です。
JavaScript
// ❌ 悪い例: どこで出力されたか分からない
console.log(data);
// ✅ 良い例: 出力元と意図が明確
console.log("--- fetchAndDisplayUser 関数内 ---");
console.log("取得したユーザーデータ:", userData);
console.log("ログイン状態:", userData.isLoggedIn);
特にオブジェクトや配列を表示するときは、必ず名前を付けて出力しましょう。これだけで、コンソール画面での視認性が劇的に向上します。
2. 🛡️ 最強の武器：開発者ツールとブレークポイント
console.log()は便利ですが、コードの実行を**「一時停止」して、その時点のすべての変数の中身や、コードの流れを詳細に確認できる、さらに強力なツールがあります。それが、ブラウザの開発者ツール**の「Sources」（ソース）タブです。
📌 ステップ1：開発者ツールの起動とソース表示
ほとんどのブラウザで、以下の操作で開発者ツールを開けます。
- Windows:
F12キー またはCtrl + Shift + I - Mac:
Cmd + Option + I
開いたら、上部メニューの「Sources」（または「ソース」）タブを選択し、デバッグしたいJavaScriptファイル（例：app.js）を開きます。
📌 ステップ2：ブレークポイント（Breakpoint）の設定
ブレークポイントとは、「プログラムの実行を一時的に止めたい行」に設定する目印のことです。
- コードを表示している画面で、行番号の横をクリックします。
- 青いマーク（ブレークポイント）がついたら設定完了です。
プログラムがその行に到達すると、実行が一時停止します。
📌 ステップ3：コードの流れを追う（ステップ実行）
ブレークポイントで停止した後、開発者ツール上部にあるボタンを使って、コードを一行ずつ進めたり、関数の中に入ったりして、その時点での変数の値を確認できます。
| ボタン | 役割 |
| ▶️ (Continue) | 次のブレークポイントまで一気に実行を再開 |
| ⬇️ (Step Over) | 次の行に進む（関数の中には入らない） |
| ↪️ (Step Into) | 関数の中に入り、その関数の内部を一行ずつ追う |
Google スプレッドシートにエクスポート
実行が停止している間、画面右側の「Scope」（スコープ）パネルを見れば、ローカル変数（let, const）やグローバル変数の現在の値がリアルタイムに確認できます。これにより、「変数が意図せず書き換わっている瞬間」を特定できるのです。
3. 📉 その他のデバッグテクニック
3-1. エラーメッセージの読み方
エラーが発生したときは、Console（コンソール）タブに出力されるメッセージを冷静に読みましょう。
Uncaught TypeError: Cannot read properties of undefined (reading 'name')：- 原因:
nameというプロパティを読み込もうとしたが、その親となるオブジェクトがundefined（未定義）だった。 - 対策:
nameを読み込む前に、オブジェクト自体がnullやundefinedでないか確認する。
- 原因:
ReferenceError: myVariable is not defined：- 原因: 存在しない変数名を使っているか、スコープ外からアクセスしようとしている。
- 対策: 変数名のスペルミスを確認するか、
letやconstで宣言されているか確認する。
エラーメッセージの右端に表示されているファイル名と行数をクリックすると、コードのエラー箇所にジャンプできます。
3-2. debuggerキーワード
コードの中にdebugger;と記述すると、ブレークポイントを設定していなくても、その行で自動的にプログラムを一時停止させることができます。一時的にデバッグしたいときに便利です。
JavaScript
function processData(data) {
// ここで止めたい！
debugger;
// ... 処理を追う ...
}
🌟 まとめ：デバッグは「犯人探し」ではなく「現状確認」
デバッグは、コードが期待通りに動かないときに「犯人探し」をするのではなく、「実行の過程で変数の値がどう変化しているか」を正確に確認する作業です。
console.log()：簡潔なログ出力で大まかな流れを把握。- ブレークポイント：実行を一時停止し、その瞬間の変数の状態を全て確認。
Scopeパネル：停止中の変数の値をリアルタイムに監視。
このデバッグ術をマスターすれば、あなたはもうバグを怖がる必要はありません。むしろ、バグを楽しみながら解決できる、真のプログラマーへと進化できるでしょう！
