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
Gaze-LLE: Gaze Target Estimation via Large-Scale Learned Encoders
kzykmyzw
0
310
MySQL HeatWave:サービス概要のご紹介
oracle4engineer
PRO
4
1.7k
生成AI利用プログラミング:誰でもプログラムが書けると 世の中どうなる?/opencampus202508
okana2ki
0
190
サービスロボット最前線:ugoが挑むPhysical AI活用
kmatsuiugo
0
190
Figma + Storybook + PlaywrightのMCPを使ったフロントエンド開発
yug1224
8
1.5k
小さなチーム 大きな仕事 - 個人開発でAIをフル活用する
himaratsu
0
120
ZOZOTOWNフロントエンドにおけるディレクトリの分割戦略
zozotech
PRO
16
5.3k
制約理論(ToC)入門
recruitengineers
PRO
2
270
R-SCoRe: Revisiting Scene Coordinate Regression for Robust Large-Scale Visual Localization
takmin
0
430
実践データベース設計 ①データベース設計概論
recruitengineers
PRO
2
220
Amazon Bedrock AgentCore でプロモーション用動画生成エージェントを開発する
nasuvitz
6
420
マイクロモビリティシェアサービスを支える プラットフォームアーキテクチャ
grimoh
1
200
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
431
65k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
BBQ
matthewcrist
89
9.8k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
The Invisible Side of Design
smashingmag
301
51k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
890
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.4k
Building Adaptive Systems
keathley
43
2.7k
Thoughts on Productivity
jonyablonski
69
4.8k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
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