Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
2014.12.12 Fringe81勉強会 
クライアントサイド 
MVVMアーキテクチャ 
とVue.jsをまとめたよ 
presented by Hosomichi 
copyright Fringe81 Co.,Ltd. - -
copyright Fringe81 Co.,Ltd. - - 
シナリオと狙い 
・クライアントサイドMV**とは 
・クライアントサイドMV**の意義 
・MVVMとは何ぞやを理解する 
・Vue.jsデモを通してMVVMを感じる 
・Vu...
クライアントサイド 
MV**? 
copyright Fringe81 Co.,Ltd. - -
クライアントサイドMV** 
とサーバサイドMVC 
Model 
Controller 
copyright Fringe81 Co.,Ltd. - - 
View 
これをサーバサイドとすると
クライアントサイドMV** 
とサーバサイドMVC 
copyright Fringe81 Co.,Ltd. - - 
** 
View Model 
Controller 
View Model
クライアントサイドMV**の意義 
・Viewの肥大化を防ぐ 
・デザイン(html/css)と 
データ/ロジック(js)を分離 
copyright Fringe81 Co.,Ltd. - -
copyright Fringe81 Co.,Ltd. - - 
MV** 
MVC 
MVW 
MVP 
MVVM
MVC 
MVW 
MVP 
MVVM 
copyright Fringe81 Co.,Ltd. - - 
MV**
MVVM 
(Model-View-ViewModel) 
もともとは.NETの概念でWebとPC両面からの 
UI実装の黄金パターンを模索する過程から生まれたらしい 
copyright Fringe81 Co.,Ltd. - -
クライアントMVVMざっくり 
View 
Model 
Model 
copyright Fringe81 Co.,Ltd. - - 
View 
(DOM) 
Viewの部品を抽象化 
インスタンス保持 
双方向データバインディング 
イン...
例えば銀行振込フォーム 
Viewの部品を抽象化 
paymentForm 
account 
インスタンス保持 
双方向データバインディング 
copyright Fringe81 Co.,Ltd. - - 
1画面にVMは何個あっ 
てもい...
ViewPartsの抽象化ができると 
★この辺がうれしい 
1部品を複数画面に配置することが 
容易であり、 
1部品のロジック変更の複数画面へ 
の反映も容易 
HTML部品と 
プログラミングロジックの 
親密度が高まって自然な感じ❤ 
...
ここまではMVVMのお話でした。 
どうやってVMはMやVの 
インスタンスを管理するの? 
についてはフレームワークそれぞれの 
実装次第に依るのです。 
copyright Fringe81 Co.,Ltd. - -
で、Vue.js 
copyright Fringe81 Co.,Ltd. - -
・MVVMアーキテクチャを採用したクライアントJSフレームワーク 
・angularJS(MVW)に似ているが、機能が絞られシンプルでソリッド 
copyright Fringe81 Co.,Ltd. - -
copyright Fringe81 Co.,Ltd. - - 
簡単なVue.jsデモ 
ポイント 
・双方向データバインディングを感じる(生と比較) 
・モデル側の値を書き換えると? 
・VMがフォームを抽象化したインスタンスとなっているこ...
copyright Fringe81 Co.,Ltd. - - 
簡単なVue.jsデモ 
Viewの変更監視 
Viewの値を変更すると参照して 
いる角要素の内容が同期して書 
きかわる 
モデルの値も同期して書きかわ 
る
copyright Fringe81 Co.,Ltd. - - 
簡単なVue.jsデモ 
Modelの変更監視 
Modelの値を直接書き換えると 
View側も同期して書きかわる 
この辺が 
双方向データバインディング 
の挙動でありMV...
copyright Fringe81 Co.,Ltd. - - 
Model 
今回はコンストラクタにしてみた。 
シングルトンならオブジェクトリテラルでもいいっすね。
シンプルなViewが構成できる(JSコード書かない!) 
vue.js 
マスタッシュ 
ディレクティブ 
MとVMロード 
copyright Fringe81 Co.,Ltd. - - 
View
ビューのインスタンス保持 
モデルのインスタンス保持 
バインドデータ変更時イベント 
copyright Fringe81 Co.,Ltd. - - 
ViewModel
copyright Fringe81 Co.,Ltd. - - 
構成について 
・モデルのモジュールをクラスファイルを作って設置した 
(公式デモなどを見る限りモデルは値となっており、オブジェクト(構造体)にはなっていない) 
・ビューモデル...
以上でっす! 
「JSおくのほそ道」 
もよろしくです(PR広告) 
http://qiita.com/setzz 
copyright Fringe81 Co.,Ltd. - -
Upcoming SlideShare
Loading in …5
×

クライアントサイドMVVMアーキテクチャとVue.jsをまとめたよ

3,978 views

Published on

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

Published in: Engineering
  • Be the first to comment

クライアントサイドMVVMアーキテクチャとVue.jsをまとめたよ

  1. 1. 2014.12.12 Fringe81勉強会 クライアントサイド MVVMアーキテクチャ とVue.jsをまとめたよ presented by Hosomichi copyright Fringe81 Co.,Ltd. - -
  2. 2. copyright Fringe81 Co.,Ltd. - - シナリオと狙い ・クライアントサイドMV**とは ・クライアントサイドMV**の意義 ・MVVMとは何ぞやを理解する ・Vue.jsデモを通してMVVMを感じる ・Vue.js開発時にどこに何を書くか、 どのような命名にすべきかがイメージできる
  3. 3. クライアントサイド MV**? copyright Fringe81 Co.,Ltd. - -
  4. 4. クライアントサイドMV** とサーバサイドMVC Model Controller copyright Fringe81 Co.,Ltd. - - View これをサーバサイドとすると
  5. 5. クライアントサイドMV** とサーバサイドMVC copyright Fringe81 Co.,Ltd. - - ** View Model Controller View Model
  6. 6. クライアントサイドMV**の意義 ・Viewの肥大化を防ぐ ・デザイン(html/css)と データ/ロジック(js)を分離 copyright Fringe81 Co.,Ltd. - -
  7. 7. copyright Fringe81 Co.,Ltd. - - MV** MVC MVW MVP MVVM
  8. 8. MVC MVW MVP MVVM copyright Fringe81 Co.,Ltd. - - MV**
  9. 9. MVVM (Model-View-ViewModel) もともとは.NETの概念でWebとPC両面からの UI実装の黄金パターンを模索する過程から生まれたらしい copyright Fringe81 Co.,Ltd. - -
  10. 10. クライアントMVVMざっくり View Model Model copyright Fringe81 Co.,Ltd. - - View (DOM) Viewの部品を抽象化 インスタンス保持 双方向データバインディング インスタンス保持 双方向データバインディング
  11. 11. 例えば銀行振込フォーム Viewの部品を抽象化 paymentForm account インスタンス保持 双方向データバインディング copyright Fringe81 Co.,Ltd. - - 1画面にVMは何個あっ てもいい インスタンス保持 双方向データバインディング payment.html branch bank 1VMは何モデル保持し てもいい
  12. 12. ViewPartsの抽象化ができると ★この辺がうれしい 1部品を複数画面に配置することが 容易であり、 1部品のロジック変更の複数画面へ の反映も容易 HTML部品と プログラミングロジックの 親密度が高まって自然な感じ❤ copyright Fringe81 Co.,Ltd. - - 銀行振込フォーム 直接 【Mapping】 #payment_form 振込画面 残高照会 からの 振込画面
  13. 13. ここまではMVVMのお話でした。 どうやってVMはMやVの インスタンスを管理するの? についてはフレームワークそれぞれの 実装次第に依るのです。 copyright Fringe81 Co.,Ltd. - -
  14. 14. で、Vue.js copyright Fringe81 Co.,Ltd. - -
  15. 15. ・MVVMアーキテクチャを採用したクライアントJSフレームワーク ・angularJS(MVW)に似ているが、機能が絞られシンプルでソリッド copyright Fringe81 Co.,Ltd. - -
  16. 16. copyright Fringe81 Co.,Ltd. - - 簡単なVue.jsデモ ポイント ・双方向データバインディングを感じる(生と比較) ・モデル側の値を書き換えると? ・VMがフォームを抽象化したインスタンスとなっていること ・ビューとモデルの疎結合っぷり(ロジック配置の自然さ) ・jQueryがグジャグジャ書いてあったりしてなくて整然としている
  17. 17. copyright Fringe81 Co.,Ltd. - - 簡単なVue.jsデモ Viewの変更監視 Viewの値を変更すると参照して いる角要素の内容が同期して書 きかわる モデルの値も同期して書きかわ る
  18. 18. copyright Fringe81 Co.,Ltd. - - 簡単なVue.jsデモ Modelの変更監視 Modelの値を直接書き換えると View側も同期して書きかわる この辺が 双方向データバインディング の挙動でありMV**が強みとし ている部分の一つですね
  19. 19. copyright Fringe81 Co.,Ltd. - - Model 今回はコンストラクタにしてみた。 シングルトンならオブジェクトリテラルでもいいっすね。
  20. 20. シンプルなViewが構成できる(JSコード書かない!) vue.js マスタッシュ ディレクティブ MとVMロード copyright Fringe81 Co.,Ltd. - - View
  21. 21. ビューのインスタンス保持 モデルのインスタンス保持 バインドデータ変更時イベント copyright Fringe81 Co.,Ltd. - - ViewModel
  22. 22. copyright Fringe81 Co.,Ltd. - - 構成について ・モデルのモジュールをクラスファイルを作って設置した (公式デモなどを見る限りモデルは値となっており、オブジェクト(構造体)にはなっていない) ・ビューモデルもクラスファイルを作って設置した ・ビューは尋常じゃなくすっきり ・デザイナーはディレクティブだけでも覚えてくれると連携しやすい
  23. 23. 以上でっす! 「JSおくのほそ道」 もよろしくです(PR広告) http://qiita.com/setzz copyright Fringe81 Co.,Ltd. - -

×