フロントエンドの最前線で戦っている諸君、お疲れ様。
コードを書いていると、「なぜか想定した値にならない」「クロージャがメモリを食っている気がする」といった壁に必ずぶち当たるはずだ。そのとき、闇雲に `console.log` を埋め込んでいないか？
もちろんログデバッグも一つの手段だが、プロの現場では「ブラウザのスコープパネルを制する者」がデバッグを制すると言っても過言ではない。今日は、Chrome DevToolsのScopeパネルを駆使して、JSの実行環境を「透視」する方法を伝授しよう。
—
1. なぜ「Scopeパネル」を見るべきなのか
JavaScriptの実行コンテキストやスコープチェーンは、頭の中だけで追いかけるには複雑すぎる。`var`の巻き上げ、`let/const`のTDZ（暫定デッドゾーン）、そしてクロージャのメモリ保持。これらは仕様書を読んでも実感が湧かないが、Scopeパネルを開けば「今、何がメモリ上に存在しているか」が一目瞭然だ。
特にクロージャのデバッグにおいて、Scopeパネルは唯一無二の相棒になる。
2. 実践：クロージャの「内部」を覗き見る
まずは、以下のコードをブラウザのコンソールか、適当なHTMLに貼り付けてみてくれ。何が起きているか、スコープの変化を追うのが目的だ。
function createCounter(name) {
let count = 0; // この変数はクロージャによって保持される
return function increment() {
count++; // ここで外部スコープの変数を参照している
console.log(`${name}: ${count}`);
debugger; // ここで実行を一時停止させる
};
}
const myCounter = createCounter(‘フロントエンドの修行’);
myCounter();
手順：
1. 上記コードを実行する。
2. ブラウザの `Sources` パネルを開く。
3. `debugger` の行で処理が止まったら、右側のサイドバーにある 「Scope」パネル に注目してほしい。
—
3. Scopeパネルの読み解き方
Scopeパネルには、現在地から外側に向かって、以下の順で階層が表示されるはずだ。
- Local (ローカルスコープ): 現在実行中の関数内にある変数。今回の例なら `increment` 関数のスコープだ。
- Closure (クロージャ): これが本丸だ。`createCounter` で定義された `count` や `name` がここに入っている。
- Script: `let` や `const` で定義されたトップレベルのスコープ。
- Global: `window` オブジェクトなど、一番外側の世界。
「えっ、`count` がどこにあるか見失った？」と思ったら、このClosureパネルを確認すればいい。関数が終了しても、このスコープが生き残っている（参照されている）様子を視覚的に確認できるはずだ。
—
4. 現場で使える「プロのTips」
Tips 1: 「Watch」式と組み合わせて推論する
Scopeパネルで変数の値を確認するだけでなく、右上の「Watch」パネルに特定の式（例えば `typeof count` や `count > 10` など）を追加しておこう。ステップ実行しながら、スコープ内の変数がどう変化し、条件式がどう評価されるかを確認する。これが最も効率的なバグの追い込み方だ。
Tips 2: `var` と `let` の違いを視覚化する
古いコードベースを触っていると、`var` の再宣言や関数スコープの挙動に悩まされることがあるだろう。`var` を使ったコードを `debugger` で止めると、その変数が `Function` スコープ（または Global）に配置されていることが確認できる。`let/const` と比較して、「どこに生えているか」の違いを見るだけで、巻き上げの理解が一段深まるはずだ。
—
最後に：デバッガは「道具」ではなく「思考の一部」
多くのエンジニアが `console.log` を多用するのは、デバッガの操作が面倒だからだ。だが、それは思考を止めているのと同義だよ。
Scopeパネルで変数の生存期間を追いかける経験を積むと、自然と「この実装だとクロージャが肥大化するな」「このスコープでメモリがリークしそうだ」という勘が働くようになる。それが、中級からシニアへ上がるための「アーキテクチャの嗅覚」だ。
次にバグに出会ったら、まずは `debugger` を一行仕込んで、Scopeパネルをじっくりと眺めてみてほしい。JavaScriptの裏側で起きているドラマが、君の目の前で展開されるはずだから。
何か詰まったら、いつでも聞いてくれ。現場からは以上だ。
コメント