Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
KnockjoutJS紹介
Search
Chihiro Naganuma
May 19, 2013
Programming
0
520
KnockjoutJS紹介
KnockoutJSを調べて社内で発表してきたよ!
Chihiro Naganuma
May 19, 2013
Tweet
Share
More Decks by Chihiro Naganuma
See All by Chihiro Naganuma
Backbone.jsハンズオン
onjiro
1
250
Recomendation WEB+DB PRESS vol.68
onjiro
3
440
Welcome to study meeting in your company 2012
onjiro
1
360
He told me "You would be good to show your way"
onjiro
2
900
Other Decks in Programming
See All in Programming
生成AIを利用するだけでなく、投資できる組織へ
pospome
2
340
AWS CDKの推しポイントN選
akihisaikeda
1
240
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
manfredsteyer
PRO
0
140
モデル駆動設計をやってみようワークショップ開催報告(Modeling Forum2025) / model driven design workshop report
haru860
0
270
ローターアクトEクラブ アメリカンナイト:川端 柚菜 氏(Japan O.K. ローターアクトEクラブ 会長):2720 Japan O.K. ロータリーEクラブ2025年12月1日卓話
2720japanoke
0
730
Developing static sites with Ruby
okuramasafumi
0
290
バックエンドエンジニアによる Amebaブログ K8s 基盤への CronJobの導入・運用経験
sunabig
0
160
Integrating WordPress and Symfony
alexandresalome
0
150
Findy AI+の開発、運用におけるMCP活用事例
starfish719
0
790
LLM Çağında Backend Olmak: 10 Milyon Prompt'u Milisaniyede Sorgulamak
selcukusta
0
120
SwiftUIで本格音ゲー実装してみた
hypebeans
0
380
안드로이드 9년차 개발자, 프론트엔드 주니어로 커리어 리셋하기
maryang
1
110
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
970
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.6k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Site-Speed That Sticks
csswizardry
13
1k
Faster Mobile Websites
deanohume
310
31k
YesSQL, Process and Tooling at Scale
rocio
174
15k
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Statistics for Hackers
jakevdp
799
230k
Bootstrapping a Software Product
garrettdimon
PRO
307
120k
Thoughts on Productivity
jonyablonski
73
5k
Transcript
KnockoutJSհ ࣾͰհ͖ͯͨͭ͠ 2013/05/15 ͳ͕͵·ͪͻΖ
ͳ͕͵·ͪͻΖ • ˏonjiro_mohyahya • Ζ͙Β· • ͍͖͞ΜFuelPHPɾɾɾ • js/Java/Ruby/CSS •
Backbone.js͖͢ʔ
ࠓͷͳ͠
KnockoutJSʹ͍ͭͯ ௐͯΈͨΑ
• KnockoutJSͬͯ͜Μͳͷɻ • observable ͱ binding • ίʔυྔগͳΊ • ϚʔΫΞοϓͷมߋͦ͢͠͏
࣍ • KnockoutJSͱ • KnockoutJS͍ํ • ͰɺͲ͏Αʁ
࣍ • KnockoutJSͱ • KnockoutJS͍ํ • ͰɺͲ͏Αʁ
http://knockoutjs.com/
• jsͷϥΠϒϥϦ • ΫϥΠΞϯταΠυMV*ϑϨʔϜϫʔΫ • MVVM Patern
• jsͷϥΠϒϥϦ • ΫϥΠΞϯταΠυMV*ϑϨʔϜϫʔΫ • MVVM Patern
ΫϥΠΞϯταΠυ MV*ͷ͓͞Β͍
• ΫϥΠΞϯτଆjsίʔυͷෳࡶԽΛͳΜ ͱ͔͢Δٕज़ͷͻͱͭ • ຊͰBackbone.js͕༗໊
JavaScript
We love jQuery!!
But...
࠷ۙͷϦονͰෳࡶͳUIΛ jQuery͚ͩͰ࡞Δͱେม
jQueryͰͷ
Πϕϯτϋϯυϥͷத Ͱ৭ʑͬͪΌ͏
• DOM͔ΒσʔλऔΓग़͠ • AjaxͰαʔόʔͱσʔλͷΓͱΓ • දࣔͷߋ৽
ྫʣhttp://www.slideshare.net/slideshow/ embed_code/15645947?startSlide=19 ʢ56ຕ͘Β͍·Ͱʣ
• “ػೳ”ͱ”දࣔ”͕ҰମʹͳΓ͕ͪ • DOMʹػೳ͕ґଘ͕ͪ͠ • “දࣔ”มߋ͞Ε͍͢෦
ʔʼมߋʹऑ͍ :-p
ɾɾɾͱ͍͏Θ͚Ͱ
ΫϥΠΞϯταΠυMVC ϑϨʔϜϫʔΫͷ಄
”දࣔ”Λ”ػೳ”͔Β ͢Δ
• ػೳModelͷ • දࣔViewͷ • ػೳࣗମViewʹͳΔ͘ґଘ͠ͳ͍
• Observer PatternΛ࠾༻ • ModelͷมߋΛEventͰ͑Δ • View͕ModelΛࢹɺDOMΛॻ͖͑ ྫʣBackbone.jsͷ࡞ઓ
Model View HTML Server Backbone.EventΛ listen HTMLͷEventΛ listen
http://todomvc.com/
࣍ • KnockoutJSͱ • KnockoutJS͍ํ • ͰɺͲ͏Αʁ
࣮ࡍͷίʔυྫʢtodomvcͷجຊ෦͚ͩʣ http://onjiro.github.io/knockout-handson/public
None
• observable • binding
“observableͳViewModel”Λ “Viewʹbind”͢Δ
• Observer PatternΛ࠾༻ • View(html)←→ViewModelؒࣗಈө KnockoutJSͷ࡞ઓ
ViewModel HTML data-bindͰ੍ޚ ko.applyBinding Λࣗಈతʹө eventϋϯυϥʔద༻ KnockoutJS ࣗಈදࣔɾߋ৽ ͜Μͳײ͔͡ͳʁ
None
None
3छྨͷobservable 3छྨͷbinding
3छྨͷobservable 3छྨͷbinding
• ko.observable • ko.computed • ko.observableArray
3छྨͷobservable 3छྨͷbinding
• ςΩετͱελΠϧ • ίϯτϩʔϧϑϩʔ • ϑΥʔϜؔ࿈
ͱ͜ΖͰ
Ajaxαϙʔτʁ
• AjaxपΓͷऔΓܾΊͳ͍ http://knockoutjs.com/documentation/json-data.html • JSONͱϞσϧؒͷมαϙʔτ ko.toJS/ko.toJSON • JSON.stringifyී௨ʹ͑Δ
࣍ • KnockoutJSͱ • KnockoutJS͍ํ • ͰɺͲ͏Αʁ
• data-bind͕Ұݟ͖͍ • Backbone.jsΑΓίʔυྔݮΓͦ͏ • ݟ௨͠Α͍ɾɾɾ͔
data-bind͕ Ұݟ͖͍
• data-bindͷཛྷ • htmlͬͯviewͳΜ͡Όͳ͍ͷʁ • text, value͍͍͚Ͳ • click, submit,
etc... • Ͳ͏ͳΜͩʁ
Backbone.jsΑΓ ίʔυྔগͳ͍
• ҎԼ͕ࣗಈͳͷ͕ޮ͍͍ͯΔ • ೖྗΛModelʹө • Modelͷߋ৽Λը໘ʹө • foreachͰͷల։
ݟ௨͠Αͦ͞͏
• htmlݟ͍͢ • js ͳ͠ͰσβΠϯΘ͔Δ • େମͷಈ͖Θ͔Δɾɾɾ͔ • ϚʔΫΞοϓͷมߋͦ͢͠͏
ࠓͷݒ೦
• ಘҙύλʔϯΛΕͨࡍʹͲ͏ͩΖ ͏ʁ
• গ͠·ͱʹͬͯΈͳ͍ͱͳΜͱ ݴ͑ͳ͍ײ • Backbone.jsΑΓෳਓͷ։ൃ ָɾɾɾ͔ͳ͊ɻɻɻ
·ͱΊ
• observableͱbinding • ίʔυྔগͳΊ • ϚʔΫΞοϓͷมߋͦ͢͠͏
• http://tnakamura.hatenablog.com/entry/20120213/knockout • http://www.slideshare.net/shibayan/knockout-11523371 • http://www.slideshare.net/hakuraipod/knockout-14911482 • http://www.adobe.com/jp/devnet/html5/articles/getting- started-with-knockoutjs.html •
http://www.slideshare.net/tricknotes/introduction-for- browser-side-mvc ࢀߟ