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
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
構文解析器入門
ydah
7
2k
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
6
1.4k
Flutterと Vibe Coding で個人開発!
hyshu
1
210
あまり知られていない MCP 仕様たち / MCP specifications that aren’t widely known
ktr_0731
0
210
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
1
420
Reactの歴史を振り返る
tutinoko
1
160
Go製CLIツールをnpmで配布するには
syumai
2
1k
GitHub Copilotの全体像と活用のヒント AI駆動開発の最初の一歩
74th
2
200
TypeScriptでDXを上げろ! Hono編
yusukebe
4
920
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
1
230
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
260
DataformでPythonする / dataform-de-python
snhryt
0
140
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
32
8.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
GitHub's CSS Performance
jonrohan
1031
460k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
420
The World Runs on Bad Software
bkeepers
PRO
70
11k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Bash Introduction
62gerente
613
210k
Speed Design
sergeychernyshev
32
1.1k
Faster Mobile Websites
deanohume
308
31k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Designing for Performance
lara
610
69k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
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 ࢀߟ