JavaScript_名前空間

JavaScriptの名前空間について

「グローバルスコープが汚染されている」とは

JavaScriptでは、何の対策もなく変数を宣言すると、その変数は「グローバルオブジェクト」となります。

グローバルオブジェクトは、プログラムのどこからでもアクセス可能なので、外部ライブラリや他ファイルと変数名が衝突して予期せぬ挙動が起こる可能性があります。

グローバルである必要がないにもかかわらず、グローバルスコープの変数がある状態を、「グローバルスコープが汚染されている」と呼びます。

JavaScriptには名前空間の仕組みが存在しない

JavaScriptでは、リリースされてからES2015(ES6)まで、名前空間に相当する機能は正式に提供されていません。

複数人で開発する環境においては、名前空間のような仕組みを自分たちで定義する必要があります。

グローバルオブジェクトによる名前空間

2015年くらいからは名前空間の仕組みとして、唯一のアプリケーションのグローバルオブジェクトを作成することが主流です。

グローバルオブジェクトを作成する。

グローバルオブジェクトを作成して、メンバとして変数や関数を定義していきます。

グローバル変数は大文字で記載することが多いので、グローバルオブジェクトも大文字にすると分かりやすいです。


// グローバルオブジェクトを作る
var APP = {};

// 変数の定義
APP.name = "user01";
APP.email = "user01@bbserver.com";

// 関数の定義
APP.func1 = function(){
  console.log("func1 is called.")

  // APP変数を呼び出すには以下のようにアクセスする。
  console.log(this.name) // user01
  console.log(APP.name)  // user01
};

APP.func2 = function(){
  console.log("func2 is called.")

  // APP変数を呼び出すには以下のようにアクセスする。
  console.log(this.email) // user01@capm-network.com"
  console.log(APP.email)  // user01@capm-network.com"
};

HTMLから呼び出す際には、以下のようにグローバルオブジェクトも付けます。


<input type="button" value="click" onclick="APP.func1()"/>

名前空間が存在しているかどうかの判定

定義したグローバルオブジェクトが、既に定義済みであり、名前衝突している可能性があります。

その場合には、名前がすでに存在しているか判定するロジックを組み込みます。


if(typeof APP === "undefined"){
	var APP = {};
}

さらに、上記をより短くした書き方もあります。


var APP = APP || {};