Upgrade to Pro — share decks privately, control downloads, hide ads and more …

knockout.jsの紹介(第六回 okayama-js 勉強会)

Makoto Henmi
November 26, 2016

knockout.jsの紹介(第六回 okayama-js 勉強会)

第六回 okayama-js 勉強会で発表した内容です。
knockout.jsの機能を簡単に紹介して、使うと楽になるところを紹介しました。

デモURL:https://makowis.github.io/okayamajs2016/
デモのソースコード:https://github.com/makowis/okayamajs2016
スライドの写真素材:ぱくたそ https://www.pakutaso.com/

Makoto Henmi

November 26, 2016
Tweet

More Decks by Makoto Henmi

Other Decks in Programming

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