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

Transcript

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

2. ࣗݾ঺հ w ҳݟ
   ੣ ΁ΜΈ
   ·͜ͱ
   w 5XJUUFS!NBLP@XJT
   w גࣜձࣾΫϨΦϑʔΨ
   w

   ϑϩϯταʔόʔαΠυΤϯδχ ΞɾจষνΣοΫ܎

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

4. ԬࢁͷίϛϡχςΟ • ԬࢁRubyίϛϡχςΟ • ԬࢁJavaϢʔβʔձ • OITEC(Okayama IT Engineers Community)

   • okayama-js • தࠃ஍ํσʔλϕʔεษڧձ • ΦʔϓϯηϛφʔԬࢁ • Atlassian User Group தࠃ • ߹ಉษڧձ

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

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

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

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

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

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

11. knockout.jsͩͱ

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

13. ͦͷଞϑΥʔϜ <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 ϥδΦϘλϯͷબ୒஋͕ಉظ

14. ͦͷଞϑΥʔϜ <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 ͦͷଞೖྗཝͷ༗ޮແޮ੍ޚ

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

16. knockout.jsͱ͸

17. ओͳಛ௃
    ˞೔ຊޠυΩϡϝϯτ͔ΒҾ༻ w ΤϨΨϯτͳґଘτϥοΩϯά
    
    
    w σʔλϞσϧ͕มߋ͞ΕΔ౓ʹɺ6*ͷؔ࿈෇͚ΒΕͨ෦෼Λߋ৽͠·͢ɻ
    w એݴܕ
    όΠϯσΟϯά
    
    
    w σʔλϞσϧͱ6*Λؔ࿈෇͚ΔɺγϯϓϧͰ໌֬ͳํ๏Ͱ͢ɻෳࡶͳಈత

    6*΋ɺόΠϯσΟϯάɾίϯςΩετΛ֊૚Խͤ͞Δ͜ͱͰ؆୯ʹ࡞੒Ͱ ͖·͢ɻ
    w ֦ு͕༰қ
    
    
    w
    ৽ͨͳόΠϯσΟϯάͷ࢓૊ΈΛ࣮૷͢Δ͜ͱ΋ɺ࠷খݶͷίʔυྔͰ ࣮ݱͰ͖·͢ɻ

18. ͦͷଞͷϝϦοτ
    ˞೔ຊޠυΩϡϝϯτ͔ΒҾ༻ w ७ਮͳ
    +BWB4DSJQU
    ϥΠϒϥϦͰ͋Δ
    
    
    w αʔόαΠυ ɹΫϥΠΞϯταΠυͷٕज़Λબͼ·ͤ Μɻ
    w طଘͷ8FCΞϓϦέʔγϣϯʹ΋౤ೖͰ͖Δ
    
    
    

    w ΞʔΩςΫνϟʹେ͖ͳมߋΛඞཁͱ͠·ͤΜɻ
    w ϝΠϯετϦʔϜͷϒϥ΢βΛαϙʔτ
    
    
    w
    
    *&Ҏ߱
    'JSFGPYҎ߱
    $ISPNF
    4BGBSJ
    ౳
    

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

20. ࢖͏ͱָͰ͖Δॴ

21. ೖྗ஋Λಉظ͍ͨ͠

22. ೖྗ஋Λಉظ͢Δ <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 ೖྗ஋͕ಉظ

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

24. ΫϦοΫͰΧ΢ϯτΞοϓ <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 Χ΢ϯτ਺Λಉظ

25. ΫϦοΫͰΧ΢ϯτΞοϓ <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 ΫϦοΫ࣌ͷΠϕϯτ Χ΢ϯτΞοϓॲཧ

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

27. ഑ྻͷσʔλΛग़ྗ <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 දࣔ༻ͷ഑ྻσʔλ

28. ഑ྻͷσʔλΛग़ྗ <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>λάҎԼΛ ܁Γฦ͠ ܁Γฦ͠෦෼

29. ഑ྻͷσʔλΛग़ྗ <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 ഑ྻͷத਎ͱϚοϐϯά

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

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

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

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