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
7.9k
データバインディングによるインタラクティブなUIの効率的な表現
久保田光則
June 09, 2013
Tweet
Share
More Decks by 久保田光則
See All by 久保田光則
サーバサイドだけでReact使う / React as Template Engine
anatoo
1
610
requestIdleCallback()による協調的バックグラウンド処理の実現 / requestIdleCallback()
anatoo
0
3.4k
Mastodonとその脱中央集権の仕組み
anatoo
11
21k
大量の要素を高速に表示するためのバーチャルレンダリング入門 / Virtual Rendering Introduction
anatoo
8
10k
PHPに型推論を実装する ~入門編~ / Type inference on PHP
anatoo
6
9.6k
Cordova開発者が知っておきたいレンダリングエンジンの話 / HTML5 Conference 2015 in Kagoshima
anatoo
4
1.6k
PHPで学ぶVM型正規表現エンジンの仕組み
anatoo
8
6.8k
チームで作る!イケてるデザイン
anatoo
16
14k
Cordovaで作るHTML5ハイブリッドアプリ 〜開発ベストプラクティスを学ぶ〜
anatoo
27
18k
Other Decks in Programming
See All in Programming
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
Netty Chicago Java User Group 2024-04-17
sullis
0
170
Elm Form Validation
bkuhlmann
0
510
Goのmultiple errorsについて (2024年4月版)
syumai
3
650
Tailwind CSSを本気でカスタマイズする方法
fsubal
13
5.2k
Goのエラースタックトレースの歴史と今後
sonatard
7
1.2k
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
5
910
Hanami and htmx
bkuhlmann
0
210
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
180
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
170
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
360
코틀린으로 멀티플랫폼 만들기
pangmoo
0
150
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
A Philosophy of Restraint
colly
197
16k
Happy Clients
brianwarren
92
6.4k
How to train your dragon (web standard)
notwaldorf
73
5.2k
The Brand Is Dead. Long Live the Brand.
mthomps
49
28k
Clear Off the Table
cherdarchuk
84
310k
Product Roadmaps are Hard
iamctodd
44
9.7k
It's Worth the Effort
3n
180
27k
Building Adaptive Systems
keathley
31
1.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
355
18k
The Cost Of JavaScript in 2023
addyosmani
16
3.9k
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 ࠓඞཁͳͯ͘͜Ε͔Βඞཁʹͳͬͯ͘Δ
͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠