鶏口牛後な日々

魔法使い(なんでも作れるエンジニア)を目指してます。ブログは発散中

javascriptの名前空間、超初心者向け導入

javascriptでは、初心者に少し毛が生えたくらいで、グローバル変数の乱用をしてはいけない、ということを学ぶようです。

私の場合、まだ毛根が生成され出したかもしれないが表層には何も変わりないくらいのレベルなのですが、 いくつかfunctionなどを独自で作って、そのどれでも使いたい変数を設定するのは、どうするのか? を調べていて上記のようなことが比較的よく言われることであると知りました。

javascriptでは、基本的に変数を宣言する場合、

var 変数名;

を指定します。

グローバル変数(関数に依らず、プログラム全体で使える変数)は、この var をつけないで宣言するとできるようです。 ただ、javascriptはライブラリなどを多用する言語でもありますし、これらですでに使われている変数などを宣言してしまうと、挙動がおかしくなることがあるようです。

ということで、じゃあどうすればいいのよ、というのを調べましたところ、自分のプログラム全体を無名関数で括る ことで、その中でのみ使える変数とさせる、という手もあるようですが、 名前空間 というのを自分のプログラム専用に立てて、その中でであれば自由にグローバル変数ぽく使える変数を作成できるということがわかりました。

名前空間について、書かれているサイトなどは、得てして中・上級者向けのが多く、またjavascriptの公式は、大した説明が書かれていないということで、ちょっと苦戦しましたが、 基本的に、 グローバル変数を乱用しておかしなことにならないようにする という目的を達成するためだけであれば、そこまで難しい知識はなくても大丈夫そうでした。

基本的な作り方

var APPLICATION_NAME = {};

または、

var APPLICATION_NAME = APPLICATION_ NAME ||  {};

または、つけた名前が、すでに他で定義されていないかどうかを確かめるちゃんとした書き方で、

if ( typeof APPLICATION_NAME == 'undefined' ) {
    var APPLICATION_NAME = {};
}

みたいに書くのが良さそうでした。 この時、(おそらく中上級者には当たり前だから、初心者しかこういうことは書かないんだろうなと思うのですが)変数名は大文字でも小文字でもOKでした。 かつ、アンダースコアでもダッシュ(-)でも、普通に使えました。

この {} という囲みは、おそらくオブジェクトとして扱うという意味だと思います(初心者なので、詳しくはそれぞれでみなさんご確認ください)

名前空間内に自分がプログラムで使いたいグローバル変数を宣言する

さて、名前空間を作ったら、次は自分の使いたい変数を作ります。

var APPLICATION_NAME.hoge = {};

これでおkです。 この中に連想配列を入れたい場合は、

var APPLICATION_NAME.hoge = { key1:1, key2:2, key3:3}; 

といれればいいですし、ただ値だけを持たせる場合は、

var APPLICATION_NAME.hoge = 1;

などと入れればOKでした。

知っている人にとってはあまりにも簡単なことなのかと思うのですが、如何せん初めてやる場合、実際に作ってみて、 色々なすでに作ってある関数の中でこの変数を呼び出してみて、 console.log で中身を確認できたときはホッとしました。 (初心者あるある)

以上。