knockout.jsの紹介（第六回 okayama-js 勉強会）

第六回 okayama-js 勉強会で発表した内容です。
knockout.jsの機能を簡単に紹介して、使うと楽になるところを紹介しました。

デモURL:https://makowis.github.io/okayamajs2016/
デモのソースコード：https://github.com/makowis/okayamajs2016
スライドの写真素材：ぱくたそ https://www.pakutaso.com/

Transcript

1. knockout.js ୈ࿡ճ okayama-js ษڧձ 2016/11/19 ҳݟ ੣(@mako_wis)
2. ࣗݾ঺հ w ҳݟ
   ੣ ΁ΜΈ
   ·͜ͱ
   w 5XJUUFS!NBLP@XJT
   w גࣜձࣾΫϨΦϑʔΨ
   w ϑϩϯταʔόʔαΠυΤϯδχ ΞɾจষνΣοΫ܎
3. ࠷ۙ࢖ͬͯΔJSपΓͷٕज़ • TypeScript • ੩తܕ෇͖ݴޠͬΆ͔͚͘Δ • knockout.js • ࠓ೔ͷ࿩
4. JavaScriptͰ ໘౗͍͘͞ͳͱࢥ͏͜ͱ
5. ೖྗ஋ʹԠͯ͡දࣔΛม͑Δ
6. ͦͷଞ͕͋ΔϑΥʔϜ
7. ࡞Δͷ໘౗͍͘͞Ͱ͢ΑͶʁ
8. knockout.jsͩͱ
9. ͦͷଞϑΥʔϜ <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
10. knockout.js ڵຯ෸͍͖ͯ·ͨ͠ΑͶʁ
11. knockout.jsͱ͸
12. ओͳಛ௃
    ˞೔ຊޠυΩϡϝϯτ͔ΒҾ༻ w ΤϨΨϯτͳґଘτϥοΩϯά
    
    
    w σʔλϞσϧ͕มߋ͞ΕΔ౓ʹɺ6*ͷؔ࿈෇͚ΒΕͨ෦෼Λߋ৽͠·͢ɻ
    w એݴܕ
    όΠϯσΟϯά
    
    
    w σʔλϞσϧͱ6*Λؔ࿈෇͚ΔɺγϯϓϧͰ໌֬ͳํ๏Ͱ͢ɻෳࡶͳಈత 6*΋ɺόΠϯσΟϯάɾίϯςΩετΛ֊૚Խͤ͞Δ͜ͱͰ؆୯ʹ࡞੒Ͱ ͖·͢ɻ
    w ֦ு͕༰қ
    
    
    w
    ৽ͨͳόΠϯσΟϯάͷ࢓૊ΈΛ࣮૷͢Δ͜ͱ΋ɺ࠷খݶͷίʔυྔͰ ࣮ݱͰ͖·͢ɻ
13. ͦͷଞͷϝϦοτ
    ˞೔ຊޠυΩϡϝϯτ͔ΒҾ༻ w ७ਮͳ
    +BWB4DSJQU
    ϥΠϒϥϦͰ͋Δ
    
    
    w αʔόαΠυ ɹΫϥΠΞϯταΠυͷٕज़Λબͼ·ͤ Μɻ
    w طଘͷ8FCΞϓϦέʔγϣϯʹ΋౤ೖͰ͖Δ
    
    
    w ΞʔΩςΫνϟʹେ͖ͳมߋΛඞཁͱ͠·ͤΜɻ
    w ϝΠϯετϦʔϜͷϒϥ΢βΛαϙʔτ
    
    
    w
    
    *&Ҏ߱
    'JSFGPYҎ߱
    $ISPNF
    4BGBSJ
    ౳
    
14. ࢖͏ͱָͰ͖Δॴ
15. ೖྗ஋Λಉظ͍ͨ͠
16. ೖྗ஋Λಉظ͢Δ <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
17. σϞ https://makowis.github.io/okayamajs2016/
18. ΫϦοΫʹରͯ͠Կ͔͍ͨ͠
19. ΫϦοΫͰΧ΢ϯτΞοϓ <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
20. σϞ https://makowis.github.io/okayamajs2016/
21. ഑ྻʹೖͬͯΔσʔλΛදࣔ
22. ഑ྻͷσʔλΛग़ྗ <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
23. σϞ https://makowis.github.io/okayamajs2016/
24. ৄ͍͠৘ใ͸ ೔ຊޠυΩϡϝϯτͰ http://kojs.sukobuto.com/
25. ࣮ࡍ࢖ͬͯΈͯͲ͏ͳͷʁ
26. ݸਓతʹ͍͍ͳͱࢥͬͯΔॴ w ը໘पΓͷ੍ޚʹಛԽͯ͠Δ
    w $44ͷ෇͚ସ͑ɺදࣔ੾Γସָ͕͑
    w +BWBTDSJQU༻ͷΫϥεΛ෇͚ͳ͍͍ͯ͘
    w 8FCϑϨʔϜϫʔΫͷྖҬͱ݌՞͠ͳ͍
27. ͥͻ࢖ͬͯΈ͍ͯͩ͘͞
28. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠