【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の変数・関数を作ることができる。（情報をカプセル化できる。）
- グローバルオブジェクトを汚さないように、適当な名前空間を設定してその中に変数や処理を記述する。
- モジュールを定義する即時関数には引数を与えられるので、グローバルオブジェクトを参照させることができる
簡単にモジュール・パターンについて調べてみました。基本的な書き方は上記のようなものですが、バリエーションもいろいろあるようなので更に調べてみたいです。
