【JavaScript】デザインパターンを知ってみる。モジュール・パターン編

【JavaScript】デザインパターンを知ってみる。モジュール・パターン編

JavaScriptで書くデザインパターンが気になっているので、手始めに一番よく見ているであろうモジュール・パターンについていろいろ調べてみました。

なぜ使うの?

モジュール・パターンは名前の通り、処理を他の処理とぶつからないように安全に切り離し、モジュールの形として提供する考え方です。YUI などの大規模なフレームワークから小さなライブラリにも取り入れられています。以下のようなメリットがあります。

  • グローバル変数を極力減らして、機能をモジュールの形で提供できる。
  • コードの成長に合わせて構造を作れる
  • コードを見通しやすくする
  • 要件に応じて追加、置き換え、削除ができる

シンプルな書き方

Sample というオブジェクトを作って、いろいろ便利な機能をつけていきたい、という場合、下記のような書き方ができます。

var Sample = {
  name: 'sampleくん',
  age: '30',
  init: function() {
    // 何かしらの処理
  },
  sayHello: function() {
    console.log('Hello,' + this.name +'です');
  }
}
	
Sample.sayHello(); // Hello,sampleくんです
上のような書き方は簡単ですが、変数や関数、全ての値を外部から変更できてしまいます。
Sample.name = "yonpuruくん";
Sample.sayHello(); // Hello, yonpuruくんです

そこでモジュール・パターンを使ってモジュールを定義してみます。

即時関数を使ったモジュール・パターン

モジュール・パターンではこのような欠点をなくし、外部からアクセスできないprivateなスコープを使うために、即時関数を使ってオブジェクトを定義します。

参考

var Sample = (function() {
  // ここからprivateなエリア(外からアクセスはできない)
  var _nickName = 'sampleくん';
  var _age = 30;

  function _init() {
    // 何かしらの処理
  }

  function _sayHello() {
    console.log('Hello,' + _nickName +'です');
  }
  
  _init(); // 何かしらの処理(内部)

  return {
    sayHello: _sayHello // 公開する機能のみ返す
  }
})();

Sample._nickName = 'hogehogeくん' // 変更できない
Sample.sayHello(); // Hello, sampleくんです。

上記のように書かれたモジュールは、return で返された部分のみが外からアクセスできるので、privateやpublicの変数を定義することができます。

提供されたモジュールのソースを読む場合、最後のreturn {} 内を参照すれば公開されているAPIがわかりやすいのも利点です。

参考

jQuery などのライブラリでモジュールパターンがどう使われているかも解説されています。

まとめ

  • JavaScriptでは厳密にはprivateな変数は作れないが、モジュールパターンを使うことでprivateとpublicの変数・関数を作ることができる。(情報をカプセル化できる。)
  • グローバルオブジェクトを汚さないように、適当な名前空間を設定してその中に変数や処理を記述する。
  • モジュールを定義する即時関数には引数を与えられるので、グローバルオブジェクトを参照させることができる

簡単にモジュール・パターンについて調べてみました。基本的な書き方は上記のようなものですが、バリエーションもいろいろあるようなので更に調べてみたいです。

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ