プレゼンテーションシナリオ: スライド76、77、78

スライド76、77、78では、JavaScript Scope（関数内の変数のスコープ）について説明します。

Scopeとは？

Scope（スコープ） = 変数がアクセス可能（使用可能）な場所です。簡単に言うと：変数が存在する場所の「制限」があります。

これにより変数名の衝突を回避し、コードを明確に保つことができます。

JavaScriptのスコープの種類

a. Global Scope（グローバルスコープ）

すべての関数の外で宣言された変数 → ファイル内のどこでも使用できます。

例：

let globalVar = "I am global";

function showGlobal() {
    console.log(globalVar); // OK
}

showGlobal();
console.log(globalVar); // OK

変数globalVarは関数の外で宣言されているため、関数showGlobal()内でも関数の外でも使用できます。

b. Function Scope（関数スコープ）

関数内で宣言された変数 → その関数内でのみ存在し使用できます。つまり、関数内の変数は関数内でのみ使用でき、関数の外では変数は効果がありません。

例：

function testScope() {
    let localVar = "I am local";
    console.log(localVar); // OK
}

testScope();
console.log(localVar); // ❌ Error: localVar is not defined

変数localVarは関数testScope()内にのみ存在します。関数の外に出ると、この変数は存在しなくなるため、エラーが発生します。

c. Block Scope（ブロックスコープ）

letとconstでは、変数は宣言された{ }のペアの内部でのみ存在します。

（逆に、varにはblock scopeがなく、function scopeのみがあります）。

例：

{
    let a = 10;
    const b = 20;
    var c = 30;

    console.log(a); // 10
    console.log(b); // 20
    console.log(c); // 30
}

console.log(c); // 30 (varにはblock scopeがない)
console.log(a); // ❌ Error: a is not defined
console.log(b); // ❌ Error: b is not defined

変数aとb（letとconstを使用）はblock { }内にのみ存在し、blockの外ではエラーが発生します。

変数c（varを使用）にはblock scopeがないため、blockの外でも使用できます。

d. Nested Scope（ネストされたスコープ）

スコープはネストできます。nested scopeについて詳しく理解するには、w3schoolを参照してください。

以上で、JavaScriptのScopeについて、Global Scope、Function Scope、Block Scope、Nested Scopeを含む説明を終わります。