やあ!JavaScriptの世界へようこそ。フロントエンドの最前線でコードを書いていると、たまに「あれ、なんでここでエラーになるんだ?」と頭を抱えたくなる瞬間があるよね。大丈夫、それは君が成長している証拠だよ。
今日は、JavaScriptの入り口で多くの人が一度はつまずく「変数のライフサイクル」について、専門用語の壁を崩して、お話ししようと思うんだ。
—
変数の「生まれてから活躍するまで」を知ろう
JavaScriptでコードを書くとき、私たちは `var`、`let`、`const` という「箱」の名前を決めますよね。でも、この箱がコードの中でどうやって準備されているのか、意識したことはあるかな?
実は、JavaScriptエンジンは、コードを一行ずつ読む前に、舞台裏で「準備運動」をしているんだ。変数が実際に使えるようになるまでには、大きく分けて3つのステップがあるよ。
1. 生成 (Creation):エンジンが「おっ、ここに変数が必要だな」とメモする。
2. 初期化 (Initialization):箱を用意して、中身を「空(undefined)」としてセットする。
3. 代入 (Assignment):君が書いた値(数字や文字)を、その箱に入れる。
この流れを、「お買い物」に例えてみようか。
—
買い物かごの例えで理解する「変数の秘密」
想像してみて。君がスーパーで買い物をしている場面だよ。
1. `var` の場合:ちょっとおっちょこちょいな性格
`var` は、昔からある古いやり方なんだけど、実はちょっとルーズなんだ。
- 生成と初期化が同時に行われる。
- つまり、まだ棚に商品が並ぶ前から「買い物かご(変数)」だけは手元にある状態なんだよね。だから、中身が入る前(初期化前)に「何持ってるの?」と聞いても、「まだ中身は空だよ(undefined)」と答えてくれる。
2. `let` と `const` の場合:きっちりした現代っ子
`let` や `const` は、今の開発では当たり前の存在。彼らはとっても律儀だよ。
- 生成はするけど、初期化はまだしない。
- 「ここに箱を置く準備はしたけど、まだ君が値を入れるまでは中身には触らせないよ!」というガードが固いんだ。
この「ガードが固い期間」のことを、専門用語で「一時的死域(TDZ:Temporal Dead Zone)」と呼ぶんだけど、かっこいい名前だよね。でも、要は「準備が整うまで立ち入り禁止!」というルールがあるだけなんだ。
—
コードで見てみよう
実際にエディタに打ち込んで、この挙動を確かめてみて。
// 【varの挙動】
console.log(myVar); // 結果: undefined(エラーにはならない。棚はあるけど空っぽ!)
var myVar = “こんにちは!”;
// 【let/constの挙動】
// console.log(myLet); // ここで実行すると “ReferenceError” になるよ!
// これが「立ち入り禁止エリア」の壁にぶつかった状態。
let myLet = “準備OK!”;
console.log(myLet); // 結果: こんにちは!
const myConst = “絶対変わらないよ”;
// myConst = “書き換え”; // これはエラーになる。constは「一度入れたら渡さない」という固い意志があるからね。
—
なんでこんなややこしい仕組みなの?
初学者の君からすれば、「全部同じルールにしてよ!」って思うよね。でも、これには理由があるんだ。
`let` や `const` のように、「準備ができるまで触らせない」というルールがあるおかげで、私たちは「まだ値が入っていない変数を使って計算してしまい、バグが起きる」というミスを、エンジンの段階で未然に防げるようになったんだよ。
昔の `var` は、このチェックが甘くて、思わぬところで変な値が入ってプログラムが止まることがよくあった。今のJavaScriptが「安全で書きやすい」と言われるのは、この「きっちりした仕組み」のおかげなんだ。
—
最後に:チーフアーキテクトからのアドバイス
これからコードを書くときは、これだけ覚えておいて。
- 基本は `const` を使う。(変わらないなら、それが一番安全で予測しやすいから)
- 値が変わる可能性があるなら `let` を使う。
- `var` は、もう「昔の思い出」としてしまっておこう。(今の現場では、`var` を使うことはほとんどないんだ)
プログラミングは、最初から全てを理解できなくても大丈夫。「へぇ、変数は準備運動をしてから動いているんだな」というイメージさえあれば、エラーが出ても「あ、今まだ準備中なんだな」と冷静に考えられるようになる。
その一歩があれば、君はもう立派なエンジニアの卵だよ。またいつでも聞きに来てね。一緒に素晴らしいコードを書いていこう!

コメント