こんにちは！日々のコーディング、お疲れ様です。
新しいコードを書くワクワク感がある一方で、バグに直面したとき「なぜ動かないんだ…」と途方に暮れてしまう瞬間はありませんか？
もしかして、エラーの原因を探すためにコードのあちこちに `console.log()`（または `print` や `fmt.Println`）を仕込みまくっては、確認が終わったあとにそれを消す、なんて泥臭い作業をしていませんか？
実は、それ、今日で終わりにしましょう。
世界中のプログラマに愛されるエディタ「VS Code（Visual Studio Code）」には、コードの実行を自由自在に止め、中の変数を丸裸にして観察できる「強力なデバッガ」が標準で備わっています。
今回は、初心者の方でも今日から `console.log` デバッグを卒業し、プロレベルの効率的なエラー調査ができるようになるための「VS Codeデバッグ完全マスターガイド」をお届けします。これを覚えれば、あなたの開発スピードとバグ解決能力は文字通り劇的に変わりますよ。
—
1. なぜ `console.log` を卒業すべきなのか？
まず、私たちがなぜデバッガを使うべきなのか、その本質的な理由をお話しします。
`console.log()` によるデバッグは、いわば「暗闇の中で懐中電灯をあちこちに照らすようなもの」です。どこにバグがあるか予想がついていないと、何度もコードを書き換え、ビルドし、コンソールを確認する…という無駄な往復が発生します。
一方、デバッガを使った「ブレークポイント（中断点）」によるデバッグは、「時間を完全に一時停止させ、その瞬間の宇宙（メモリ空間）のすべてを覗き見る行為」です。
- 変数にどんな値が入っているか？
- どの関数を経由してここに辿り着いたのか（コールスタック）？
- 条件分岐のどちらに進んだのか？
これらが一目で、しかもコードを一切書き換えることなくわかります。一度この快適さを知ると、もう二度と `console.log` だらけのコードには戻れなくなりますよ。
—
2. デバッグの基本：まずは「ブレークポイント」を置こう
百聞は一見にしかず。実際に手を動かして体験してみましょう。
ここでは最も手軽に試せる Node.js 環境を想定しますが、Python や Webブラウザ（JavaScript）でも考え方は全く同じです。
動作確認用のサンプルコードを用意する
プロジェクトフォルダを作り、適当な名前（例: `debug-sample.js`）で以下のコードを作成してください。少し複雑なループと計算を行う、バグが潜んでいそうなコードです。
// debug-sample.js
function calculateTotalPrice(items) {
let total = 0;
for (let i = 0; i < items.length; i++) {
// ここで計算を行っている
let itemPrice = items[i].price items[i].quantity;
total += itemPrice;
}
return total;
}
const shoppingCart = [
{ name: 'Apple', price: 100, quantity: 2 },
{ name: 'Banana', price: 150, quantity: 3 },
{ name: 'Orange', price: 200, quantity: 1 }
];
const result = calculateTotalPrice(shoppingCart);
console.log(`合計金額: ${result}`);
ブレークポイントを設置する
1. VS Codeで `debug-sample.js` を開きます。
2. コードの行番号の左側（マウスカーソルを合わせると薄く赤く光る場所）をクリックしてみてください。
3. 赤い丸（🔴）が表示されましたね。これが「ブレークポイント」です。
今回は、`let itemPrice = …` の行（5行目あたり）にブレークポイントを置いてみましょう。
—
3. デバッグ実行の開始とコントローラーの使い方
いよいよ実行です。VS Codeの左側メニューにある「虫のマーク（実行とデバッグ）」をクリックするか、ショートカットキー `Ctrl + Shift + D`（Macの場合は `Cmd + Shift + D`）を押してください。
画面上部に現れる「実行とデバッグ」ボタン（または `F5` キー）を押すと、実行方法の選択肢が出ます。今回は `Node.js` を選択しましょう。
すると、コードの実行が瞬時に始まり……先ほどブレークポイントを置いた場所でピタッと処理が止まります！（コードの背景が黄色っぽくハイライトされます）
デバッグ操作パネル（フローティングバー）を使いこなす
画面の上部に、小さなコントローラーのようなバーが表示されています。左から順に、デバッグにおいて最も重要な4つのボタンです。
1. 続行 (F5): 次のブレークポイントに到達するまで、通常の速度でプログラムの実行を進めます。
2. ステップ オーバー (F10): 今いる行を実行し、「次の行」へ進みます。関数の中には入りません。
3. ステップ イン (F11): 今いる行に「関数呼び出し」が含まれている場合、その中へ飛び込みます。関数の内部の動きを追いたいときに使います。
4. ステップ アウト (Shift + F11): 現在実行中の関数の外へ抜け出し、その関数を呼び出した元の場所へ戻ります。
最初は 「F10（ステップオーバー）」 を中心に使いながら、1行ずつコードがどう動くかを眺めてみてください。
—
4. 画面の見方：変数とコールスタックの覗き穴
プログラムが一時停止しているとき、VS Codeの左側（デバッグサイドバー）には、あなたの開発を強力にサポートする情報が展開されています。
① 変数 (Variables) エリア
現在メモリ上に存在するすべての変数の値がリアルタイムで表示されます。
- `Local`: この関数内で定義されている変数（`total`, `itemPrice` など）
- `Closure`: クロージャ変数
- `Global`: グローバル変数
「今、`total` にはいくつ入っているんだっけ？」と思ったら、ここを見るだけで一瞬で答えがわかります。
② コールスタック (Call Stack) エリア
「今、自分がどこから呼ばれてここにいるのか」の履歴が表示されます。
例えば、関数Aが関数Bを呼び、関数Bが関数Cを呼んでいる最中でエラーが起きたとき、コールスタックを見れば「メイン処理 ➔ 関数A ➔ 関数B ➔ 関数C」という呼び出しの経路（履歴）が一網打尽にわかります。複雑なアプリケーションで迷子になったときの救世主です。
—
5. プロの技：`launch.json` を設定してデバッグを自由自在に操る
さて、ここまでが基本の「キ」ですが、実務の開発現場では、毎回実行環境を選んだり、複雑な引数や環境変数を渡したりする必要があります。
それを一発で解決するのが、設定ファイルである `launch.json` です。
launch.json の作り方
1. VS Codeの「実行とデバッグ」ビュー（虫マーク）を開く。
2. 「launch.json ファイルを作成します」というリンクをクリックする。
3. 環境の選択肢（Node.jsなど）を選ぶ。
すると、プロジェクト内に `.vscode/launch.json` というファイルが自動生成されます。このファイルを開き、以下のようにカスタマイズしてみましょう。
{
// 使用するデバッグ設定のバージョン
“version”: “0.2.0”,
“configurations”: [
{
// デバッグ設定の名称（ドロップダウンメニューに表示されます）
“type”: “node”,
“request”: “launch”,
“name”: “現在のファイルをデバッグ”,
// 現在エディタで開いているファイルを自動的にターゲットにする設定
“program”: “${file}”,
// デバッグ時に環境変数を渡したい場合はここに記述します（例: 開発モード指定）
“env”: {
“NODE_ENV”: “development”
},
// コンソール出力の挙動（integratedTerminalを選ぶとVS Code内の統合ターミナルに出力されます）
“console”: “integratedTerminal”
}
]
}
この `launch.json` を一度用意しておけば、次回からは `F5` キーを押すだけで、自分が今開いているファイルを最高の環境で即座にデバッグ実行できるようになります。プロジェクトごとにチームで共有（Gitに含める）しておけば、メンバー全員が同じ設定でスムーズに開発を始められるという大きなメリットもあります。
—
6. さらに効率を高める「条件付きブレークポイント」
最後に、少し応用編として「条件付きブレークポイント」をご紹介します。
例えば、1000回ループする処理があって、「500回目に何が起きているかだけを知りたい」というとき、普通のブレークポイントだと500回も `F5` を連打しなければなりません。これは地獄ですよね。
そんなときは、ブレークポイントの赤い丸を右クリックし、「編集 (Edit Breakpoint)」 を選択します。
そこで「条件 (Expression)」を入力できます。
（例: `i === 500` とか `itemPrice > 300` など）
こう設定しておくと、VS Codeは普段のループをマッハでスルーし、「その条件が真（true）になった瞬間だけ」プログラムをピタッと止めてくれます。このテクニックを知っているだけで、デバッグの効率は10倍以上に跳ね上がります。
—
まとめ
お疲れ様でした！今回はVS Codeのデバッグ機能の基本から、`launch.json` による環境構築、そしてプロが使うテクニックまでを解説しました。
- `console.log` での当てずっぽうなデバッグはもう卒業する
- 行番号の左をクリックして「ブレークポイント」を置く
- `F5` でデバッグを開始し、`F10` で1行ずつコードの動きを追う
- 変数パネルで、その瞬間のデータの中身を丸裸にする
- `launch.json` を整えて、自分だけの快適なデバッグ環境を作る
最初は少し操作に戸惑うかもしれませんが、2〜3回使えばすぐに手が覚えます。何より、自分の手でコードの時間を止め、内部を悠々と見渡す感覚は、プログラミングの大きな醍醐味の一つです。
これをマスターすれば、毎日のコーディングが劇的に楽になり、エラーを恐れない強い自信が持てるようになりますよ。ぜひ、今日の開発から試してみてくださいね！