Vue.jsで考えるMVVM

Transcript

1. Vue.jsで考えるMVVM v-kansai Vue.js/Nuxt.js meetup #4
2. きれいなコード書いてますか？
3. 皆さん設計してますか？
4. ・・・
5. アーキテクチャを学んでみましょう！
6. MVVMとは？ GUIアプリケーションを役割毎に M(Model) V(View) VM(ViewModel) の三種類に分割して設計・実装する手法(アーキテクチャ)
7. M(Model)・V(View)・VM(ViewModel) ViewModel View Model
8. M(Model)・V(View)・VM(ViewModel) ViewModel View Model 描画とユーザーの入力を 担当
9. M(Model)・V(View)・VM(ViewModel) ViewModel View Model 状態管理と処理フローの 実装を担当
10. M(Model)・V(View)・VM(ViewModel) ViewModel View Model アプリケーションが扱う領域の データと手続きを表現する
11. Vue.jsでMVVM
12. Vue.jsでMVVM View ViewModel
13. あれ？Modelは？
14. ModelはViewやViewModelの中に書かれる事が多 い ViewModel Model View Model
15. ModelはViewやViewModelの中に書かれる事が多 い ViewModel Model View Model ファットなView・ViewModel
16. ショッピングカート • カートに商品を追加出来る • カート内の商品を表示 ◦ 商品毎に消費税込みを計算して表示 • 送料は300円 ◦ 3000円以上で送料がタダ • カート内の商品の合計金額を計算して表示 ◦ 合計金額の税込みを計算して表示
17. ノーMVVM
18. ノーMVVM 消費税の計算を Viewでやっちゃってる
19. ノーMVVM クラスとは？ 型情報がない
20. ってことで実際に分割してみる
21. ステップ①
22. 扱うデータをクラス化する • カートに商品を追加出来る • カート内の商品を表示 ◦ 商品毎に消費税込みを計算して表示 • 送料は300円 ◦ 3000円以上で送料がタダ • カート内の商品の合計金額を計算して表示 ◦ 合計金額の税込みを計算して表示
23. 扱うデータをクラス化する
24. ステップ②
25. クラスに手続き（ロジック）を追加していく • カートに商品を追加出来る • カート内の商品を表示 ◦ 商品毎に消費税込みを計算して表示 • 送料は300円 ◦ 3000円以上で送料がタダ • カート内の商品の合計金額を計算して表示 ◦ 合計金額の税込みを計算して表示
26. クラスに手続き（ロジック）を追加していく
27. 分割完了！！！ ViewModel View Model
28. モデルを分割したことでViewが…？ 消費税の計算（ロジック）が なくなり描画に集中できる
29. モデルを分割したことでViewModelが…？ 処理フローの表現に集中
30. まとめ • Vue.jsでは、ファットなView・ViewModelになりがち • アプリケーションで扱うデータをクラスにする • 手続き（ロジック）をクラスのメソッドにする • Model層を作ることでView・ViewModelそれぞれの役割に集中出来る！ • Model層にデータとロジックがあるので単体テストできる！
31. みんなも ちゃんと分割しよう！！！
32. https://github.com/44x1carbon/vue-mvvm