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
1.8k
Vue.jsで考えるMVVM
44
March 20, 2019
Tweet
Share
More Decks by 44
See All by 44
Kotlin MultiPlatform Projectのロマンを語る
44x1carbon
0
420
たかが命名、されど命名
44x1carbon
2
1k
React(Kotlin)でToDoアプリを作ってみた
44x1carbon
2
1.5k
Multiplatform Kotlin
44x1carbon
0
150
Other Decks in Technology
See All in Technology
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
360
推しは推せるときに推せ! プロダクトにフィードバックしていこう
nakasho
0
310
生産性向上チームの紹介
cybozuinsideout
PRO
1
870
反実仮想機械学習とは何か
usaito
PRO
11
4.6k
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
2.1k
検証を通して見えてきたTiDBの性能特性
lycorptech_jp
PRO
6
3.8k
GraphQL 成熟度モデルの紹介と、プロダクトに当てはめた事例 / GraphQL maturity model
mh4gf
7
1.3k
プラットフォームってつくることより計測することが重要なんじゃないかという話 / Platform Engineering Meetup #8
taishin
1
360
Meta Quest 3 で動く桜マシマシ WebXR アプリを IBM Cloud Code Engine と Babylon.js で作った話
1ftseabass
PRO
0
120
本当のAWS基礎
toru_kubota
0
520
アクセス制御にまつわる改善 / Improving access control
itkq
0
540
Compose Compiler Metricsを使った実践的なコードレビュー
tomorrowkey
1
220
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
2
3.4k
Automating Front-end Workflow
addyosmani
1356
200k
Writing Fast Ruby
sferik
621
60k
Designing with Data
zakiwarfel
96
4.8k
How to train your dragon (web standard)
notwaldorf
73
5.2k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
Infographics Made Easy
chrislema
238
18k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Rails Girls Zürich Keynote
gr2m
91
13k
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