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
480
たかが命名、されど命名
44x1carbon
2
1.1k
React(Kotlin)でToDoアプリを作ってみた
44x1carbon
2
1.7k
Multiplatform Kotlin
44x1carbon
0
180
Other Decks in Technology
See All in Technology
SaaSプロダクト開発におけるバグの早期検出のためのAcceptance testの取り組み
kworkdev
PRO
0
470
大規模アジャイル開発のリアル!コミュニケーション×進捗管理×高品質
findy_eventslides
0
590
モンテカルロ木探索のパフォーマンスを予測する Kaggleコンペ解説 〜生成AIによる未知のゲーム生成〜
rist
4
1.1k
20250328_OpenAI製DeepResearchは既に一種のAGIだと思う話
doradora09
PRO
0
160
KCD Brazil '25: Enabling Developers with Dapr & Backstage
salaboy
1
130
Multitenant 23ai の全貌 - 機能・設計・実装・運用からマイクロサービスまで
oracle4engineer
PRO
2
120
一人QA時代が終わり、 QAチームが立ち上がった話
ma_cho29
0
290
17年のQA経験が導いたスクラムマスターへの道 / 17 Years in QA to Scrum Master
toma_sm
0
420
Explainable Software Engineering in the Public Sector
avandeursen
0
370
AI・LLM事業部のSREとタスクの自動運転
shinyorke
PRO
0
300
ソフトウェアプロジェクトの成功率が上がらない原因-「社会価値を考える」ということ-
ytanaka5569
0
130
[CATS]Amazon Bedrock GenUハンズオン座学資料 #2 GenU環境でRAGを体験してみよう
tsukuboshi
0
150
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
42
7.4k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Code Review Best Practice
trishagee
67
18k
We Have a Design System, Now What?
morganepeng
51
7.5k
Thoughts on Productivity
jonyablonski
69
4.5k
Music & Morning Musume
bryan
46
6.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
12
1.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building Your Own Lightsaber
phodgson
104
6.3k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
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