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
800
requestIdleCallback()による協調的バックグラウンド処理の実現 / requestIdleCallback()
anatoo
0
3.9k
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
フロントエンドのパフォーマンスチューニング
koukimiura
6
2.3k
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
220
PHPカンファレンス関西2025 基調講演
sugimotokei
5
940
「App Intent」よくわからんけどすごい!
rinngo0302
1
130
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
130
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
270
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
120
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
2
380
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
490
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
740
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
6.7k
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Site-Speed That Sticks
csswizardry
10
720
It's Worth the Effort
3n
185
28k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
370
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
GraphQLとの向き合い方2022年版
quramy
49
14k
Embracing the Ebb and Flow
colly
86
4.8k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Why Our Code Smells
bkeepers
PRO
337
57k
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 ࠓඞཁͳͯ͘͜Ε͔Βඞཁʹͳͬͯ͘Δ
͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠