VSCodeでのデバッグは「効率化の鍵」

はじめに

コードの動作を確認するとき、console.log() や print() を使う方法が真っ先に思いつくかもしれません。これはシンプルで便利ですが、次第に以下のような問題に直面します：

• ログの量が多すぎて探せない
• 出力位置を何度も変更する必要がある
• ログを仕込んでも原因がつかめない
• ログの削除し忘れで本番環境に残ってしまう

そんなときに力を発揮するのが、Visual Studio Code のデバッガ機能です。

VS Codeのデバッグ機能を使うと、次のようなことが可能になります：

• 任意の行でプログラムを停止（ブレークポイント）
• 停止時点での変数の中身をリアルタイムで確認
• コードを一行ずつ実行（ステップ実行）
• 特定条件のときだけ止める（条件付きブレークポイント）

デバッガを使えば、「バグの原因を素早く特定する力」が格段に向上します。しかも、GUI操作で直感的に使えるため、初心者でもすぐに習得可能です。

---

参考記事

Svelte + Vite のプロジェクトでのデバッグ設定については、以下の外部記事が非常に参考になります。
Svelte + Vite のプロジェクトでデバッグの設定をする in VSCode

デバッグの基本概念

VS Codeのデバッガは、プログラムを「一時停止」させながら内部状態を観察できる強力なツールです。最低限、以下の基本機能を押さえればOKです。

ブレークポイント（Breakpoint）

特定の行でプログラムを停止できます。停止時にその行の周囲の変数や状態を確認でき、原因特定がスムーズになります。

設定方法:

1. デバッグしたい行の左側（行番号の横）をクリック
2. 赤い丸（ブレークポイント）が表示される
3. もう一度クリックすると削除される

ステップ実行（Step）

一行ずつコードを実行しながら、プログラムの流れを追えます。

• ステップオーバー（F10）: 関数呼び出しをスキップして次の行へ
• ステップイン（F11）: 関数の中へ入って詳しく確認
• ステップアウト（Shift + F11）: 関数から抜けて外側の処理へ

変数の監視（Watch）

デバッグ中に特定の変数の値を継続的に追いたいときに便利な機能です。

使い方:

1. デバッグ中にサイドバーの「Run and Debug」ビューを開く
2. WATCH セクションにある + ボタンをクリック
3. 監視したい変数名を入力
   

活用例:

• ループ内で変数 i の変化を追いながらループの終了条件をチェック
• オブジェクト user のプロパティがいつ変更されるかを確認
• 状態管理の変数に想定外の値が入るタイミングを特定

💡 複雑なデータ構造（オブジェクトや配列）も展開して中身を確認できるため、ログ出力よりも圧倒的に可視性が高いです。

---

言語別デバッグ設定

JavaScript / Node.js

1. 拡張機能の確認
JavaScript/TypeScriptのデバッグ機能は VS Code に標準で内蔵されているため、追加の拡張機能は不要です。

2. launch.json の作成

1. Ctrl + Shift + P でコマンドパレットを開く
2. Debug: Add Configuration を選択
3. Node.js を選択

以下のような設定ファイルが .vscode/launch.json に作成されます：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/index.js",
      "console": "integratedTerminal"
    }
  ]
}

3. デバッグの実行

1. ブレークポイントを設定
2. F5 キーを押すか、サイドバーの「Run and Debug」から「Launch Program」を選択

Python

1. 拡張機能のインストール

1. 拡張機能ビューを開く（Ctrl + Shift + X）
2. Python で検索
3. ms-python.python をインストール

2. デバッグの実行

1. Python ファイルを開く
2. ブレークポイントを設定
3. F5 キーを押す
4. 初回は設定を選択（通常は「Python File」）

React / Next.js

1. launch.json の設定例

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "request": "launch",
      "type": "chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

2. デバッグ手順

1. npm start または npm run dev でアプリケーションを起動
2. VS Code でブレークポイントを設定
3. F5 でデバッガを起動（新しいChromeウィンドウが開く）

---

実践例：バグの修正

以下のようなバグのあるコードを例に、デバッグの実践方法を見てみましょう。

function calculateTotal(items) {
  let total = 0;
  for (let i = 0; i <= items.length; i++) {  // バグ: <= ではなく < であるべき
    total += items[i].price;
  }
  return total;
}

const items = [
  { name: "apple", price: 100 },
  { name: "banana", price: 80 },
  { name: "orange", price: 120 }
];

console.log(calculateTotal(items));  // エラーが発生

デバッグ手順:

1. ブレークポイントを設定

   • for ループの行（3行目）にブレークポイントを設定

2. デバッガを起動

   • F5 キーでデバッガを開始

3. 変数を監視

   • Watch に i、items.length、items[i] を追加

4. ステップ実行で確認

   • F10 でループを一回ずつ実行
   • i が 3 になったとき、items[3] が undefined になることを確認
   • 条件式の <= が問題であることを特定

5. 修正

   • i <= items.length を i < items.length に修正

---

高度な機能

条件付きブレークポイント

特定の条件が満たされたときだけ停止するブレークポイントです。

設定方法:

1. ブレークポイントを右クリック
2. "Edit Breakpoint" を選択
3. 条件式を入力（例: i === 5 や user.name === 'admin'）

ログポイント

コードを停止せずに、特定の行でログを出力する機能です。

設定方法:

1. 行番号の左側を右クリック
2. "Add Logpoint" を選択
3. 出力したいメッセージを入力（例: 変数 i の値: {i}）

---

Svelte/SvelteKit でのデバッグ

SvelteKit プロジェクトでのデバッグには、以下の設定が必要です。

1. launch.json の設定

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch SvelteKit",
      "request": "launch",
      "type": "chrome",
      "url": "http://localhost:5173",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "/./*": "${webRoot}/*"
      }
    }
  ]
}

2. デバッグ手順

1. npm run dev でアプリケーションを起動
2. .svelte ファイルの <script> 部分にブレークポイントを設定
3. F5 でデバッガを起動

---

トラブルシューティング

よくある問題と解決方法

問題: ブレークポイントが無効（グレーアウト）になる

• 原因: ソースマップが正しく設定されていない
• 解決: launch.json の sourceMapPathOverrides を確認

問題: 変数の値が表示されない

• 原因: スコープ外、または最適化により削除されている
• 解決: より上位のスコープや、関数の入り口でブレークポイントを設定

問題: デバッガが起動しない

• 原因: 拡張機能が正しくインストールされていない
• 解決: 該当言語の拡張機能を再インストール

---

まとめ

VS Code のデバッグ機能は、効率的なバグ修正の強力な武器です。最初は console.log に慣れ親しんでいても、デバッガを使い始めると以下のメリットを実感できるはずです：

• 時間短縮: バグの原因特定が格段に速くなる
• 深い理解: プログラムの動作を詳細に把握できる
• クリーンなコード: ログ文を残さない習慣が身につく

まずは簡単なプロジェクトでブレークポイントとステップ実行を試し、徐々に変数監視や条件付きブレークポイントなどの高度な機能を活用してみてください。デバッグスキルの向上は、プログラマとしての成長に直結します。

💡 次のステップ: より複雑なアプリケーションや、マルチスレッド処理のデバッグにも挑戦してみましょう。VS Code のデバッグ機能は、あなたが思っている以上に奥深く、強力です。