小学生でもわかるデザインパターンその2〜javascript編〜

 

JavaScriptデザインパターン

JavaScriptデザインパターン

 

 

難しいオラクル先輩を小学生にでもわかるようにするために

今回はモジュールパターンについて説明するよ

まずモジュールパターンって何のためにあるんだろう?

モジュールパターンはコードを綺麗にして組織化するためにあるんだ!

 

コードを綺麗にってどういうこと?組織化って何?

こんな感じに小学生もなると思うんだ

 

そこでモジュールパターンを例えるなら

モジュールパターンは引き出しをつくる!

f:id:mrt168:20140423031918p:plain

 

モジュールパターンはコードの集まりを引き出しの中にいれて

そこに何が入ってるかを書いたシールをつけているんだ

 

では実際にモジュールが何なのかを説明するよ

モジュールの中にあるものは?

  • 外から見えないもの(private)
  • 外から見えるもの(public)

この2つだけ!まだよくわからないかな?

 

じゃあこれを引き出しで例えると

外から見えないものは、つまり引き出しの中身!

中身はしまってあると見えないよね!

 

外から見えるものは引き出しの取っ手!

要するに外から見えていて引き出しを開けたりするのに使うもの!

 

なんでこんな風に外から見えるものと見えないものが必要なのかな?

見えないものは勝手に外から見られたり、中身を変えられないため!

自分の日記がある引き出しが勝手に他の人がみたり

日記の内容を変えられるのはいやだよね!

 

じゃあ見えるものは何に使うんだろう?

取っ手ってところでわかるかな?

実際に引き出しの中身を見たり、中身を変えるには取っ手を使って開けないとね

そうしないと自分も変えられなくなってしまう!

だから見えるものも必要なんだ!

 

じゃあここで急にコードを見てみよう!!

やっぱり実際にみてみないと意味がないからね

 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を1増やしたり、counterをリセットしているんだ!

 

つまりモジュールパターンの覚え方は簡単3ステップ!

  1. 名前をつけたfunctionをつくる!
  2. 外から見えないものは中にそのまま書く!
  3. 外から見えるものはreturnの中に書く!

こう聞くと簡単に思えない?

こういうのは実際にやってみないとわからないもの!

 

手なわけで演習のコーナー!!

今回は名刺のモジュールをつくってみよう!!

まず名刺に必要なのは

  1. 名前
  2. 会社
  3. 電話番号

の3つにするよ!

次にやりたいことは

  1. 名刺をつくる
  2. 上の3つを表示する

だよ!

index.htmlのデザインは簡単に下のコードを用意したから

実際にjavascriptで書いてみよう!

ヒントがほしい時はコメントでお願いします!

 

それができたら君もモジュールパターンマスター!

次回はオブザーバーパターンについてやろうと思っているよ!

それではまたね!

 

ついでにこんなアプリも作ってます

https://play.google.com/store/apps/details?id=jp.recruit.hps.movie.client

 

index.html

名刺メーカー
	

名刺づくり

名刺を作ろう

名前を入力してください

会社を入力してください

電話番号を入力してください