【入門編】スコープチェーンの深さとパフォーマンス – JavaScript実践ガイド

こんにちは。フロントエンドの現場で長年コードと向き合ってきた者です。

プログラミングを始めたばかりの頃、「変数のスコープ」という言葉に少し戸惑ったことはありませんか？「どこまでが有効範囲なのか？」というルールですね。今日はその中でも、ちょっと深掘りした「スコープチェーンの深さとパフォーマンス」というテーマでお話しします。

「パフォーマンス？難しい話かな？」と身構える必要はありません。実は、私たちの身の回りにある「探し物」に例えると、とてもシンプルで人間味のある話なんです。

—

JavaScriptにおける「スコープチェーン」とは、一言でいえば「お目当ての変数を探すための、リレー形式の探索ルート」のことです。

想像してみてください。あなたは今、自分の部屋（一番内側のスコープ）で「ハサミ」を探しています。

1. まず、自分の机の上（ローカルスコープ）を見ます。なければ…
2. リビングの引き出し（一段外のスコープ）を見に行きます。そこにもなければ…
3. 家全体の物置（グローバルスコープ）まで探しに行きます。

もし、この「家全体の物置」が100階建てのビルだったらどうでしょう？毎回一番下の階までエレベーターで探しに行くのは、さすがに時間がかかりますよね。これが、スコープチェーンが深くなることで起きる「オーバーヘッド（余計な負荷）」の正体です。

コードが深くなればなるほど、JavaScriptエンジンは「この変数はどこにあるんだ？」と、外側のスコープへ外側のスコープへと何度も確認しに行く必要があります。

最近のブラウザは非常に優秀なので、多少のスコープの深さでアプリが止まることはありません。しかし、「何万回も繰り返すループ処理」の中でこの探索が発生すると、チリも積もれば山となり、わずかな遅延が積み重なって「なんだか動作がモッサリしているな」という感覚につながります。

// グローバルスコープ（一番遠い場所）
const tax = 0.1;

function calculateTotal() {
// ここでさらに深い関数を作ると…
function addTax(price) {
// 毎回、外側のスコープまで「taxはどこだ？」と探しに行きます
return price + (price tax);
}

return addTax(1000);
}

この程度なら全く問題ありません。しかし、もしこれが何層にも重なった関数の中で、何千回と呼び出されたら？毎回「tax」を探しに旅に出るのは非効率ですよね。

「じゃあ、どうすればいいの？」と不安になる必要はありません。現場でよく使われる、シンプルで効果的な「解決策」をご紹介します。

何度も使う値は、わざわざ遠くへ探しに行かせず、関数のすぐ近くで受け取ってあげるのが一番です。

// 改善のヒント：外側の変数を「引数」として渡す
function calculateTotal() {
const tax = 0.1; // すぐ近くにある

function addTax(price, currentTax) {
// 探しに行かなくていい！渡されたものを使うだけ
return price + (price currentTax);
}

return addTax(1000, tax);
}

昔の`var`はスコープのルールが少し特殊で、思わぬところで変数が「外へ漏れ出す」ことがありました。現代の`const`や`let`を使うと、「ブロック（`{ }`）」という小さな箱の中に変数を閉じ込めることができます。

範囲が狭ければ、JavaScriptエンジンも「あ、この箱の中だけ見ればいいんだな！」とすぐに判断できるため、結果的に探索の手間が省けるのです。

ここまで読んで「これからはスコープを極限まで浅くしなきゃ！」と気負う必要はありません。

プログラミングにおいて、最も大切なのは「コードの読みやすさ」です。スコープを浅くしようとして、逆にコードが複雑になり、誰が読んでも理解できないものになってしまっては本末転倒です。

1. まずは読みやすいコードを書くこと。
2. もし、ものすごく大量のデータを処理して重いと感じたら、スコープの深さを疑ってみること。

この順番で大丈夫です。現場で活躍するエンジニアも、最初はみんな同じところで立ち止まります。少しずつ、スコープという「探し物のルール」と仲良くなっていきましょうね。

また何か気になったことがあれば、いつでも聞きに来てください。あなたのエンジニアライフを応援しています！