JavaScriptの世界へようこそ！
「`var`って使っちゃダメなの？」「`let`と`const`って何が違うの？」という疑問、誰もが一度は通る道です。でも、もしあなたが「そもそもJSの中で変数がどうやって管理されているのか」という裏側の仕組みまでイメージできたら、もう怖いものなしです。
今日は、伝説のアーキテクトである僕が、この「目に見えない変数の管理システム」を、お買い物の風景に例えて解説しますね。
—
昔の管理術：レジの「共通お買い物リスト（変数オブジェクト）」
JavaScriptの歴史を少し遡ると、昔（ES3という時代）は、変数を管理するために「変数オブジェクト（VO）」というものを使っていました。
これは、お店のカウンターに置かれた「大きな共用のホワイトボード」だと思ってください。
- お店に入った瞬間、すべての変数がそこに「とりあえず名前だけ」書き込まれます。
- まだ中身が決まっていなくても、名前さえあれば「あ、この名前はもう使われてるな」と判断される。
これが、いわゆる「巻き上げ（ホイスティング）」の正体です。名前だけが先にホワイトボードに刻まれているから、コードのどこに書いても「その変数の存在」だけは知っている状態になるんです。でも、これだと「まだ中身が入っていないのに使っちゃう」というミスが多発しました。
—
今の管理術：担当者ごとの「専用メモ帳（環境レコード）」
今のJavaScript（ES5以降）は、もっと賢くなりました。「レキシカル環境」という仕組みの中に「環境レコード」というものを持っています。
これは、さっきのような「大きなホワイトボード」ではなく、「それぞれの担当者が持つ、整理整頓された専用メモ帳」です。
- 必要な時が来るまで、その名前はメモ帳に書き込まれません。
- `let`や`const`で宣言されると、そのタイミングで初めてメモ帳に名前が載ります。
これのおかげで、「まだメモしていない名前を呼ぼうとすると、即座にエラーを出して守ってくれる」ようになったのです。これが、現代のJSが安全である最大の理由です。
—
実際にコードで見てみよう
まずは、昔ながらの`var`と、現代の`let`の振る舞いの違いを、エディタで確認してみましょう。
// 1. varの場合（昔の「ホワイトボード」方式）
console.log(myGoal); // -> undefined（エラーにならない！）
// まだ中身はないけど、名前だけは「巻き上げ」で登録されている状態。
var myGoal = “世界最高峰のエンジニアになる”;
// 2. letの場合（現代の「専用メモ帳」方式）
// console.log(myDream);
// -> ここで実行すると「ReferenceError」になる。
// 「まだメモに名前を書いてないのに、何の話をしてるの？」とJSが止めてくれる！
let myDream = “JavaScriptを極める”;
どうでしょう？ `let`を使うと、JSが「準備ができるまで触らせないよ！」と親切にガードしてくれるのがわかりますよね。これが、バグを防ぐための強力な仕組みなんです。
—
初学者がつまずかないための「3つの約束」
この仕組みを理解した上で、明日からコードを書くときに意識してほしいことを3つだけ伝えますね。
1. `var`は卒業しよう
`var`は「ホワイトボード」の性質上、どこからでも書き換えられたり、巻き上げで意図しない動きをしたりします。現代の開発現場では、もうほとんど使いません。
2. 基本は`const`、どうしても変えたい時だけ`let`
「この値は変わらないよ」と宣言する`const`は、コードを読みやすくする最強のツールです。迷ったらまずは`const`を使いましょう。
3. 「スコープ（範囲）」を意識する
`{ }`（ブロック）の外側と内側では、別のメモ帳を使っていると考えてください。ブロックの外側で宣言した変数は、内側からは見えますが、逆は通りません。これは「情報を汚さないための境界線」です。
—
最後に：完璧じゃなくていい
最初は「環境レコード？ レキシカル環境？」なんて言葉、ちんぷんかんぷんで当たり前です。
僕も最初は、「なぜか変数が読み込めない！」と何時間も悩みました。でも、その悩んだ分だけ、あなたのJavaScriptに対する直感は研ぎ澄まされていきます。
まずは「`let`と`const`を使っておけば、JSが安全に管理してくれるんだな」という安心感を持って、どんどんコードを書いてみてください。エラーが出たら、それはJSがあなたを助けようとしてくれている合図ですよ。
もしまた壁にぶつかったら、いつでもここに戻ってきてくださいね。一緒に少しずつ、深淵を覗いていきましょう！
コメント