【入門編】ブラウザデバッガでのスコープ確認手法 – JavaScript実践ガイド

こんにちは。フロントエンドの最前線でコードと格闘し続けているチーフアーキテクトです。

JavaScriptを書き始めたばかりの頃、「あれ、さっきまで使えていた変数が、なぜか突然エラーになるぞ……？」なんて経験、一度はありますよね。大丈夫、それはあなたが悪いんじゃなくて、JavaScriptの「スコープ（変数の見える範囲）」というルールが、最初は少しだけ気難しいだけなんです。

今日は、そんな見えない変数の世界を、Chromeブラウザの「魔法のメガネ（デバッガ）」を使って丸裸にする方法をお教えします。難しい理論は一旦置いておいて、一緒に紐解いていきましょう。

—

まずはイメージから。JavaScriptのスコープは、「お家の間取り」だと考えてください。

`var`（昔のルール）： お家全体どこからでも見える「リビング」に置かれたもの。どこからでも触れるので、便利だけど誰かが勝手に書き換えてしまうトラブルが起きやすい。
`let` と `const`（今の主流）： `{ }` という「お部屋（ブロック）」の中にだけ置かれたもの。その部屋の外からは見えません。プライバシーが守られているので、今の開発ではこちらが絶対の正義です。

コードが思い通りに動かないとき、頭の中で推測するのはもうやめましょう。Chromeのデバッガを使えば、プログラムが今まさに「どの部屋にいて」「どんな道具（変数）を持っているか」を覗き見ることができます。

コードの中に `debugger;` と一行書くだけ。これだけで、ブラウザはそこで一時停止してくれます。

// お買い物の計算をイメージしたコードです
function calculateTotal(price) {
const tax = 0.1; // 消費税
let total = price + (price tax); // 合計金額

// ここで一時停止！魔法のメガネをかけます
debugger;

console.log(“計算完了:”, total);
}

calculateTotal(1000);

1. Chromeでページを開き、`F12` キー（または右クリック→検証）を押してデベロッパーツールを開きます。
2. そのままページをリロードしてみてください。
3. `debugger;` の場所で処理が止まり、画面右側の「Scope」というタブに注目してください。

—

Scopeパネルを開くと、いくつかの階層が見えるはずです。これがJavaScriptの「階層構造」です。

Local（ローカル）： 今まさに実行されている関数の中にある変数。さっきのコードで言えば `price`, `tax`, `total` がここに並んでいます。
Script（スクリプト）： 関数を超えて、そのファイル全体で見えている変数。
Global（グローバル）： ブラウザのウィンドウ全体（`window`）で共有されている、どこからでも見える変数。

もし関数の中にさらに関数がある場合、「Closure（クロージャ）」という項目が出てきます。これは「外側の部屋から持ち出した思い出の道具箱」のようなもの。外側の変数を内側の関数が「記憶」している状態ですね。

—

初心者のうちは、「`console.log()` で確認すればいいじゃん」と思うかもしれません。でも、`console.log()` は「その瞬間の値」しか教えてくれません。

一方で、このデバッガの Scope パネルは、「コードが実行される瞬間の、全変数の相関図」をリアルタイムで見せてくれるのです。

例えば、意図せず変数が書き換わってしまったとき、Scopeパネルを眺めていれば「あ、ここで別の変数が割り込んで値を上書きしているな」と一目でわかります。これは、まるで名探偵が現場の指紋を照合するような快感ですよ。

—

「変数がどこにあるかわからない」「スコープエラーが出る」。これらは、あなたがコードと真剣に向き合っている証拠です。

JavaScriptの世界は自由度が高い分、ルールも少し複雑です。でも、今日紹介した `debugger;` と `Scopeパネル` という相棒がいれば、もう迷子になることはありません。

まずは自分のコードに `debugger;` を放り込んで、プログラムがどんな「お部屋」で動いているのか、ぜひ覗いてみてください。最初は難しく感じるかもしれませんが、何度か繰り返すうちに、コードの裏側が透けて見えるようになりますよ。

応援しています！また何かあれば、いつでも聞きに来てくださいね。