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
490
たかが命名、されど命名
44x1carbon
2
1.1k
React(Kotlin)でToDoアプリを作ってみた
44x1carbon
2
1.7k
Multiplatform Kotlin
44x1carbon
0
180
Other Decks in Technology
See All in Technology
AI Agentを「期待通り」に動かすために:設計アプローチの模索と現在地
kworkdev
PRO
2
470
白金鉱業Meetup_Vol.18_AIエージェント時代のUI/UX設計
brainpadpr
1
180
品質文化を支える小さいクロスファンクショナルなチーム / Cross-functional teams fostering quality culture
toma_sm
0
130
クォータ監視、AWS Organizations環境でも楽勝です✌️
iwamot
PRO
1
330
AWS Control Towerを 数年運用してきての気づきとこれから/aws-controltower-ops-tips
tadayukinakamura
0
170
30代からでも遅くない! 内製開発の世界に飛び込み、最前線で戦うLLMアプリ開発エンジニアになろう
minorun365
PRO
13
4.1k
プロダクト開発におけるAI時代の開発生産性
shnjtk
2
240
2025-04-24 "Manga AI Understanding & Localization" Furukawa Arata (CyberAgent, Inc)
ornew
2
230
コスト最適重視でAurora PostgreSQLのログ分析基盤を作ってみた #jawsug_tokyo
non97
1
550
彩の国で始めよう。おっさんエンジニアから共有したい、当たり前のことを当たり前にする技術
otsuki
0
150
JPOUG Tech Talk #12 UNDO Tablespace Reintroduction
nori_shinoda
2
150
地味にいろいろあった! 2025春のAmazon Bedrockアップデートおさらい
minorun365
PRO
1
300
Featured
See All Featured
Speed Design
sergeychernyshev
29
900
Six Lessons from altMBA
skipperchong
27
3.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Designing for Performance
lara
608
69k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.4k
Docker and Python
trallard
44
3.3k
Facilitating Awesome Meetings
lara
54
6.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
Visualization
eitanlees
146
16k
Designing for humans not robots
tammielis
252
25k
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