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
790
requestIdleCallback()による協調的バックグラウンド処理の実現 / requestIdleCallback()
anatoo
0
3.8k
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.8k
PHPで学ぶVM型正規表現エンジンの仕組み
anatoo
8
7.2k
チームで作る!イケてるデザイン
anatoo
16
14k
Cordovaで作るHTML5ハイブリッドアプリ 〜開発ベストプラクティスを学ぶ〜
anatoo
27
18k
Other Decks in Programming
See All in Programming
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
170
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
170
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
12
4.5k
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
18k
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
260
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
220
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
110
AIともっと楽するE2Eテスト
myohei
6
2.6k
VS Code Update for GitHub Copilot
74th
2
650
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
130
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
390
PicoRuby on Rails
makicamel
2
130
Featured
See All Featured
It's Worth the Effort
3n
185
28k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
GitHub's CSS Performance
jonrohan
1031
460k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
Testing 201, or: Great Expectations
jmmastey
43
7.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Gamification - CAS2011
davidbonilla
81
5.4k
A better future with KSS
kneath
238
17k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
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 ࠓඞཁͳͯ͘͜Ε͔Βඞཁʹͳͬͯ͘Δ
͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠