こんにちは。フロントエンドの現場で、日々コードの海を泳いでいるアーキテクトです。
JavaScriptを学び始めると、必ずと言っていいほど「スコープ」や「実行コンテキスト」という、ちょっと堅苦しい壁にぶつかりますよね。でも大丈夫。これらは決して魔法のような仕組みではなく、実は私たちの日常にもある「あるルール」と同じなんです。
今日は、JavaScriptエンジンが頭の中で何を考えながらコードを動かしているのか、その「舞台裏の仕組み」を一緒に解き明かしていきましょう。
—
1. 「実行コンテキスト」は、舞台の上の台本だ
まず、「実行コンテキスト」という言葉に怯える必要はありません。これは「今、この関数が実行されるために必要な情報一式が入ったカバン」だと思ってください。
JavaScriptがコードを読み進めるとき、関数が呼び出されるたびに「よし、新しい仕事が始まったな！」と、その仕事専用のカバン（実行コンテキスト）を一つ用意します。中には、その関数の中で使う変数や引数などのメモが入っています。
「スタック」は、お皿の積み重ね
JavaScriptには「コールスタック」という管理場所があります。これは「お皿を重ねていく場所」です。
1. 新しい関数が呼ばれると、その関数用の「お皿（コンテキスト）」が一番上に置かれます。
2. 関数が終わると、そのお皿は「ごちそうさま！」と片付け（破棄）られます。
この「一番上に積んで、終わったら捨てる」というシンプルなルールが、JavaScriptの実行のすべてです。
—
2. 実際に見てみよう：コールスタックの旅
言葉だけだと難しいので、ちょっとしたコードで動きを追ってみましょう。
function 挨拶する() {
console.log(“こんにちは！”);
自己紹介する(); // ここで別の関数を呼ぶ
console.log(“さようなら！”);
}
function 自己紹介する() {
console.log(“私はJSエンジニアです。”);
}
挨拶する(); // プログラムのスタート地点
このコードが実行されるとき、スタックの中ではこんなことが起きています。
1. グローバルコンテキスト（全体のお皿）が置かれる。
2. `挨拶する()` が呼ばれる。スタックの上に「挨拶する」用のお皿が乗る。
3. `挨拶する` の中で `自己紹介する()` が呼ばれる。さらにその上に「自己紹介する」用のお皿が乗る。
4. `自己紹介する` が終わると、一番上の皿が取り除かれる。
5. `挨拶する` の続きが実行され、それも終わったら皿が取り除かれる。
「あ、今の関数が呼ばれたから、今のお皿が一番上にあるんだな」という感覚、なんとなく掴めましたか？
—
3. なぜ `var` ではなく `let` や `const` なのか？
ここで、皆さんがよく悩む `var` と `let/const` の話に繋がります。
昔の `var` は、この「お皿（関数）」の壁を平気で乗り越えてしまう、ちょっと強引な性格でした。だから、意図しない場所で変数が書き換わってしまうバグが多発していたんです。
一方、`let` や `const` は「ブロック（波括弧 `{ }` の中）」という、もっと小さな「小皿」を大切にします。
if (true) {
let 小さな秘密 = “この中だけで有効！”;
console.log(小さな秘密);
}
// console.log(小さな秘密); // ここでエラー！
// なぜなら、if文という「小皿」が終わった瞬間に、その変数は片付けられたからです。
`let` や `const` を使うことで、JavaScriptエンジンは「この変数はこのお皿だけでいいんだな」と効率よくメモリを掃除できます。これが、現代のJS開発で `let` と `const` が推奨される最大の理由です。
—
4. 最後に：つまずくのは「成長の証」
最初は「実行コンテキスト？ 巻き上げ？ 何のこと？」と混乱するのが当たり前です。ベテランのエンジニアも、最初はみんなここでつまずいて、何度もコードを書いては壊し、を繰り返してきました。
コツは、「今、どこのお皿（関数）の上にいるんだろう？」と頭の中で想像してみることです。
もしコードが期待通りに動かないときは、`console.log` を使って「今ここを通っている！」と確認するのも立派な技術です。泥臭くても、それが一番の近道ですよ。
焦らず、一歩ずつ。皆さんの書くコードが、いつか素晴らしいアプリケーションの土台になることを応援しています！また何かあれば、いつでも聞きに来てくださいね。
コメント