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)
   

   View Slide

2. ࣗݾ঺հ
   w ҳݟ੣ ΁ΜΈ·͜ͱ
   
   w 5XJUUFS!NBLP@XJT
   w גࣜձࣾΫϨΦϑʔΨ
   w ϑϩϯταʔόʔαΠυΤϯδχ
   ΞɾจষνΣοΫ܎
   

   View Slide

3. ࠷ۙ࢖ͬͯΔJSपΓͷٕज़
   • TypeScript
   • ੩తܕ෇͖ݴޠͬΆ͔͚͘Δ
   • knockout.js
   • ࠓ೔ͷ࿩
   

   View Slide

4. JavaScriptͰ
   ໘౗͍͘͞ͳͱࢥ͏͜ͱ
   

   View Slide

5. ೖྗ஋ʹԠͯ͡දࣔΛม͑Δ
   

   View Slide

6. ͦͷଞ͕͋ΔϑΥʔϜ
   

   View Slide

7. ࡞Δͷ໘౗͍͘͞Ͱ͢ΑͶʁ
   

   View Slide

8. knockout.jsͩͱ
   

   View Slide

9. ͦͷଞϑΥʔϜ
   
   ɹ
   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
   

   View Slide

10. knockout.js
    ڵຯ෸͍͖ͯ·ͨ͠ΑͶʁ
    

    View Slide

11. knockout.jsͱ͸
    

    View Slide

12. ओͳಛ௃
    ˞೔ຊޠυΩϡϝϯτ͔ΒҾ༻
    w ΤϨΨϯτͳґଘτϥοΩϯά
    w σʔλϞσϧ͕มߋ͞ΕΔ౓ʹɺ6*ͷؔ࿈෇͚ΒΕͨ෦෼Λߋ৽͠·͢ɻ
    w એݴܕόΠϯσΟϯά
    w σʔλϞσϧͱ6*Λؔ࿈෇͚ΔɺγϯϓϧͰ໌֬ͳํ๏Ͱ͢ɻෳࡶͳಈత
    6*΋ɺόΠϯσΟϯάɾίϯςΩετΛ֊૚Խͤ͞Δ͜ͱͰ؆୯ʹ࡞੒Ͱ
    ͖·͢ɻ
    w ֦ு͕༰қ
    w ৽ͨͳόΠϯσΟϯάͷ࢓૊ΈΛ࣮૷͢Δ͜ͱ΋ɺ࠷খݶͷίʔυྔͰ
    ࣮ݱͰ͖·͢ɻ
    

    View Slide

13. ͦͷଞͷϝϦοτ
    ˞೔ຊޠυΩϡϝϯτ͔ΒҾ༻
    w ७ਮͳ+BWB4DSJQUϥΠϒϥϦͰ͋Δ
    w αʔόαΠυ ɹΫϥΠΞϯταΠυͷٕज़Λબͼ·ͤ
    Μɻ
    w طଘͷ8FCΞϓϦέʔγϣϯʹ΋౤ೖͰ͖Δ
    w ΞʔΩςΫνϟʹେ͖ͳมߋΛඞཁͱ͠·ͤΜɻ
    w ϝΠϯετϦʔϜͷϒϥ΢βΛαϙʔτ
    w *&Ҏ߱ 'JSFGPYҎ߱ $ISPNF 4BGBSJ౳
    
    

    View Slide

14. ࢖͏ͱָͰ͖Δॴ
    

    View Slide

15. ೖྗ஋Λಉظ͍ͨ͠
    

    View Slide

16. ೖྗ஋Λಉظ͢Δ
    
    function TestappViewModel() {
    var self = this;
    

    self.message = ko.observable("Hello World!!”);
    };
    ko.applyBindings(new TestappViewModel());
    KBWB4DSJQU
    IUNM
    

    View Slide

17. σϞ
    https://makowis.github.io/okayamajs2016/
    

    View Slide

18. ΫϦοΫʹରͯ͠Կ͔͍ͨ͠
    

    View Slide

19. ΫϦοΫͰΧ΢ϯτΞοϓ
    

    ΫϦοΫ͍ͯͩ͘͠͞
    
    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
    

    View Slide

20. σϞ
    https://makowis.github.io/okayamajs2016/
    

    View Slide

21. ഑ྻʹೖͬͯΔσʔλΛදࣔ
    

    View Slide

22. ഑ྻͷσʔλΛग़ྗ
    
    { name: "ೋ࿠", type: "࣍உ" },

    { name: "Ֆࢠ", type: "௕ঁ" }

    ]);
    };
    ko.applyBindings(new TestappViewModel());
    KBWB4DSJQU
    IUNM
    

    View Slide

23. σϞ
    https://makowis.github.io/okayamajs2016/
    

    View Slide

24. ৄ͍͠৘ใ͸
    ೔ຊޠυΩϡϝϯτͰ
    http://kojs.sukobuto.com/
    

    View Slide

25. ࣮ࡍ࢖ͬͯΈͯͲ͏ͳͷʁ
    

    View Slide

26. ݸਓతʹ͍͍ͳͱࢥͬͯΔॴ
    w ը໘पΓͷ੍ޚʹಛԽͯ͠Δ
    w $44ͷ෇͚ସ͑ɺදࣔ੾Γସָ͕͑
    w +BWBTDSJQU༻ͷΫϥεΛ෇͚ͳ͍͍ͯ͘
    w 8FCϑϨʔϜϫʔΫͷྖҬͱ݌՞͠ͳ͍
    

    View Slide

27. ͥͻ࢖ͬͯΈ͍ͯͩ͘͞
    

    View Slide

28. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide