JavaScriptのトップレベルとは？

JavaScriptの「トップレベル」とは、関数やブロック({}で囲まれた範囲)で囲まれていない範囲のことを指します。具体的には、以下のような場所が該当します。

JavaScriptファイル直下のコード
HTMLファイル内の<script>要素直下のコード

トップレベルとグローバルスコープ

トップレベルで宣言された変数や関数は、特別なスコープである「グローバルスコープ」に属します。グローバルスコープの特徴は以下の通りです。

特徴	説明
どこからでもアクセス可能	コード内のどこからでも、グローバルスコープの変数や関数を参照・変更できます。
異なるスクプト間でも共有される	複数の<script>要素が存在する場合でも、グローバルスコープは共有されます。つまり、ある<script>要素で宣言されたグローバル変数は、別の<script>要素からも参照・変更できます。

このグローバルスコープの存在は、コードの可読性や保守性を低下させる可能性があります。なぜなら、グローバル変数はコードのどこからでも変更される可能性があり、予期しないバグを引き起こす可能性があるからです。

例

以下は、トップレベルで変数と関数を定義する例です。

<script>
  // トップレベルで変数を宣言
  var globalVariable = "これはグローバル変数です";

  // トップレベルで関数を定義
  function globalFunction() {
    console.log("これはグローバル関数です");
  }

  // グローバル変数と関数の利用
  console.log(globalVariable); // 出力: これはグローバル変数です
  globalFunction(); // 出力: これはグローバル関数です
</script>

この例では、globalVariableとglobalFunctionはどちらもトップレベルで宣言されているため、グローバルスコープに属します。そのため、同じ<script>要素内のどこからでもアクセスできます。

注意点

グローバルスコープは便利ですが、使いすぎるとコードが複雑になり、予期しない問題が発生する可能性があります。そのため、可能な限りグローバル変数の使用を避け、関数やブロック内で変数を宣言することが推奨されます。

参考資料

MDN Web Docs: 変数のスコープ

JavaScriptのトップレベルとは？

トップレベルとグローバルスコープ

例

注意点

参考資料

関連QA

Q1: トップレベルで宣言された変数は、常にグローバルスコープに属しますか？

Q2: グローバル変数を使用しない方が良いのはなぜですか？

Q3: グローバル変数の代わりに何を使用すれば良いですか？