Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue.jsで考えるMVVM
Search
44
March 20, 2019
Technology
0
2.2k
Vue.jsで考えるMVVM
44
March 20, 2019
Tweet
Share
More Decks by 44
See All by 44
Kotlin MultiPlatform Projectのロマンを語る
44x1carbon
0
500
たかが命名、されど命名
44x1carbon
2
1.1k
React(Kotlin)でToDoアプリを作ってみた
44x1carbon
2
1.8k
Multiplatform Kotlin
44x1carbon
0
190
Other Decks in Technology
See All in Technology
認知戦の理解と、市民としての対抗策
hogehuga
0
190
kintone開発チームの紹介
cybozuinsideout
PRO
0
73k
プロダクトエンジニアリングで開発の楽しさを拡張する話
barometrica
0
220
JOAI発表資料 @ 関東kaggler会
joai_committee
1
180
LLM時代の検索とコンテキストエンジニアリング
shibuiwilliam
2
1.1k
Goでマークダウンの独自記法を実装する
lag129
0
160
AWSの最新サービスでAIエージェント構築に楽しく入門しよう
minorun365
PRO
10
560
AIは変更差分からユニットテスト_結合テスト_システムテストでテストすべきことが出せるのか?
mineo_matsuya
5
3k
Exadata Database Service on Dedicated Infrastructure セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
1
350
コミュニティと計画的偶発性理論 - 出会いが人生を変える / Life-Changing Encounters
soudai
PRO
7
1.2k
AI時代の大規模データ活用とセキュリティ戦略
ken5scal
1
280
第4回 関東Kaggler会 [Training LLMs with Limited VRAM]
tascj
10
1.4k
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Faster Mobile Websites
deanohume
309
31k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Automating Front-end Workflow
addyosmani
1370
200k
Gamification - CAS2011
davidbonilla
81
5.4k
GraphQLとの向き合い方2022年版
quramy
49
14k
Transcript
Vue.jsで考えるMVVM v-kansai Vue.js/Nuxt.js meetup #4
きれいなコード書いてますか?
皆さん設計してますか?
・・・
アーキテクチャを学んでみましょう!
MVVMとは? GUIアプリケーションを役割毎に M(Model) V(View) VM(ViewModel) の三種類に分割して設計・実装する手法(アーキテクチャ)
M(Model)・V(View)・VM(ViewModel) ViewModel View Model
M(Model)・V(View)・VM(ViewModel) ViewModel View Model 描画とユーザーの入力を 担当
M(Model)・V(View)・VM(ViewModel) ViewModel View Model 状態管理と処理フローの 実装を担当
M(Model)・V(View)・VM(ViewModel) ViewModel View Model アプリケーションが扱う領域の データと手続きを表現する
Vue.jsでMVVM
Vue.jsでMVVM View ViewModel
あれ?Modelは?
ModelはViewやViewModelの中に書かれる事が多 い ViewModel Model View Model
ModelはViewやViewModelの中に書かれる事が多 い ViewModel Model View Model ファットなView・ViewModel
ショッピングカート • カートに商品を追加出来る • カート内の商品を表示 ◦ 商品毎に消費税込みを計算して表示 • 送料は300円 ◦
3000円以上で送料がタダ • カート内の商品の合計金額を計算して表示 ◦ 合計金額の税込みを計算して表示
ノーMVVM
ノーMVVM 消費税の計算を Viewでやっちゃってる
ノーMVVM クラスとは? 型情報がない
ってことで実際に分割してみる
ステップ①
扱うデータをクラス化する • カートに商品を追加出来る • カート内の商品を表示 ◦ 商品毎に消費税込みを計算して表示 • 送料は300円 ◦
3000円以上で送料がタダ • カート内の商品の合計金額を計算して表示 ◦ 合計金額の税込みを計算して表示
扱うデータをクラス化する
ステップ②
クラスに手続き(ロジック)を追加していく • カートに商品を追加出来る • カート内の商品を表示 ◦ 商品毎に消費税込みを計算して表示 • 送料は300円 ◦
3000円以上で送料がタダ • カート内の商品の合計金額を計算して表示 ◦ 合計金額の税込みを計算して表示
クラスに手続き(ロジック)を追加していく
分割完了!!! ViewModel View Model
モデルを分割したことでViewが…? 消費税の計算(ロジック)が なくなり描画に集中できる
モデルを分割したことでViewModelが…? 処理フローの表現に集中
まとめ • Vue.jsでは、ファットなView・ViewModelになりがち • アプリケーションで扱うデータをクラスにする • 手続き(ロジック)をクラスのメソッドにする • Model層を作ることでView・ViewModelそれぞれの役割に集中出来る! •
Model層にデータとロジックがあるので単体テストできる!
みんなも ちゃんと分割しよう!!!
https://github.com/44x1carbon/vue-mvvm