knockout.jsの紹介（オープンセミナー2017@広島）

オープンセミナー2017@広島で発表した資料です。
knockout.jsの簡単な紹介です。

Transcript

1. knockout.jsͷ঺հ
   2017/2/25 Φʔϓϯηϛφʔ2017@޿ౡ
   ҳݟ ੣(@mako_wis)
   

   View Slide

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

   View Slide

3. ࠓ೔͸Ԭࢁ͔Βདྷ·ͨ͠
   

   View Slide

4. ԬࢁͷίϛϡχςΟ
   • ԬࢁRubyίϛϡχςΟ
   • ԬࢁJavaϢʔβʔձ
   • OITEC(Okayama IT Engineers Community)
   • okayama-js
   • தࠃ஍ํσʔλϕʔεษڧձ
   • ΦʔϓϯηϛφʔԬࢁ
   • Atlassian User Group தࠃ
   • ߹ಉษڧձ
   

   View Slide

5. knockout.jsͷ঺հ
   2017/2/25 Φʔϓϯηϛφʔ2017@޿ౡ
   ҳݟ ੣(@mako_wis)
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

11. knockout.jsͩͱ
    

    View Slide

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

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

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

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

    View Slide

16. knockout.jsͱ͸
    

    View Slide

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

    View Slide

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

    View Slide

19. ࠓճͷσϞ
    https://makowis.github.io/
    okayamajs2016/
    

    View Slide

20. ࢖͏ͱָͰ͖Δॴ
    

    View Slide

21. ೖྗ஋Λಉظ͍ͨ͠
    

    View Slide

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

    self.message = ko.observable("Hello World!!”);
    };
    ko.applyBindings(new TestappViewModel());
    KBWB4DSJQU
    IUNM
    ೖྗ஋͕ಉظ
    

    View Slide

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

    View Slide

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

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

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

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

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

    View Slide

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

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

    ]);
    };
    ko.applyBindings(new TestappViewModel());
    KBWB4DSJQU
    IUNM
    දࣔ༻ͷ഑ྻσʔλ
    

    View Slide

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

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

    ]);
    };
    ko.applyBindings(new TestappViewModel());
    KBWB4DSJQU
    IUNM
    ഑ྻσʔλ෼λάҎԼΛ ܁Γฦ͠
    ܁Γฦ͠෦෼
    

    View Slide

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

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

    ]);
    };
    ko.applyBindings(new TestappViewModel());
    KBWB4DSJQU
    IUNM
    ഑ྻͷத਎ͱϚοϐϯά
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide