Slide 1
Slide 1 text
knockout.jsͷհ
2017/2/25 Φʔϓϯηϛφʔ2017@ౡ
ҳݟ (@mako_wis)
Slide 2
Slide 2 text
ࣗݾհ
w ҳݟ ΜΈ·͜ͱ
w 5XJUUFS!NBLP@XJT
w גࣜձࣾΫϨΦϑʔΨ
w ϑϩϯταʔόʔαΠυΤϯδχ
ΞɾจষνΣοΫ
Slide 3
Slide 3 text
ࠓԬࢁ͔Βདྷ·ͨ͠
Slide 4
Slide 4 text
ԬࢁͷίϛϡχςΟ
• ԬࢁRubyίϛϡχςΟ
• ԬࢁJavaϢʔβʔձ
• OITEC(Okayama IT Engineers Community)
• okayama-js
• தࠃํσʔλϕʔεษڧձ
• ΦʔϓϯηϛφʔԬࢁ
• Atlassian User Group தࠃ
• ߹ಉษڧձ
Slide 5
Slide 5 text
knockout.jsͷհ
2017/2/25 Φʔϓϯηϛφʔ2017@ౡ
ҳݟ (@mako_wis)
Slide 6
Slide 6 text
࠷ۙͬͯΔJSपΓͷٕज़
• TypeScript
• ੩తܕ͖ݴޠͬΆ͔͚͘Δ
• knockout.js
• ࠓͷ
Slide 7
Slide 7 text
JavaScriptͰ
໘͍͘͞ͳͱࢥ͏͜ͱ
Slide 8
Slide 8 text
ೖྗʹԠͯ͡දࣔΛม͑Δ
Slide 9
Slide 9 text
ͦͷଞ͕͋ΔϑΥʔϜ
Slide 10
Slide 10 text
࡞Δͷ໘͍͘͞Ͱ͢ΑͶʁ
Slide 11
Slide 11 text
knockout.jsͩͱ
Slide 12
Slide 12 text
ͦͷଞϑΥʔϜ
ɹ
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
Slide 13
Slide 13 text
ͦͷଞϑΥʔϜ
ɹ
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
ϥδΦϘλϯͷબ͕ಉظ
Slide 14
Slide 14 text
ͦͷଞϑΥʔϜ
ɹ
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
ͦͷଞೖྗཝͷ༗ޮແޮ੍ޚ
Slide 15
Slide 15 text
knockout.js
ڵຯ͍͖ͯ·ͨ͠ΑͶʁ
Slide 16
Slide 16 text
knockout.jsͱ
Slide 17
Slide 17 text
ओͳಛ
˞ຊޠυΩϡϝϯτ͔ΒҾ༻
w ΤϨΨϯτͳґଘτϥοΩϯά
w σʔλϞσϧ͕มߋ͞ΕΔʹɺ6*ͷؔ࿈͚ΒΕͨ෦Λߋ৽͠·͢ɻ
w એݴܕόΠϯσΟϯά
w σʔλϞσϧͱ6*Λؔ࿈͚ΔɺγϯϓϧͰ໌֬ͳํ๏Ͱ͢ɻෳࡶͳಈత
6*ɺόΠϯσΟϯάɾίϯςΩετΛ֊Խͤ͞Δ͜ͱͰ؆୯ʹ࡞Ͱ
͖·͢ɻ
w ֦ு͕༰қ
w ৽ͨͳόΠϯσΟϯάͷΈΛ࣮͢Δ͜ͱɺ࠷খݶͷίʔυྔͰ
࣮ݱͰ͖·͢ɻ
Slide 18
Slide 18 text
ͦͷଞͷϝϦοτ
˞ຊޠυΩϡϝϯτ͔ΒҾ༻
w ७ਮͳ+BWB4DSJQUϥΠϒϥϦͰ͋Δ
w αʔόαΠυ
ɹΫϥΠΞϯταΠυͷٕज़Λબͼ·ͤ
Μɻ
w طଘͷ8FCΞϓϦέʔγϣϯʹೖͰ͖Δ
w ΞʔΩςΫνϟʹେ͖ͳมߋΛඞཁͱ͠·ͤΜɻ
w ϝΠϯετϦʔϜͷϒϥβΛαϙʔτ
w *&Ҏ߱
'JSFGPYҎ߱
$ISPNF
4BGBSJ
Slide 19
Slide 19 text
ࠓճͷσϞ
https://makowis.github.io/
okayamajs2016/
Slide 20
Slide 20 text
͏ͱָͰ͖Δॴ
Slide 21
Slide 21 text
ೖྗΛಉظ͍ͨ͠
Slide 22
Slide 22 text
ೖྗΛಉظ͢Δ
function TestappViewModel() {
var self = this;
self.message = ko.observable("Hello World!!”);
};
ko.applyBindings(new TestappViewModel());
KBWB4DSJQU
IUNM
ೖྗ͕ಉظ
Slide 23
Slide 23 text
ΫϦοΫʹରͯ͠Կ͔͍ͨ͠
Slide 24
Slide 24 text
ΫϦοΫͰΧϯτΞοϓ
ΫϦοΫ͍ͯͩ͘͠͞
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
ΧϯτΛಉظ
Slide 25
Slide 25 text
ΫϦοΫͰΧϯτΞοϓ
ΫϦοΫ͍ͯͩ͘͠͞
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
ΫϦοΫ࣌ͷΠϕϯτ
ΧϯτΞοϓॲཧ
Slide 26
Slide 26 text
ྻʹೖͬͯΔσʔλΛදࣔ
Slide 27
Slide 27 text
ྻͷσʔλΛग़ྗ
Slide 28
Slide 28 text
ྻͷσʔλΛग़ྗ
-
λάҎԼΛ ܁Γฦ͠
܁Γฦ͠෦
Slide 29
Slide 29 text
ྻͷσʔλΛग़ྗ
Slide 30
Slide 30 text
ৄ͍͠ใ
ຊޠυΩϡϝϯτͰ
http://kojs.sukobuto.com/
Slide 31
Slide 31 text
࣮ࡍͬͯΈͯͲ͏ͳͷʁ
Slide 32
Slide 32 text
ݸਓతʹ͍͍ͳͱࢥͬͯΔॴ
w ը໘पΓͷ੍ޚʹಛԽͯ͠Δ
w $44ͷ͚ସ͑ɺදࣔΓସָ͕͑
w +BWBTDSJQU༻ͷΫϥεΛ͚ͳ͍͍ͯ͘
w 8FCϑϨʔϜϫʔΫͷྖҬͱ՞͠ͳ͍
Slide 33
Slide 33 text
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠