【JavaScript入門】グローバル変数とローカル変数

このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

グローバル変数とローカル変数

　JavaScript の変数は、宣言される場所（スコープ）によって「グローバル変数」か「ローカル変数」かに分かれます。プログラム全体に渡ってどこからでも利用できるのがグローバル変数、特定のスコープ（ブロックや関数）内だけで有効なのがローカル変数です。一見するとグローバル変数は便利そうに見えますが、誤って上書きされやすく、バグの原因になりやすいので、なるべくローカル変数を使うのが望ましいです。

１．グローバル変数とローカル変数の違い

区分	説明
グローバル変数	スコープの外側（トップレベル）で宣言され、全域で利用できる変数。Web ブラウザ環境では `window` オブジェクトのプロパティ。
ローカル変数	ブロックや関数の中で宣言され、その中だけで有効な変数。スコープが限定されるため、バグを防ぎやすい。

２．グローバルオブジェクト (`window`)

　Webブラウザで JavaScript を実行する際、最も外側に window と呼ばれるグローバルオブジェクトがあります。グローバル変数は自動的に window のプロパティとなるため、window.fruit と書くか、fruit と省略するかで同じ値にアクセスできます。

３．サンプルHTMLとJavaScript

　ファイル名を「localGlobalExample.html」として、以下のような例を用意しました。ブラウザで開き、コンソール（開発者ツール）を確認してみてください。

【localGlobalExample.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>localGlobalExample.html</title>
</head>
<body>
  <h1>グローバル変数とローカル変数のサンプル</h1>
  <p>コンソールを開いて結果を確認してください。</p>

  <script>
    // 1. グローバル変数の宣言
    // window オブジェクトに直接代入（この書き方でなくても良いですが、わかりやすくするため）
    window.fruit = 'ミカン';
    console.log('グローバルで宣言された fruit:', fruit); // 省略形
    console.log('グローバルで宣言された window.fruit:', window.fruit);

    // 2. ローカル変数の例
    if (true) {
      let dessert = 'プリン'; // ローカル変数（このブロック内のみ有効）
      console.log('ローカルスコープ dessert:', dessert);

      // ブロックの内部でグローバル変数を上書きすることもできてしまう
      // ※ しかし推奨はされません
      window.fruit = 'リンゴ';
      console.log('ブロック内で書き換えた fruit:', fruit);
    }

    // 3. ローカル変数のスコープ外でアクセスするとエラー
    // console.log('スコープ外の dessert:', dessert); // ← ここはエラーになるのでコメントアウト

    // 4. 結局ブロックを抜けた後でも fruit は書き換えられたまま
    console.log('最終的なグローバル fruit:', fruit);
  </script>
</body>
</html>

実行結果

デバッグコンソールの出力

グローバルで宣言された fruit: ミカン
グローバルで宣言された window.fruit: ミカン
ローカルスコープ dessert: プリン
ブロック内で書き換えた fruit: リンゴ
最終的なグローバル fruit: リンゴ

dessert は if ブロック内で宣言されているため、ブロック外では参照できません（エラーになる）。
fruit はグローバル変数なので、どこからでもアクセス可能です。そのため、ブロック内のコードで書き換えると、ブロックを抜けた後も上書きされたままの状態となります。

４．グローバル変数を避ける理由

誤って上書きされやすい：どこからでもアクセス可能なため、意図せず上書きしてしまう危険がある。
可読性の低下：変数がどのスコープに属するか一目では分かりにくい。
衝突のリスク：他のスクリプトや外部ライブラリと同名のグローバル変数があると、想定外の挙動を引き起こす可能性が高い。

まとめ

スコープの外（トップレベル）で宣言した変数はグローバル変数となり、全ての場所から参照できます。
ブロックや関数の内部で宣言した変数はローカル変数としてスコープが限定され、バグが起きにくくなります。
グローバル変数はできるだけ使わず、ローカル変数でスコープを明確に管理する方が安全です。

　大規模なプログラムや他人が書いたコードと組み合わせる場合、グローバル変数は特にリスクを高めます。狭いスコープで必要な変数を宣言する癖をつけ、予期せぬバグを減らす工夫をしましょう。

【JavaScript入門】グローバル変数とローカル変数