JavaScriptの迷宮へようこそ。フロントエンドの現場で長年コードを書き続けていると、たまに「なぜか動かない」「なぜか値がundefinedになる」という怪奇現象に遭遇することがあります。
その犯人の多くが、今回お話しする`var`の巻き上げ（Hoisting）という現象です。
初心者の方が一番最初につまずく、この「JavaScriptの不思議なルール」を、一緒に紐解いていきましょう。大丈夫、仕組みさえ分かれば怖いものではありませんよ。
—
1. 「巻き上げ」って結局なに？
プログラミングの世界で「巻き上げ」という言葉を聞くと、なんだか難しそうに感じますよね。でも、イメージするのは「朝の準備」だけで十分です。
想像してみてください。あなたは朝起きて、鏡の前で身支度をします。本来なら、洋服を着る前に「あ、服を用意しなきゃ」となりますよね。
ところが、JavaScriptの`var`くんは、ちょっとおっちょこちょいです。コードを実行する前に、スコープ（その変数が有効な範囲）の先頭に「とりあえず名前だけ」登録しちゃうんです。
具体的な例を見てみましょう
console.log(myFavoriteFood); // ここで呼び出すとどうなる？
var myFavoriteFood = “カレーライス”;
console.log(myFavoriteFood); // ここではちゃんと表示される
このコードを動かすと、最初の`console.log`はエラーにならずに `undefined` と表示されます。なぜでしょうか？
JavaScriptのエンジンは、コードを一行ずつ読む前に、実は裏側でこんなふうに「下準備」をしています。
// JavaScriptエンジンがこっそり書き換えているイメージ
var myFavoriteFood; // 名前だけ先に登録！（宣言の巻き上げ）
console.log(myFavoriteFood); // まだ中身は入っていないので「undefined」
myFavoriteFood = “カレーライス”; // ここでやっと代入される
console.log(myFavoriteFood); // これで「カレーライス」が表示される
これが「巻き上げ」の正体です。宣言だけが勝手に先頭に移動させられて、中身（代入）は元の場所に残される。 だから、使う順番を間違えると「名前は知ってるけど、何者か（値）はまだ分からないよ！」という状態になってしまうんです。
—
2. なぜ `var` を使うと危ないのか
昔のJavaScriptでは`var`しかありませんでしたが、今の開発現場では、ほぼ100% `const` か `let` を使います。それには明確な理由があります。
`var`は先ほどのように「初期化される前に使えてしまう」という、非常に隙のある性質を持っています。これが大規模なプロジェクトになると、「あれ、この変数はどこで定義されたんだっけ？」というバグの温床になってしまうんです。
`let` と `const` はどう違うの？
最新の`let`や`const`も、実は内部的には巻き上げが起きています。ですが、「宣言するまで絶対に触らせないよ！」というガード（TDZ：一時的死域）が強力に働きます。
// letの場合
console.log(mySecret); // ここでエラーが発生！
let mySecret = “ヒミツ”;
`var`だと`undefined`（あやふや）で済ませてしまうところを、`let`や`const`は「ダメ！順番を守って！」と親切にエラーで教えてくれます。だからこそ、安心してコードが書けるんですね。
—
3. これからJavaScriptを学ぶ皆さんへ
「巻き上げ」という言葉を知るだけで、あなたはもう「なんとなく動くコード」を書く段階から、「仕組みを理解して制御するコード」を書く段階へ一歩進んだことになります。
今日覚えて帰ってほしいこと：
1. `var`は宣言を先頭に巻き上げるおっちょこちょい。
2. そのせいで、定義する前に使うと中身が`undefined`になってしまう。
3. だから、現場では`let`と`const`を使って、順序正しくスマートに書こう！
もし、古いコードや参考書で`var`を見かけても、「ああ、これは昔の書き方で、ちょっと危なっかしいやつだな」と余裕を持って眺められるはずです。
プログラミングは、こうした小さな「なぜ？」を一つずつ解決していくことで、気づけば大きな力がついているものです。焦らず、楽しみながら一緒に成長していきましょうね。
また分からないことがあったら、いつでも聞きに来てください。あなたのエンジニアライフを応援しています！
コメント