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
2k
Vue.jsで考えるMVVM
44
March 20, 2019
Tweet
Share
More Decks by 44
See All by 44
Kotlin MultiPlatform Projectのロマンを語る
44x1carbon
0
460
たかが命名、されど命名
44x1carbon
2
1k
React(Kotlin)でToDoアプリを作ってみた
44x1carbon
2
1.6k
Multiplatform Kotlin
44x1carbon
0
150
Other Decks in Technology
See All in Technology
Amplify Gen 2ではじめる 生成AIアプリ開発入門
tsukuboshi
0
400
APIs for AI: Have we failed?
zdne
0
130
管理画面とユーザー機能の調和を取り戻す!~クエリパフォーマンス改善の成功物語~ / Restore harmony between administrative and user functions!
minisera
1
320
Bluesky 2019〜2022
yamarten
1
120
Deep dive into Nuxt Server Components
wattanx
1
1.3k
組織デバイスのための効率的なアプリケーション更新戦略
kenchan0130
0
460
寒冷地稲作の歴史にみるコミュニティ
miu_crescent
2
140
次は君だ。~Japan AWS Jr. Champions 受賞までの奇跡~
fukuchiiinu
0
120
エンジニアのドメイン知識獲得コストを低減するアプリケーションデザイン
ryo_nagata_
3
160
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
48k
RSGT Walk Through
kawaguti
PRO
2
400
運営11年目タイトルを守る最強の盾の有効性と活用法
mixi_engineers
PRO
2
120
Featured
See All Featured
Designing Experiences People Love
moore
138
23k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
Optimizing for Happiness
mojombo
376
69k
Why Our Code Smells
bkeepers
PRO
334
57k
No one is an island. Learnings from fostering a developers community.
thoeni
19
2.9k
Rails Girls Zürich Keynote
gr2m
93
13k
YesSQL, Process and Tooling at Scale
rocio
167
14k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
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