こんにちは。フロントエンドの現場で長年コードと向き合ってきた私から、今日はJavaScriptの「ブロックスコープ」という概念について、少しだけお話しさせてください。
プログラミングを始めたばかりの頃、`if`文や`for`文の中に書いた変数が、なぜか外で使えなかったり、逆に予期せぬ場所で書き換わってしまったりして「なんだこれは！」と頭を抱えたことはありませんか？
大丈夫です。それはあなたが悪いのではなく、JavaScriptが持つ「部屋のルール」を知らなかっただけのこと。今日は、この「部屋のルール」を、日常の風景に例えてスッキリ整理していきましょう。
—
1. 「ブロックスコープ」って、何のこと？
プログラミングにおける「ブロック」とは、波括弧 `{ }` で囲まれた範囲のことです。そして「スコープ」とは、その変数が「どこまで通用するか（生存できるか）」という有効範囲を指します。
これを、「マンションの一室」に例えてみましょう。
- ブロック `{ }`：マンションの特定の部屋。
- 変数：その部屋の中に置いた家具。
`let` や `const` を使って変数を宣言すると、その変数は「宣言した部屋（ブロック）の中」でしか存在できません。廊下（外側）からは、部屋の中の家具は見えないし、触ることもできないのです。これが「ブロックスコープ」の正体です。
実際にコードで見てみよう
// マンションの外（グローバル）
let 建物 = “オフィスビル”;
if (true) {
// ここが波括弧で囲まれた「一つの部屋」です
let 部屋の家具 = “ソファ”;
console.log(部屋の家具); // 「ソファ」と表示される（部屋の中からは見える）
}
// 部屋の外に出てきました
// console.log(部屋の家具);
// ↑これを実行するとエラーになります！「そんな家具（変数）はどこにもないよ！」と怒られます。
このように、`{ }` を抜けた瞬間に、中の変数は「お役御免」として消滅します。これが、メモリを無駄にせず、バグを防ぐための非常に賢い仕組みなんです。
—
2. なぜ「var」を使ってはいけないのか？
昔のJavaScriptでは `var` という書き方しかありませんでした。しかし、今の現場で `var` を使うことは、ほぼありません。
なぜか？ `var` は「部屋のルールを無視する」からです。
- `var` は `{ }` を無視して、建物全体（関数単位）で共有されてしまいます。
- 気づかないうちに別の部屋の家具を上書きしてしまったり、どこからでもアクセスできたりして、大規模な開発ではパニックの元になるんです。
`let` と `const` は、「その部屋だけのルール」をしっかり守ってくれる、現代のJavaScriptにおける「良識ある住人」だと思ってください。
—
3. for文でつまずきやすいポイント
ループ処理（`for`文）でも、このスコープが重要になります。
for (let i = 0; i < 3; i++) { // この i は、ループの「この回」専用のものです console.log(i + "回目のループです"); } // console.log(i); // ↑ ループが終わった後に i を呼ぼうとしてもエラーになります。 // 「ループという部屋」はもう解体されてしまったからです。 もしこれが `var` だったら、ループが終わった後も `i` が残ってしまい、他の場所で `i` を使ったときに数値が書き換わっていて……という恐ろしいバグを引き起こします。`let` を使えば、ループが終わった瞬間に綺麗さっぱり片付けてくれるので、安心して次のコードが書けますね。 ---
最後に：つまずくのは「理解している証拠」です
「スコープ」の概念は、最初は少し窮屈に感じるかもしれません。「どこからでも変数を触れたほうが楽じゃない？」と思うこともあるでしょう。
でも、想像してみてください。巨大なマンションで、誰でも勝手に他人の部屋の家具を動かせる世界を。……きっと、すぐに大混乱が起きますよね。
JavaScriptのブロックスコープは、「自分の持ち物は自分の部屋で管理する」という、コードを安全に保つためのマナーなんです。
もしコードを書いていて「変数が消えた！」と焦ったら、それは「ああ、部屋の外に出ちゃったんだな」と思い出してみてください。一つひとつ整理していけば、必ずコードはあなたの思い通りに動いてくれます。
またいつでも、困ったときはここに戻ってきてくださいね。応援しています！
コメント