難しいオラクル先輩を小学生にでもわかるようにするために
今回はモジュールパターンについて説明するよ
まずモジュールパターンって何のためにあるんだろう？
モジュールパターンはコードを綺麗にして組織化するためにあるんだ！
コードを綺麗にってどういうこと？組織化って何？
こんな感じに小学生もなると思うんだ
そこでモジュールパターンを例えるなら
モジュールパターンは引き出しをつくる！
モジュールパターンはコードの集まりを引き出しの中にいれて
そこに何が入ってるかを書いたシールをつけているんだ
では実際にモジュールが何なのかを説明するよ
モジュールの中にあるものは？
- 外から見えないもの（private）
- 外から見えるもの（public）
この２つだけ！まだよくわからないかな？
じゃあこれを引き出しで例えると
外から見えないものは、つまり引き出しの中身！
中身はしまってあると見えないよね！
外から見えるものは引き出しの取っ手！
要するに外から見えていて引き出しを開けたりするのに使うもの！
なんでこんな風に外から見えるものと見えないものが必要なのかな？
見えないものは勝手に外から見られたり、中身を変えられないため！
自分の日記がある引き出しが勝手に他の人がみたり
日記の内容を変えられるのはいやだよね！
じゃあ見えるものは何に使うんだろう？
取っ手ってところでわかるかな？
実際に引き出しの中身を見たり、中身を変えるには取っ手を使って開けないとね！
そうしないと自分も変えられなくなってしまう！
だから見えるものも必要なんだ！
じゃあここで急にコードを見てみよう！！
やっぱり実際にみてみないと意味がないからね
var testModule = (function() {
var counter = 0;
return {
incrementCounter : function() {
return ++counter;
},
resetCounter : function() {
console.log(“reset” + counter);
counter = 0;
}
};
})();
//使用例
testModule.incrementCounter();
//出力:1
testModule.resetCounter();
最初のtestModuleは引き出しの名前
何が入ってるかの名前をここにつけているよ
そしてcounterが引き出しの中身
ここは外からは見えないし、さわれなくなっているよ！
returnの｛｝の中が引き出しの取っ手
これを使ってcouterを１増やしたり、counterをリセットしているんだ！
つまりモジュールパターンの覚え方は簡単３ステップ！
- 名前をつけたfunctionをつくる！
- 外から見えないものは中にそのまま書く！
- 外から見えるものはreturnの中に書く！
こう聞くと簡単に思えない？
こういうのは実際にやってみないとわからないもの！
手なわけで演習のコーナー！！
今回は名刺のモジュールをつくってみよう！！
まず名刺に必要なのは
- 名前
- 会社
- 電話番号
の３つにするよ！
次にやりたいことは
- 名刺をつくる
- 上の３つを表示する
だよ！
index.htmlのデザインは簡単に下のコードを用意したから
実際にjavascriptで書いてみよう！
ヒントがほしい時はコメントでお願いします！
それができたら君もモジュールパターンマスター！
次回はオブザーバーパターンについてやろうと思っているよ！
それではまたね！
ついでにこんなアプリも作ってます
https://play.google.com/store/apps/details?id=jp.recruit.hps.movie.client
index.html
名刺メーカー
名刺づくり
名刺を作ろう
名前を入力してください
会社を入力してください
電話番号を入力してください
