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

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

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. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠