$30 off During Our Annual Pro Sale. View Details »

Vue.jsで考えるMVVM

44
March 20, 2019

 Vue.jsで考えるMVVM

44

March 20, 2019
Tweet

More Decks by 44

Other Decks in Technology

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