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
knockout.jsの紹介(オープンセミナー2017@広島)
Search
Makoto Henmi
March 02, 2017
Programming
0
450
knockout.jsの紹介(オープンセミナー2017@広島)
オープンセミナー2017@広島で発表した資料です。
knockout.jsの簡単な紹介です。
Makoto Henmi
March 02, 2017
Tweet
Share
More Decks by Makoto Henmi
See All by Makoto Henmi
ちいさくはじめるBacklog【令和最新版】
makowis
0
92
ちいさくはじめるBacklog
makowis
2
190
Firebase Hostingにシングルページアプリケーションをデプロイしてみよう #gbdaitokai
makowis
1
700
ノベルティのパッケージング
makowis
1
310
スパロボ遍歴
makowis
1
90
昔懐かしいインターネットの風物詩を最近の技術で作る話
makowis
1
3.9k
5分でわかるホワイトボードチャレンジ
makowis
1
450
ぼくらのかんがえたさいきょうのリモート雑談環境 #oso2018
makowis
0
1.8k
朝会をやめた話
makowis
0
5.6k
Other Decks in Programming
See All in Programming
Интеграционное тестирование: как приручить хаос
mariyasaygina
0
540
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
1.2k
DjangoNinjaで高速なAPI開発を実現する
masaya00
0
500
M5Stack に色々な M5ユニットをつないで扱う為の新たなアプローチ
gob
0
210
Vue :: Better Testing 2024
up1
1
390
WEBアプリケーションにおけるAWS Lambdaを用いた大規模な非同期処理の実践
delhi09
PRO
7
4k
(Deep|Web) Link support with expo-router
mrtry
0
170
Memory API: Patterns, Use Cases, and Performance
josepaumard
1
140
CSC509 Lecture 02
javiergs
PRO
0
160
Re:PandasAI:生成AIがデータ分析業務にもたらすパラダイムシフト【増補改訂版】
negi111111
1
900
[PHPカンファレンス沖縄2024]「無理なくできるだけ安全に」テストもないレガシーコードをリファクタリングするテクニック
ikezoemakoto
3
120
標準ライブラリの動向とイテレータのパフォーマンス
makki_d
3
200
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.8k
Agile that works and the tools we love
rasmusluckow
327
21k
Visualization
eitanlees
143
15k
Done Done
chrislema
181
16k
Fireside Chat
paigeccino
32
3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.6k
Building an army of robots
kneath
302
42k
A designer walks into a library…
pauljervisheath
202
24k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
125
18k
It's Worth the Effort
3n
183
27k
Transcript
knockout.jsͷհ 2017/2/25 Φʔϓϯηϛφʔ2017@ౡ ҳݟ (@mako_wis)
ࣗݾհ w ҳݟ ΜΈ·͜ͱ w 5XJUUFS!NBLP@XJT w גࣜձࣾΫϨΦϑʔΨ w
ϑϩϯταʔόʔαΠυΤϯδχ ΞɾจষνΣοΫ
ࠓԬࢁ͔Βདྷ·ͨ͠
ԬࢁͷίϛϡχςΟ • ԬࢁRubyίϛϡχςΟ • ԬࢁJavaϢʔβʔձ • OITEC(Okayama IT Engineers Community)
• okayama-js • தࠃํσʔλϕʔεษڧձ • ΦʔϓϯηϛφʔԬࢁ • Atlassian User Group தࠃ • ߹ಉษڧձ
knockout.jsͷհ 2017/2/25 Φʔϓϯηϛφʔ2017@ౡ ҳݟ (@mako_wis)
࠷ۙͬͯΔJSपΓͷٕज़ • TypeScript • ੩తܕ͖ݴޠͬΆ͔͚͘Δ • knockout.js • ࠓͷ
JavaScriptͰ ໘͍͘͞ͳͱࢥ͏͜ͱ
ೖྗʹԠͯ͡දࣔΛม͑Δ
ͦͷଞ͕͋ΔϑΥʔϜ
࡞Δͷ໘͍͘͞Ͱ͢ΑͶʁ
knockout.jsͩͱ
ͦͷଞϑΥʔϜ <label> ɹ<input type="radio" name="area" value="okayama" data-bind="checked: radioSelectedValue”/> Ԭࢁࢢ </label>
ɾɾɾ <label> ɹ<input type="radio" name="area" value="other" data-bind="checked: radioSelectedValue”/> ɹͦͷଞ </label> <input type="text" data-bind="enable: selectedOther" placeholder="ͦͷଞͷํ~"/> function viewModel() { var self = this; self.radioSelectedValue = ko.observable("okayama"); self.selectedOther= ko.computed(function() { return self.radioSelectedValue() == "other"; }); }; ko.applyBindings(new viewModel()); KBWB4DSJQU IUNM
ͦͷଞϑΥʔϜ <label> ɹ<input type="radio" name="area" value="okayama" data-bind="checked: radioSelectedValue”/> Ԭࢁࢢ </label>
ɾɾɾ <label> ɹ<input type="radio" name="area" value="other" data-bind="checked: radioSelectedValue”/> ɹͦͷଞ </label> <input type="text" data-bind="enable: selectedOther" placeholder="ͦͷଞͷํ~"/> function viewModel() { var self = this; self.radioSelectedValue = ko.observable("okayama"); self.selectedOther= ko.computed(function() { return self.radioSelectedValue() == "other"; }); }; ko.applyBindings(new viewModel()); KBWB4DSJQU IUNM ϥδΦϘλϯͷબ͕ಉظ
ͦͷଞϑΥʔϜ <label> ɹ<input type="radio" name="area" value="okayama" data-bind="checked: radioSelectedValue”/> Ԭࢁࢢ </label>
ɾɾɾ <label> ɹ<input type="radio" name="area" value="other" data-bind="checked: radioSelectedValue”/> ɹͦͷଞ </label> <input type="text" data-bind="enable: selectedOther" placeholder="ͦͷଞͷํ~"/> function viewModel() { var self = this; self.radioSelectedValue = ko.observable("okayama"); self.selectedOther= ko.computed(function() { return self.radioSelectedValue() == "other"; }); }; ko.applyBindings(new viewModel()); KBWB4DSJQU IUNM ͦͷଞೖྗཝͷ༗ޮແޮ੍ޚ
knockout.js ڵຯ͍͖ͯ·ͨ͠ΑͶʁ
knockout.jsͱ
ओͳಛ ˞ຊޠυΩϡϝϯτ͔ΒҾ༻ w ΤϨΨϯτͳґଘτϥοΩϯά w σʔλϞσϧ͕มߋ͞ΕΔʹɺ6*ͷؔ࿈͚ΒΕͨ෦Λߋ৽͠·͢ɻ w એݴܕόΠϯσΟϯά w σʔλϞσϧͱ6*Λؔ࿈͚ΔɺγϯϓϧͰ໌֬ͳํ๏Ͱ͢ɻෳࡶͳಈత
6*ɺόΠϯσΟϯάɾίϯςΩετΛ֊Խͤ͞Δ͜ͱͰ؆୯ʹ࡞Ͱ ͖·͢ɻ w ֦ு͕༰қ w ৽ͨͳόΠϯσΟϯάͷΈΛ࣮͢Δ͜ͱɺ࠷খݶͷίʔυྔͰ ࣮ݱͰ͖·͢ɻ
ͦͷଞͷϝϦοτ ˞ຊޠυΩϡϝϯτ͔ΒҾ༻ w ७ਮͳ+BWB4DSJQUϥΠϒϥϦͰ͋Δ w αʔόαΠυ ɹΫϥΠΞϯταΠυͷٕज़Λબͼ·ͤ Μɻ w طଘͷ8FCΞϓϦέʔγϣϯʹೖͰ͖Δ
w ΞʔΩςΫνϟʹେ͖ͳมߋΛඞཁͱ͠·ͤΜɻ w ϝΠϯετϦʔϜͷϒϥβΛαϙʔτ w *&Ҏ߱ 'JSFGPYҎ߱ $ISPNF 4BGBSJ
ࠓճͷσϞ https://makowis.github.io/ okayamajs2016/
͏ͱָͰ͖Δॴ
ೖྗΛಉظ͍ͨ͠
ೖྗΛಉظ͢Δ <input type="text" data-bind="value: message” /> <br /> <span data-bind="text:
message”></span> function TestappViewModel() { var self = this; self.message = ko.observable("Hello World!!”); }; ko.applyBindings(new TestappViewModel()); KBWB4DSJQU IUNM ೖྗ͕ಉظ
ΫϦοΫʹରͯ͠Կ͔͍ͨ͠
ΫϦοΫͰΧϯτΞοϓ <span data-bind="text: numberOfClicks”></span> ճΫϦοΫ͠·ͨ͠ <button data-bind="click: incrementClickCounter” > ΫϦοΫ͍ͯͩ͘͠͞
</button> function TestappViewModel() { var self = this; self.numberOfClicks = ko.observable(0); self.incrementClickCounter = function() { var previousCount = self.numberOfClicks(); self.numberOfClicks(previousCount + 1); }; }; ko.applyBindings(new TestappViewModel()); KBWB4DSJQU IUNM ΧϯτΛಉظ
ΫϦοΫͰΧϯτΞοϓ <span data-bind="text: numberOfClicks”></span> ճΫϦοΫ͠·ͨ͠ <button data-bind="click: incrementClickCounter” > ΫϦοΫ͍ͯͩ͘͠͞
</button> function TestappViewModel() { var self = this; self.numberOfClicks = ko.observable(0); self.incrementClickCounter = function() { var previousCount = self.numberOfClicks(); self.numberOfClicks(previousCount + 1); }; }; ko.applyBindings(new TestappViewModel()); KBWB4DSJQU IUNM ΫϦοΫ࣌ͷΠϕϯτ ΧϯτΞοϓॲཧ
ྻʹೖͬͯΔσʔλΛදࣔ
ྻͷσʔλΛग़ྗ <ul data-bind="foreach: users” > <li> <span data-bind="text: name”><span/> <span
data-bind="text: type”><span/> </li> </ul> function TestappViewModel() { var self = this; self.users = ko.observableArray([ { name: "ଠ", type: "உ" }, { name: "ೋ", type: "࣍உ" }, { name: "Ֆࢠ", type: "ঁ" } ]); }; ko.applyBindings(new TestappViewModel()); KBWB4DSJQU IUNM දࣔ༻ͷྻσʔλ
ྻͷσʔλΛग़ྗ <ul data-bind="foreach: users” > <li> <span data-bind="text: name”><span/> <span
data-bind="text: type”><span/> </li> </ul> function TestappViewModel() { var self = this; self.users = ko.observableArray([ { name: "ଠ", type: "உ" }, { name: "ೋ", type: "࣍உ" }, { name: "Ֆࢠ", type: "ঁ" } ]); }; ko.applyBindings(new TestappViewModel()); KBWB4DSJQU IUNM ྻσʔλ<li>λάҎԼΛ ܁Γฦ͠ ܁Γฦ͠෦
ྻͷσʔλΛग़ྗ <ul data-bind="foreach: users” > <li> <span data-bind="text: name”><span/> <span
data-bind="text: type”><span/> </li> </ul> function TestappViewModel() { var self = this; self.users = ko.observableArray([ { name: "ଠ", type: "உ" }, { name: "ೋ", type: "࣍உ" }, { name: "Ֆࢠ", type: "ঁ" } ]); }; ko.applyBindings(new TestappViewModel()); KBWB4DSJQU IUNM ྻͷதͱϚοϐϯά
ৄ͍͠ใ ຊޠυΩϡϝϯτͰ http://kojs.sukobuto.com/
࣮ࡍͬͯΈͯͲ͏ͳͷʁ
ݸਓతʹ͍͍ͳͱࢥͬͯΔॴ w ը໘पΓͷ੍ޚʹಛԽͯ͠Δ w $44ͷ͚ସ͑ɺදࣔΓସָ͕͑ w +BWBTDSJQU༻ͷΫϥεΛ͚ͳ͍͍ͯ͘ w 8FCϑϨʔϜϫʔΫͷྖҬͱ՞͠ͳ͍
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠