Vue.jsで考えるMVVM - Speaker Deck

Slide 1

Slide 1 text

Vue.jsで考えるMVVM v-kansai Vue.js/Nuxt.js meetup #4

Slide 2

Slide 2 text

きれいなコード書いてますか？

Slide 3

Slide 3 text

皆さん設計してますか？

Slide 4

Slide 4 text

・・・

Slide 5

Slide 5 text

アーキテクチャを学んでみましょう！

Slide 6

Slide 6 text

MVVMとは？ GUIアプリケーションを役割毎に M(Model) V(View) VM(ViewModel) の三種類に分割して設計・実装する手法(アーキテクチャ)

Slide 7

Slide 7 text

M(Model)・V(View)・VM(ViewModel) ViewModel View Model

Slide 8

Slide 8 text

M(Model)・V(View)・VM(ViewModel) ViewModel View Model 描画とユーザーの入力を担当

Slide 9

Slide 9 text

M(Model)・V(View)・VM(ViewModel) ViewModel View Model 状態管理と処理フローの実装を担当

Slide 10

Slide 10 text

M(Model)・V(View)・VM(ViewModel) ViewModel View Model アプリケーションが扱う領域のデータと手続きを表現する

Slide 11

Slide 11 text

Vue.jsでMVVM

Slide 12

Slide 12 text

Vue.jsでMVVM View ViewModel

Slide 13

Slide 13 text

あれ？Modelは？

Slide 14

Slide 14 text

ModelはViewやViewModelの中に書かれる事が多い ViewModel Model View Model

Slide 15

Slide 15 text

ModelはViewやViewModelの中に書かれる事が多い ViewModel Model View Model ファットなView・ViewModel

Slide 16

Slide 16 text

ショッピングカート ● カートに商品を追加出来る ● カート内の商品を表示 ○ 商品毎に消費税込みを計算して表示 ● 送料は300円 ○ 3000円以上で送料がタダ ● カート内の商品の合計金額を計算して表示 ○ 合計金額の税込みを計算して表示

Slide 17

Slide 17 text

ノーMVVM

Slide 18

Slide 18 text

ノーMVVM 消費税の計算を Viewでやっちゃってる

Slide 19

Slide 19 text

ノーMVVM クラスとは？型情報がない

Slide 20

Slide 20 text

ってことで実際に分割してみる

Slide 21

Slide 21 text

ステップ①

Slide 22

Slide 22 text

扱うデータをクラス化する ● カートに商品を追加出来る ● カート内の商品を表示 ○ 商品毎に消費税込みを計算して表示 ● 送料は300円 ○ 3000円以上で送料がタダ ● カート内の商品の合計金額を計算して表示 ○ 合計金額の税込みを計算して表示

Slide 23

Slide 23 text

扱うデータをクラス化する

Slide 24

Slide 24 text

ステップ②

Slide 25

Slide 25 text

クラスに手続き（ロジック）を追加していく ● カートに商品を追加出来る ● カート内の商品を表示 ○ 商品毎に消費税込みを計算して表示 ● 送料は300円 ○ 3000円以上で送料がタダ ● カート内の商品の合計金額を計算して表示 ○ 合計金額の税込みを計算して表示

Slide 26

Slide 26 text

クラスに手続き（ロジック）を追加していく

Slide 27

Slide 27 text

分割完了！！！ ViewModel View Model

Slide 28

Slide 28 text

モデルを分割したことでViewが…？消費税の計算（ロジック）がなくなり描画に集中できる

Slide 29

Slide 29 text

モデルを分割したことでViewModelが…？処理フローの表現に集中

Slide 30

Slide 30 text

まとめ ● Vue.jsでは、ファットなView・ViewModelになりがち ● アプリケーションで扱うデータをクラスにする ● 手続き（ロジック）をクラスのメソッドにする ● Model層を作ることでView・ViewModelそれぞれの役割に集中出来る！ ● Model層にデータとロジックがあるので単体テストできる！