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
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
420
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
140
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
190
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
630
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
4
560
生成AI時代のコンポーネントライブラリの作り方
touyou
1
300
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7.4k
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
690
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
480
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
260
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
13k
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Optimizing for Happiness
mojombo
379
70k
Code Reviewing Like a Champion
maltzj
524
40k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
Unsuck your backbone
ammeep
671
58k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Rails Girls Zürich Keynote
gr2m
95
14k
Into the Great Unknown - MozCon
thekraken
40
1.9k
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ʹ·ͭΘΔޡղ