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.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
500
OSC_F_2013 LT
laco0416
0
140
Other Decks in Programming
See All in Programming
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
300
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
650
What's new in Spring Modulith?
olivergierke
1
170
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
340
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
920
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
490
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
140
Ktorで簡単AIアプリケーション
tsukakei
0
110
CSC305 Lecture 11
javiergs
PRO
0
270
社会人になっても趣味開発を続けたい! / traPavilion
mazrean
1
100
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
18
8.7k
SODA - FACT BOOK(JP)
sodainc
1
8.8k
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
Into the Great Unknown - MozCon
thekraken
40
2.1k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6k
What's in a price? How to price your products and services
michaelherold
246
12k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Designing Experiences People Love
moore
142
24k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Bash Introduction
62gerente
615
210k
Optimizing for Happiness
mojombo
379
70k
Speed Design
sergeychernyshev
32
1.2k
Building an army of robots
kneath
305
46k
KATA
mclloyd
PRO
32
15k
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ʹ·ͭΘΔޡղ