3.2 グローバルスコープとローカルスコープ
JavaScript のスコープは、大きく分けて 2 つの階層があります。
皆さんが以前学習した Java でも、メソッドやブロック（{ }）の中で変数の範囲が決まっていましたが、JavaScript にも似たルールがあります。
1. グローバルスコープ
関数やブロックの外側で宣言された変数の範囲です。
プログラムのどこからでもアクセス（読み書き）が可能です。
2. ローカルスコープ
関数やブロック（{ }）の内側で宣言された変数の範囲です。
その内側だけで有効であり、外側からアクセスしようとするとエラーになります
【本テキストでのプログラム出力について】
本テキストのサンプルプログラムでは、実行結果の確認に主に alert() を使用します。alert() はブラウザにメッセージウィンドウを表示する命令で、プログラムが動いたことを画面上ではっきり確認できるため、学習の初期段階では結果を掴みやすいというメリットがあります。
一方、説明文中のコード例（実際には実行しないコードの断片）では、実務でよく用いられる console.log() で記述している箇所があります。console.log() はブラウザの開発者ツール「Console」タブに出力する命令で、実務では最もよく使われるデバッグ手法です。
実行する・しないにかかわらず、下表を参考に読み進めてください。
3.2.1 スコープの基本を確認するプログラム
２つの変数を宣言し、変数スコープの基本的な挙動について確認してみましょう。
ソースフォルダ：public/ch03
ファイル名：scope.js
➢ prototype.html
第 2 章で作った ch02/prototype.html をコピーし、ch03 にペーストしてください。
その際に、ファイル名を scope.html に変更します。
ファイル内の prototype.html や prototype.js の記述も、scope.html や scope.js に修正します。
➢ scope.js
// scope.js
let x = 10; // これはグローバルスコープにあります
function example() {
let y = 20; // これはローカルスコープにあります
alert("関数の中から x を確認: " + x); // OK: 10
alert("関数の中から y を確認: " + y); // OK: 20
}
example();
// 関数の外からアクセスを試みます
alert("関数の外から x を確認: " + x); // OK: 10
alert(y); // エラー：yはローカルスコープにあるので使えません
実行結果
解説
このプログラムは、変数の有効範囲である「スコープ」の動作を確認することが主目的です。ソースコード内には「関数（function）」が登場しますが、これについては第 4 章で詳しく学習します。現時点では関数の細かな記述方法は気にせず、変数を定義する場所によって「どこまでその変数が届くか」という違いのみに注目してください。
3 行目で、関数の外側で変数 x を let で宣言して 10 を代入しています。（let は 3.4 で詳しく説明します）この値は「グローバルスコープ」となり、プログラムのどこからでもアクセスできるようになります。
3: let x = 10; // これはグローバルスコープにあります
続いて 4 行目で、関数 example の中で変数 y を宣言しています。これは「ローカルスコープ」となり、この関数 example の中でしか使えません。「グローバルスコープ」である変数 x には、example 関数の中からもアクセスが可能です。
4: function example() {
5: let y = 20; // これはローカルスコープにあます
6: alert("関数の中から x を確認: " + x); // OK: 10
7: alert("関数の中から y を確認: " + y); // OK: 20
8: }
13 行目では、関数の外側で変数 x にアクセスをしています。
「グローバルスコープ」である変数 x には、関数の外側であってもアクセスが可能です。
13: alert("関数の外から x を確認: " + x); // OK: 10
14 行目はコメントアウトしています。関数の外側から「ローカルスコープ」である変数 x にアクセスをしています。コメントアウトを外した上で実行しても、見かけ上は正常時と同じく何も表示されません。
しかし Chrome 右上の三点リーダーのメニューから「その他のツール」→「デベロッパーツール」をクリックし Console タブを確認すると、14 行目で変数 y が未定義となり、実行時エラーが発生しているのが確認できます。
