$30 off During Our Annual Pro Sale. View Details »

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

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

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

Makoto Henmi

March 02, 2017
Tweet

More Decks by Makoto Henmi

Other Decks in Programming

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