$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Angular2とMVVM
Search
laco
April 20, 2016
Programming
5
5.7k
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
510
OSC_F_2013 LT
laco0416
0
140
Other Decks in Programming
See All in Programming
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
manfredsteyer
PRO
0
210
ID管理機能開発の裏側 高速にSaaS連携を実現したチームのAI活用編
atzzcokek
0
220
Developing static sites with Ruby
okuramasafumi
0
270
STYLE
koic
0
170
DSPy Meetup Tokyo #1 - はじめてのDSPy
masahiro_nishimi
1
160
令和最新版Android Studioで化石デバイス向けアプリを作る
arkw
0
390
Giselleで作るAI QAアシスタント 〜 Pull Requestレビューに継続的QAを
codenote
0
130
なあ兄弟、 余白の意味を考えてから UI実装してくれ!
ktcryomm
11
11k
ゲームの物理 剛体編
fadis
0
330
UIデザインに役立つ 2025年の最新CSS / The Latest CSS for UI Design 2025
clockmaker
18
7.3k
AIコーディングエージェント(NotebookLM)
kondai24
0
180
AIコーディングエージェント(Gemini)
kondai24
0
210
Featured
See All Featured
Visualization
eitanlees
150
16k
Building a Modern Day E-commerce SEO Strategy
aleyda
45
8.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
54k
Git: the NoSQL Database
bkeepers
PRO
432
66k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
54k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.3k
Writing Fast Ruby
sferik
630
62k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
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ʹ·ͭΘΔޡղ