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
データバインディングによるインタラクティブなUIの効率的な表現
Search
久保田光則
June 09, 2013
Programming
23
8.2k
データバインディングによるインタラクティブなUIの効率的な表現
久保田光則
June 09, 2013
Tweet
Share
More Decks by 久保田光則
See All by 久保田光則
サーバサイドだけでReact使う / React as Template Engine
anatoo
1
810
requestIdleCallback()による協調的バックグラウンド処理の実現 / requestIdleCallback()
anatoo
0
3.9k
Mastodonとその脱中央集権の仕組み
anatoo
11
21k
大量の要素を高速に表示するためのバーチャルレンダリング入門 / Virtual Rendering Introduction
anatoo
8
11k
PHPに型推論を実装する ~入門編~ / Type inference on PHP
anatoo
6
10k
Cordova開発者が知っておきたいレンダリングエンジンの話 / HTML5 Conference 2015 in Kagoshima
anatoo
4
1.8k
PHPで学ぶVM型正規表現エンジンの仕組み
anatoo
8
7.2k
チームで作る!イケてるデザイン
anatoo
16
14k
Cordovaで作るHTML5ハイブリッドアプリ 〜開発ベストプラクティスを学ぶ〜
anatoo
27
18k
Other Decks in Programming
See All in Programming
NIKKEI Tech Talk#38
cipepser
0
250
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
260
Go言語はstack overflowの夢を見るか?
logica0419
0
610
Leading Effective Engineering Teams in the AI Era
addyosmani
7
640
alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS
aoseyuu
2
690
モテるデスク環境
mozumasu
3
1.3k
Reactive Thinking with Signals and the Resource API
manfredsteyer
PRO
0
110
なんでRustの環境構築してないのにRust製のツールが動くの? / Why Do Rust-Based Tools Run Without a Rust Environment?
ssssota
14
46k
CSC305 Lecture 08
javiergs
PRO
0
280
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
190
Devvox Belgium - Agentic AI Patterns
kdubois
1
150
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
560
Featured
See All Featured
Leading Effective Engineering Teams in the AI Era
addyosmani
7
640
GitHub's CSS Performance
jonrohan
1032
470k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
The Cult of Friendly URLs
andyhume
79
6.6k
Why Our Code Smells
bkeepers
PRO
340
57k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
KATA
mclloyd
PRO
32
15k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Site-Speed That Sticks
csswizardry
13
930
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Mobile First: as difficult as doing things right
swwweet
225
10k
Fireside Chat
paigeccino
41
3.7k
Transcript
σʔλόΠϯσΟϯάʹΑΔ ΠϯλϥΫςΟϒͳ6*ͷޮతͳදݱ ΞγΞϧגࣜձࣾ ٱอాޫଇ
ΞδΣϯμ w ࣗݾհ w σʔλόΠϯσΟϯάΛ࣮ࡍʹࢼͯ͠ΈΔ w ࠓ·Ͱͷ6*ͷ࡞Γํ w ϦΞΫςΟϒϓϩάϥϛϯά w
·ͱΊ
ࣗݾհ w ٱอాޫଇ!BOBUPP w ΞγΞϧגࣜձࣾ w 6*69σβΠφʔ݉ιϑτΣΞΤϯδχΞ
6*69σβΠφʔͬͯԿ w ϢʔβʔετʔϦʔ࡞ͬͨΓ w ϫΠϠϑϨʔϜॻ͍ͨΓ w ϏδϡΞϧσβΠϯͨ͠Γ
ී௨ͷ։ൃ w 1)1 +BWB4DSJQU +BWB BOESPJE 0CKFDUJWF$ $PDPB J04
'BDUPS $ $ 4DBMB w ΘΓͱͳΜͰΔ
ϗϜϖ w IUUQBOBUPPKQ w IUUQEIBUFOBOFKQBOBUPP
ࣗݾհऴΘΓ
ΛਐΊΔલͷഎܠ
࠷ۙͷΣϒΞϓϦͷ6* w ΊͬͪΌϦονʹͳ͖ͬͯͨ
w ྫIUUQJ$MPVEDPNͷΧϨϯμʔ
w ྫIUUQTUSJQFDPNͷཧը໘
w ྫIUUQNPOBDBNPCJͷ*%&
มΘ͖ͬͯͨ͜ͱ w 4JOHMF1BHF"QQMJDBUJPOͷීٴ w σεΫτοϓͷ(6*ʹ͍͖ۙͮͯͨ
ͦΜͳத͜͜Ͱొͨ͠ͷ wσʔλόΠϯσΟϯά
ޮతʹ ϢʔβʔΠϯλʔϑΣΠε Λදݱ͢ΔͨΊͷύλʔϯ
ݩʑ(6*Ͱར༻͞Ε͍ͯͨ
ΣϒϑϩϯτΤϯυ͕Ϧονʹ w ͦΕʹ͍ɺσʔλόΠϯσΟϯά(6*ͷੈք͔ΒΣ ϒͱ߱Γ͖ͯͨ
+4ϑϨʔϜϫʔΫͰͷ࠾༻૿Ճ w "OHVMBSKT w ,OPDLPVUKT w &NCFSKT w ,OPDLCBDLKT w
#BUNBOKT w FUD
ͬͦ͘͞ σʔλόΠϯσΟϯά ͷհ
+4ͰͷσʔλόΠϯσΟϯά w +4ͱ%0.ͷؔΛએݴ͢ΔΈ w ͲͪΒ͔͕ߋ৽͞ΕΔͱ͏Ұํʹࣗಈө͞ΕΔ %0.ཁૉ +4ͷ ΦϒδΣΫτ
ૣࢼͯ͠ΈΔ w ,OPDLPVUKT w Θ͔Γ͍͢σʔλόΠϯσΟϯάΛ αϙʔτ͍ͯ͠Δ'8
)5.-ʹόΠϯσΟϯάΛॻ͘ w %0.ཁૉͱ+BWB4DSJQUͷมͱͷ ؔΛએݴ <p>First name: <input data-bind="value: name" />
</p> Hello <span data-bind=”text: name” />!
+4ଆͷΦϒδΣΫτΛએݴ͢Δ w +BWB4DSJQUଆͰఏڙ͢ΔΛ એݴͯ݁͠ͼ͚ͭΔ w ޙ͕มΘΕউखʹө var MyViewModel = function()
{ this.name = ko.observable(‘’); }; ko.applyBindings(new MyViewModel());
σϞ w ૣࢼͯ͠ΈΔ
σϞ w ؆୯ͳ50%0ΞϓϦΛ࡞ͬͯΈΔ IUUQBOBUPPKQCJGUPEPBQQIUNM
ར w %0.ߏʹؾΛΘͳͯ͘ྑ͍ w ࣗಈͰ6*ߋ৽ɻ%0.ૢ࡞͔Β։์͞ΕΔ w ݁Ռɺίʔυ͕ݮΔ
ܽ w ֶशίετ͕ඞཁ w ߟ͑ํͷస͕ඞཁ
w ͳͥࠓ·ͰͷΓํͰବͳͷ͔ w σʔλόΠϯσΟϯάͷഎܠʹ͋Δߟ͑ํ
ࠓ·Ͱ w զʑ+4ͰͲ͏ͬͯ6*Λ࡞͖͔ͬͯͨ w ΣϒͰͷΠϯλϥΫςΟϒͳ6*Λߏ͢Δͷ
ΣϒϖʔδͷϨϯμϦϯά
ϨϯμϦϯάͷྲྀΕ )5.- ύʔε ϨϯμϦϯά ຊͬͱෳࡶ $44 %0. πϦʔ
%0.πϦʔ )5.-υΩϡϝϯτΛදݱ͢ΔπϦʔߏͷσʔλ ֤ϊʔυϚʔΫΞοϓͱҰରҰͰରԠ
ΠϯλϥΫςΟϒͳ6*Ͱ w Ϣʔβͷೖྗʹରͯ͠ಈతʹ6*ΛมԽͤ͞Δඞཁ w ೖྗͷྫϚεͷΫϦοΫɺϑΥʔϜͷೖྗͳͲ
+BWB4DSJQU͔Β%0.Λૢ࡞ +BWB4DSJQU +4͔Βૢ࡞ ࠶ϨϯμϦϯά ҧ͏ϨϯμϦϯά݁Ռ
࣌ܥྻͰද͢ͱ +BWB4DSJQU %0.πϦʔ զʑ܁Γฦ͠%0.ૢ࡞Λ͍ͯ͠Δ %0.ૢ࡞ %0.ૢ࡞ %0.ૢ࡞ %0.ૢ࡞
%0.πϦʔʹϑΥʔΧε w %0.πϦʔͷมԽ͕ಈతͳ6*Λߏ
͜Ε·Ͱͷ࣮Ξϓϩʔν w %0.πϦʔͷมԽΛશͯίʔσΟϯά w %0.ૢ࡞ओମͷΓํ
͜ΕͰ6*ͷߏஙʹؔ͢Δ ղܾ͔ͨ͠ w ͦ͏ߦ͔ͳ͍
ͬͯΈΔͱେม w ͳΜ͔ޮ͕ѱ͍ w ίʔυͷྔ͕ݮΒͳ͍ w ϝϯςφϯε͕େม
ͱ͍͏ͷ w ৗʹ%0.πϦʔͷߏΛ಄ʹೖΕ͍ͯͳ͍ͱߦ͚ͳ͍ w %0.πϦʔͷߏʹґଘͨ͠ίʔυʹͳ͍ͬͯΔ w )5.-Λฤू͢ΔͱϏϡʔͷίʔυ͕յΕΔ͜ͱ
ߟ͑ํͷస͕ඞཁ
ϦΞΫςΟϒϓϩάϥϛϯά
ϦΞΫςΟϒϓϩάϥϛϯά w ϓϩάϥϛϯάύϥμΠϜ w ϦΞϧλΠϜʹมԽ͢ΔΛѻ͏ w σʔλόΠϯσΟϯάͱؔ࿈͢Δߟ͑ํ
w ܭࢉΛهड़͢ΔͷͰͳ͘ɺ ܭࢉͷؔΛએݴ͢Δ ϓϩάϥϛϯάύϥμΠϜ
؆୯ͳࣜͰߟ͑ͯΈΑ͏ a = b + 4;
͠ɺC͕ͩͬͨΒ w વɺBʹͳΔ a = b + 4;
͠ɺC͕ͩͬͨΒ w વɺBʹͳΔ a = b + 4;
BCʹґଘ͍ͯ͠Δ w CͷʹΑͬͯB͕ܾఆ͢Δ a = b + 4;
a = b + 4; มԽ͢Δͷؔ w ͱͯ͠ݟͳͤΔ
ϦΞΫςΟϒϓϩάϥϛϯάͰ w Ұ୴มԽ͢ΔͷؔੑΛએݴ͢Ε উखʹ࠶ܭࢉͯ͘͠ΕΔ w ঢ়ଶཧ͔Β։์͞ΕΔ a = b +
4;
ͦΕͬͯΘΕͯΔͷ
͢Ͱʹ͋ͳͨ ϦΞΫςΟϒϓϩάϥϛϯά Λ͍ͬͯΔ
ྫ&YDFMͷදܭࢉιϑτ w ࣜΛॻ͍͓ͯ͘ͱɺґଘ͢Δηϧͷத͕ߋ৽͞ΕΔͱ ࠶ܭࢉ͞ΕΔ
࣮ɺ6*ʹ w ͜ͷߟ͑ํ͕៉ྷʹͯ·Δ
ྫͰߟ͑Α͏ w SFNFNCFSUIFNJMLͷొϑΥʔϜ
ϑΥʔϜʹೖྗ͢Δͱ w Ϣʔβͷೖྗʹରͯ͠ΞϧλΠϜʹมԽ
w ೖྗʹରͯ͠%0.πϦʔ͕ ϦΞϧλΠϜʹมԽ
͔͠͠ɺ Α͘؍ͯ͠ΈΔͱ
Α͘ݟΔͱ w όϦσʔγϣϯͷ6*ϑΥʔϜʹґଘ͍ͯ͠Δ w͜ͷґଘͷؔෆม
͜ͷྫʹݶΒͣ ͲΜͳ6*Ͱؒͷ͕ؔଘࡏ ͢Δ
σʔλόΠϯσΟϯά w ͜ͷϦΞΫςΟϒϓϩάϥϛϯάͷߟ͑ํΛ 6*ʹద༻͍ͯ͠Δ w %0.ૢ࡞ओମͷߟ͑ํͱશ͘ผ
͜Ε͔Βͷ
Λੲ͢ w Πϯλʔωοτʹଓ͢Δͷʹ ϞσϜ͕ϐʔώϣϩ໐͍ͬͯͨ͋ͷࠒ w ωοτΛ͍ͯͨ͠ΒՈʹి͕͑ͳ͍ͱۤΛݴΘΕ Δ
͜ͷࠒͷΣϒΞϓϦ w αʔόαΠυͰͷॲཧ͕΄΅ϝΠϯ w +BWB4DSJQUͰԿ͔ͬͨΓ΄΅ແ͠ w BKBYͱ͔ແ͍͠ɺ$44ແ͍ w ςʔϒϧϨΠΞτਖ਼ٛ
࣌ਐΈ w HPPHMF.BQͳͲͷొ w 8FCͱ͍͏ݴ༿͕όζϫʔυʹ w ΣϒΞϓϦέʔγϣϯͱ͍͏ݴ༿͕વʹ
ࠓʹࢸΔ w σεΫτοϓΞϓϦฒͷ6* w पลٕज़ͷߴԽ
աڈ͔ΒະདྷΛ༧ଌ͢Δ w )5.-ͷීٴ w ߴͳ6*Λ࣋ͬͨΞϓϦͷ૿Ճ w গͳ͘ͱ͋ͱ͙Β͍
͜Ε͔Β w ·ͩখ͍͠ཧ۶ඞཁͳ͍ w ࠓඞཁͳͯ͘͜Ε͔Βඞཁʹͳͬͯ͘Δ
͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠