Javascriptのパターン【名前空間パターン】

ウェブ制作技術

おはようございます、樋口です。
Javascriptを書いていて、この書き方でいいのか悪いのか、悩み続けています。

でもどうやらJavascriptにはいろんな場面で、書き方の「パターン」がいくつも存在するようで。
これを理解すれば、Javascriptを書く上での指針ができてくるのではなかろうかと思いました。

参考書などで学んだ、Javascriptのパターンを紹介していきたいと思います。

※この記事のベースとなっている参考書は、オライリーの『JavaScriptパターン – 優れたアプリケーションのための作法 -』です。

Javascript

名前空間パターン

「名前空間パターン」は、ある程度の規模のJavascript構築において、重要な作法です。

名前空間パターンは、

グローバル変数を最小限に抑え、名前の衝突などを防ぐ

という目的のもとに使われます。

プログラミング

何も考えずに変数を「ぽん」と宣言してしまうと、その変数は「グローバルオブジェクト」となります。
「グローバルオブジェクト」は、プログラムのどこからでも上書き可能なので、危険です。
何が危険なのかというと、例えば外部から読み込んできたライブラリや、後からちょっと書き加えたコードと変数名が衝突する可能性が出てきます。
名前が衝突すると、プログラムに予期せぬ挙動が起こりますね。

グローバルにうわついた変数がある状態を、「グローバルスコープが汚染されている」と呼んだりします。

グローバルスコープを汚さず、自分のJavascriptプログラムがアプリケーションに与える影響を最小限に抑えるやり方が、「名前空間パターン」です。

名前空間を使わない書き方

ここで、「名前空間パターン」を使わない書き方を見てみましょう。

こうやって野ざらしの状態で宣言された名前は、簡単にグローバルオブジェクトになります。
Constもhensuもobj1もgetValも、どこからでも変更可能であり、危険です。

名前空間パターンを使った書き方

上記の問題を名前空間パターンを使って解決すると、例えば下記のようなコードになります。
ひとつだけグローバルオブジェクトをつくり、その配下に定義する、という方法です。

こうすることで、APPの中で定義された変数等を、外から変更される心配はありません。

プログラミング

また、最初のグローバルオブジェクトを、コンストラクタにしてもいいかもです。

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

最後に補足です。
上記の例では、APPというグローバルオブジェクトをひとつだけ作りました。
これが、既存の名前と衝突している可能性もあります。

プログラミング

なので、これを宣言するときに、その名前がすでに存在しているかどうか、判定した方がいいです。

これでバッチリです。


以上、「名前空間パターン」の紹介でした。
今後もいろいろなパターンを紹介してまいります。

あなたのビジネスのWeb戦略を、ぜひキタックにおまかせください。

効果を出すためのサイト運営、集客できるウェブ広告

ブログの更新情報をお知らせしています。