中堅SE向け研修/2回目のバックアップ(No.5)

会員管理システム
MVCパターン
DI（Dependency Injection:依存性注入）
Bootstrap3

中堅SE向け研修

会員管理システム †

この回では、AngulerJSを少し本格的に使用して会員管理システムを構築する。

ここで用いるAngulerJSの機能および関連項目は以下のようなものである。

MVCパターン
DI（Dependency Injection:依存性注入）
名前空間の汚染問題
ルーティング
サービス
ディレクティブ
フィルタ
バリデーション

↑

MVCパターン †

多くのデータベースアプリケーションが取り入れているデザインパターンの一つ。

Model
- アプリケーションの現在の状態を保持するデータ。
- 多くの場合、構造を持ったデータ（Cの構造体、C++やJavaのクラス、JavaScriptのオブジェクト）で表現される。
- AngularJSではサービスとして表現される。
View
- ユーザに対してモデルのデータを表示する。
- AngularJSではHTMLテンプレートとして表現される。
Controller
- モデルとビューの関連性を管理する。
- AngularJSではコントローラモジュールとして表現される。

それぞれの単位が責任を分担することで、見通しの良いすっきりとした構造のアプリケーションを構築することができる。

会員管理システムのMVCの構成は以下のようになる。

↑

DI（Dependency Injection:依存性注入） †

依存性注入とは（Wikipediaによると）マーティン・ファウラーによる造語で、あるコンポーネントAの中で別なコンポーネントBを使用する際、コンポーネントBをコンポーネントAの中で内部的に生成するのではなく、外部のインターフェイスなどを使って間接的に導入（これを注入という）することにより、コンポーネント間の依存関係を薄くし、単体テストを実施しやすくする技術である（とのこと）。

と言われても、何を言っているのかよくわからないかもしれないが、私の解釈によると次のようなことである。

会員リストを処理するクラスMemberListの中で、会員の住所から郵便番号を得るZipCodeManagerというクラスを使っているとしよう。

つまり、

var MemberList=function(){
  this.members=[];
  this.prototype.makeList=function(){
    var zcm=new ZipCodeManager();                 // ←ココ
    for(var i=0;i<this.members.length;i++)){
      int z=zcm.getZipCode(this.members[i]);      // 会員this.members[i]の郵便番号を得るはず・・・
      // ...       
    }
  }
}

問題となるのは「←ココ」と示した部分である。

↑

会員管理システム †

MVCパターン †

DI（Dependency Injection:依存性注入） †

Bootstrap3 †