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

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

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

D8becf939cfb6d977394016667eca429?s=128

Makoto Henmi

March 02, 2017
Tweet

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