会社内の勉強会で発表した内容です

1. 2014.12.12 Fringe81勉強会
クライアントサイド
MVVMアーキテクチャ
とVue.jsをまとめたよ
presented by Hosomichi
copyright Fringe81 Co.,Ltd. － －

2. copyright Fringe81 Co.,Ltd. － －
シナリオと狙い
・クライアントサイドMV**とは
・クライアントサイドMV**の意義
・MVVMとは何ぞやを理解する
・Vue.jsデモを通してMVVMを感じる
・Vue.js開発時にどこに何を書くか、
どのような命名にすべきかがイメージできる

3. クライアントサイド
MV**?
copyright Fringe81 Co.,Ltd. － －

4. クライアントサイドMV**
とサーバサイドMVC
Model
Controller
copyright Fringe81 Co.,Ltd. － －
View
これをサーバサイドとすると

5. クライアントサイドMV**
とサーバサイドMVC
copyright Fringe81 Co.,Ltd. － －
**
View Model
Controller
View Model

6. クライアントサイドMV**の意義
・Viewの肥大化を防ぐ
・デザイン(html/css)と
データ/ロジック(js)を分離
copyright Fringe81 Co.,Ltd. － －

7. copyright Fringe81 Co.,Ltd. － －
MV**
MVC
MVW
MVP
MVVM

8. MVC
MVW
MVP
MVVM
copyright Fringe81 Co.,Ltd. － －
MV**

9. MVVM
(Model-View-ViewModel)
もともとは.NETの概念でWebとPC両面からの
UI実装の黄金パターンを模索する過程から生まれたらしい
copyright Fringe81 Co.,Ltd. － －

10. クライアントMVVMざっくり
View
Model
Model
copyright Fringe81 Co.,Ltd. － －
View
(DOM)
Viewの部品を抽象化
インスタンス保持
双方向データバインディング
インスタンス保持
双方向データバインディング

11. 例えば銀行振込フォーム
Viewの部品を抽象化
paymentForm
account
インスタンス保持
双方向データバインディング
copyright Fringe81 Co.,Ltd. － －
１画面にVMは何個あっ
てもいい
インスタンス保持
双方向データバインディング
payment.html
branch bank
１VMは何モデル保持し
てもいい

12. ViewPartsの抽象化ができると
★この辺がうれしい
１部品を複数画面に配置することが
容易であり、
１部品のロジック変更の複数画面へ
の反映も容易
HTML部品と
プログラミングロジックの
親密度が高まって自然な感じ❤
copyright Fringe81 Co.,Ltd. － －
銀行振込フォーム
直接
【Mapping】
#payment_form
振込画面
残高照会
からの
振込画面

13. ここまではMVVMのお話でした。
どうやってVMはMやVの
インスタンスを管理するの？
についてはフレームワークそれぞれの
実装次第に依るのです。
copyright Fringe81 Co.,Ltd. － －

14. で、Vue.js
copyright Fringe81 Co.,Ltd. － －

15. ・MVVMアーキテクチャを採用したクライアントJSフレームワーク
・angularJS(MVW)に似ているが、機能が絞られシンプルでソリッド
copyright Fringe81 Co.,Ltd. － －

16. copyright Fringe81 Co.,Ltd. － －
簡単なVue.jsデモ
ポイント
・双方向データバインディングを感じる(生と比較)
・モデル側の値を書き換えると？
・VMがフォームを抽象化したインスタンスとなっていること
・ビューとモデルの疎結合っぷり(ロジック配置の自然さ)
・jQueryがグジャグジャ書いてあったりしてなくて整然としている

17. copyright Fringe81 Co.,Ltd. － －
簡単なVue.jsデモ
Viewの変更監視
Viewの値を変更すると参照して
いる角要素の内容が同期して書
きかわる
モデルの値も同期して書きかわ
る

18. copyright Fringe81 Co.,Ltd. － －
簡単なVue.jsデモ
Modelの変更監視
Modelの値を直接書き換えると
View側も同期して書きかわる
この辺が
双方向データバインディング
の挙動でありMV**が強みとし
ている部分の一つですね

19. copyright Fringe81 Co.,Ltd. － －
Model
今回はコンストラクタにしてみた。
シングルトンならオブジェクトリテラルでもいいっすね。

20. シンプルなViewが構成できる(JSコード書かない！)
vue.js
マスタッシュ
ディレクティブ
MとVMロード
copyright Fringe81 Co.,Ltd. － －
View

21. ビューのインスタンス保持
モデルのインスタンス保持
バインドデータ変更時イベント
copyright Fringe81 Co.,Ltd. － －
ViewModel

22. copyright Fringe81 Co.,Ltd. － －
構成について
・モデルのモジュールをクラスファイルを作って設置した
(公式デモなどを見る限りモデルは値となっており、オブジェクト(構造体)にはなっていない)
・ビューモデルもクラスファイルを作って設置した
・ビューは尋常じゃなくすっきり
・デザイナーはディレクティブだけでも覚えてくれると連携しやすい

23. 以上でっす！
「JSおくのほそ道」
もよろしくです(PR広告)
http://qiita.com/setzz
copyright Fringe81 Co.,Ltd. － －