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
Angular2とMVVM
Search
laco
April 20, 2016
Programming
5
5.6k
Angular2とMVVM
4/20 2016 ng-sake#2
laco
April 20, 2016
Tweet
Share
More Decks by laco
See All by laco
Pub使ってますか?
laco0416
1
1.6k
ASP.NetでAPIを作ってみた
laco0416
0
500
OSC_F_2013 LT
laco0416
0
140
Other Decks in Programming
See All in Programming
株式会社 Sun terras カンパニーデック
sunterras
0
220
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
7
1.6k
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
180
2025年版 サーバーレス Web アプリケーションの作り方
hayatow
23
25k
XP, Testing and ninja testing ZOZ5
m_seki
2
280
Serena MCPのすすめ
wadakatu
4
900
プログラマのための作曲入門
cheebow
0
540
CSC305 Lecture 03
javiergs
PRO
0
230
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
180
AIで開発生産性を上げる個人とチームの取り組み
taniigo
0
130
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
230
CSC509 Lecture 03
javiergs
PRO
0
330
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
75
5k
Embracing the Ebb and Flow
colly
88
4.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
580
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Done Done
chrislema
185
16k
Bash Introduction
62gerente
615
210k
Agile that works and the tools we love
rasmusluckow
331
21k
For a Future-Friendly Web
brad_frost
180
9.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Designing for Performance
lara
610
69k
Transcript
Angular 2 ͱMVVM ng-sake #2 @laco0416
MVVMͱʁ
MVVMͱ͍͏ߟ͑ํ • GUIΞϓϦͷΞʔΩςΫνϟͷ1ͭ • ݯྲྀXAML • WPF/Silverlight/WindowsετΞΞϓϦ
XAML • Extensible Application Markup Language • ΞϓϦέʔγϣϯΛϚʔΫΞοϓ͢Δݴޠ • .NetݴޠʹมՄೳ
• ੑ • ڧྗͳσʔλόΠϯσΟϯάػߏ
7JFX 7JFX.PEFM .PEFM Data-Binding Α͋͘ΔMVVMͷਤ Call Event Presentation Business
Model/View/ViewModel • ViewModelͱModelͷڥքΛͲ͜ʹஔ͘ʁ • Model͕ᐆດͩͱViewModelᐆດʹͳΔ • ͍͍ͩͨڮ͢͠Δ͚ͩͳΒMVCͩͬͯͦ͏ͩ͠MVP ͩͬͯͦ͏͡ΌΜ • ViewModelͷΛ͖ͬΓͤ͞ͳ͍ͱ
MVVM࡞Εͳ͍
ViewModel ͷ • ViewϓϥοτϑΥʔϜʹґଘ͢Δ • ModelϓϥοτϑΥʔϜʹґଘ͠ͳ͍ • ModelΛ֤ϓϥοτϑΥʔϜͰදࣔ͢ΔͨΊͷ Ξμϓλʔ =
ViewModel
Angular 2 Component
7JFX 7JFX.PEFM .PEFM Data-Binding MVVMͷਤ(࠶) Call Event Presentation Business
5FNQMBUF $PNQPOFOU 4FSWJDF Data-Binding Angular 2ʹஔ͖͑Δ Call Event Presentation Business
ຊʹʁ
5FNQMBUF $PNQPOFOU Data-Binding Angular 2ͬͯ͜͏͡ΌΜ Event Presentation Business
%0. 5FNQMBUF $PNQPOFOU ͬͱ͍͑ Presentation Business Data-Binding Rendering Event ϓϥοτϑΥʔϜґଘ
ComponentVMͰͳ͍ • Model+Controller͕Ұ൪͍ۙ • ΞϓϦέʔγϣϯͱ͍͏Ϟσϧͷϊʔυ • ComponentΛDOMʹӨ͢ΔTemplate͕Ұ൪VMʹ͍ۙ
MVVMMVW for XAML • XAMLͰViewσʔλόΠϯσΟϯά͋Γ͖ • View͕σʔλΛࢀর͢Δઌ͕ඞཁ • ViewʹϩοΫΠϯ͞ΕͨσʔλϞσϧ͕ඞཁ •
͔ͩΒViewModel͕ඞཁͩͬͨ • ͦͦHTML/JSͷؔͱҧ͏
݁ • MVVMAngularͰࢦ͢ͷ͡Όͳ͍ • ComponentModel+Controllerͱߟ͑Δ • ViewσʔλΛఏڙ͢Δ • View͔ΒΠϕϯτΛड͚औΔ •
Componentಉ࢜ࢠؔΛऔΔ(ґଘ͕ؔ͋Δ) • ϓϥοτϑΥʔϜΛҙࣝ͠ͳ͍
ࢀߟ • GUIΞʔΩςΫνϟύλʔϯͷجૅ͔ΒMVVM ύλʔϯ • MVVMͷModelʹ·ͭΘΔޡղ