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.1k
データバインディングによるインタラクティブなUIの効率的な表現
久保田光則
June 09, 2013
Tweet
Share
More Decks by 久保田光則
See All by 久保田光則
サーバサイドだけでReact使う / React as Template Engine
anatoo
1
770
requestIdleCallback()による協調的バックグラウンド処理の実現 / requestIdleCallback()
anatoo
0
3.7k
Mastodonとその脱中央集権の仕組み
anatoo
11
21k
大量の要素を高速に表示するためのバーチャルレンダリング入門 / Virtual Rendering Introduction
anatoo
8
11k
PHPに型推論を実装する ~入門編~ / Type inference on PHP
anatoo
6
9.9k
Cordova開発者が知っておきたいレンダリングエンジンの話 / HTML5 Conference 2015 in Kagoshima
anatoo
4
1.7k
PHPで学ぶVM型正規表現エンジンの仕組み
anatoo
8
7.1k
チームで作る!イケてるデザイン
anatoo
16
14k
Cordovaで作るHTML5ハイブリッドアプリ 〜開発ベストプラクティスを学ぶ〜
anatoo
27
18k
Other Decks in Programming
See All in Programming
OpenTelemetryを活用したObservability入門 / Introduction to Observability with OpenTelemetry
seike460
PRO
0
340
remix + cloudflare workers (DO) docker上でいい感じに開発する
yoshidatomoaki
0
120
AI Agents with JavaScript
slobodan
0
120
プログラミング教育のコスパの話
superkinoko
0
120
Develop Faster With FrankenPHP
dunglas
2
2.6k
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
960
Denoでフロントエンド開発 2025年春版 / Frontend Development with Deno (Spring 2025)
petamoriken
1
1.3k
複数ドメインに散らばってしまった画像…! 運用中のPHPアプリに後からCDNを導入する…!
suguruooki
0
430
아직도 SOLID 를 '글'로만 알고 계신가요?
sh1mj1
0
360
GDG Super.init(version=6) - From Where to Wear : 모바일 개발자가 워치에서 발견한 인사이트
haeti2
0
560
requirements with math
moony
0
520
NestJSのコードからOpenAPIを自動生成する際の最適解を探す
astatsuya
0
190
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1030
460k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.6k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
Designing for Performance
lara
606
69k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Statistics for Hackers
jakevdp
798
220k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
7
620
Being A Developer After 40
akosma
90
590k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
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 ࠓඞཁͳͯ͘͜Ε͔Βඞཁʹͳͬͯ͘Δ
͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠