作成日: 2023/04/15
0

JavaScriptのグローバル変数

JavaScript は、JavaScript が管理するオブジェクトで構成された大きな環境の中で実行されます。この「環境」は、グローバル変数を含むさまざまなものにアクセスすることができます。グローバル変数は、JavaScript コード内のどこでもアクセスできる変数のことであり、グローバル変数を使用すると、複数のスクリプトファイルで変数を共有できます。

グローバル変数とは

グローバル変数は、アプリケーション全体で使用できる変数のことです。これらの変数は、任意の場所で定義され、任意の場所で変更できます。JavaScript のグローバル変数には、変数、関数、オブジェクト、配列など、すべてのデータ型が含まれます。

グローバル変数の宣言

JavaScript のグローバル変数は、var で宣言することができます。たとえば、以下のようにして、変数名 age に数値 30 を代入してグローバル変数を宣言できます。

var age = 30;

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

ローカル変数とは、関数内で宣言された変数のことであり、関数の外部で定義された変数とは異なります。同様に、グローバル変数は関数の外部で定義されます。

以下は、グローバル変数とローカル変数の例です。

var globalVar = "Global Variable";

function myFunction() {
    var localVar = "Local Variable";

    console.log(globalVar);
    console.log(localVar);
}

myFunction();

この例では、globalVar はグローバル変数であり、myFunction() 内の localVar はローカル変数であり、関数外で宣言された変数 globalVar には、関数内でアクセスできます。しかし、ローカル変数 localVar は、外部からアクセスできません。

グローバル変数の問題点

グローバル変数は、アプリケーション全体で使用できる変数であるため、多数のスクリプトが存在する場合、意図しない影響を与える可能性があります。また、グローバル変数の使用は、デバッグを困難にする可能性があります。

たとえば、コードの異なる場所でグローバル変数が変更されると、その変更を追跡するのが難しくなります。また、グローバル変数は、昔ながらのプログラミングのスタイルであり、チームでコードを書くときに、他の人々がコードを理解することが難しくなる可能性があります。

グローバル変数を回避するには、いくつかの方法があります。

グローバル変数を回避する方法

IIFE(Immediately Invoked Function Expression)

IIFE は、JavaScript の関数の実行方法の 1 つであり、「即時に実行される関数式」を表します。IIFE は、コードの他の部分との間に変数を共有しないように、関数スコープを利用することができます。

以下の例では、グローバル変数を使用する代わりに、IIFE を使用して、変数を関数スコープに入れています。

(function () {
    var localVar = "Local Variable";
    console.log(localVar);
})();

モジュールパターン

モジュールパターンは、複数のスクリプト間でグローバル変数を共有せずに関数やオブジェクトを作成する方法です。モジュールパターンを使用すると、アプリケーション内で変数を公開することができます。

以下の例は、簡単なカウンターモジュールを示しています。

var counterModule = (function () {
    var counter = 0;

    return {
        increment: function () {
            counter++;
            console.log(counter);
        },
        decrement: function () {
            counter--;
            console.log(counter);
        }
    };
})();

counterModule.increment(); // 1
counterModule.increment(); // 2

この例では、counter という変数を関数スコープで定義しています。その後、オブジェクトを返し、increment() と decrement() という 2 つの関数を公開しています。これらの関数を使用して、カウンターの値を増やしたり減らしたりすることができます。

まとめ

JavaScript のグローバル変数は、アプリケーション全体で使用できる変数であり、データ型にかかわらずすべての変数を含みます。グローバル変数は、意図しない影響を与える可能性があり、コードを理解することを困難にすることがあります。

グローバル変数を回避するには、いくつかの方法があります。IIFE は、関数スコープを利用することにより、グローバル変数の使用を回避する方法です。モジュールパターンは、関数やオブジェクトを作成する方法であり、複数のスクリプトで変数を共有せずに関数を公開することができます。これらの方法を使用して、コードの問題を回避し、コードをより理解しやすくすることができます。

参考文献


フルスタックエンジニア。徒然なるままに記事を投稿していきます。日々学習。