Slide 1
Slide 1 text
Promiseશ߈ུ
ळͷJavaScriptࡇɹin mixi
ʙळͷJavaScriptऩ֭ࡇʙ
2016/10/15
ɹ༎հ
Slide 2
Slide 2 text
ࣗݾհ
ɹ༎հ
ϓϩάϥϚʔͰ͢
ීஈjavascriptɺ
javaͬͯ·͢
Slide 3
Slide 3 text
ΞδΣϯμ
ϓϩϩʔά
Promiseͱඇಉظॲཧͷઆ໌
Promiseͷجຊతͳ͍ํ
Promiseͷಋೖํ๏
·ͱΊ
Slide 4
Slide 4 text
Promiseͱ͍͑
܅ͨͪͬͺΓ
ϓϩϛεͩ
Ͱ͕͢
Slide 5
Slide 5 text
jsͰͷPromiseͱ
ඇಉظॲཧΛ
εϚʔτʹॻ͘Έ
Slide 6
Slide 6 text
ͨͩɺॳ৺ऀʹͱͬͯ
ϋʔυϧ͕ߴͦ͏ͳͷࣄ࣮
Slide 7
Slide 7 text
େৎɺ͜ͷػձʹ
શ߈ུͪ͠Ό͍·͠ΐ͏
Slide 8
Slide 8 text
ΞδΣϯμ
ϓϩϩʔά
Promiseͱඇಉظॲཧͷઆ໌
Promiseͷجຊతͳ͍ํ
Promiseͷಋೖํ๏
·ͱΊ
Slide 9
Slide 9 text
Promiseͱ
ඇಉظॲཧΛεϚʔτʹॻͨ͘ΊͷΈͰ͢
ίʔϧόοΫࠈΛղফͰ͖·͢
ඇಉظ͕ΒΈͷΤϥʔϋϯυϦϯάΛεϚʔτ
ʹ͔͚·͢
Slide 10
Slide 10 text
ඇಉظॲཧͱ
processA processB
αʔόϦΫΤετͳͲ
͕͔͔࣌ؒΔॲཧ
Slide 11
Slide 11 text
ඇಉظॲཧͱ
processA processB
αʔόϦΫΤετͳͲ
͕͔͔࣌ؒΔॲཧ
processA();
processB();
Slide 12
Slide 12 text
ඇಉظॲཧͱ
processA processB
αʔόϦΫΤετͳͲ
͕͔͔࣌ؒΔॲཧ
processA();
processB();
͜͏ॻ͚ͳ͍
Slide 13
Slide 13 text
ඇಉظॲཧͱ
processA(function() {
processB();
});
࣮ࡍʹ͜͏ॻ͘
processA͕ऴΘͬͨ͋ͱʹ࣮ߦ͢ΔؔΛ͢
ˢ͜͏͍͏ͷΛίʔϧόοΫؔͱ͍͏
Slide 14
Slide 14 text
ΞδΣϯμ
ϓϩϩʔά
Promiseͱඇಉظॲཧͷઆ໌
Promiseͷجຊతͳ͍ํ
Promiseͷಋೖํ๏
·ͱΊ
Slide 15
Slide 15 text
ྫ
processA
Լਤͷॱ൪ͰɺඇಉظॲཧΛߦ͏ͱ͢Δ
͜ΕΛίʔϧόοΫɺPromiseͰॻ͘
processB processC processD
Slide 16
Slide 16 text
ίʔϧόοΫͰॻ͍ͨ߹
processA(function() {
processB(function() {
processC(function() {
processD();
});
});
});
ؔΛݺͿͨͼʹωετ͕ਂ͘ͳΔ
͜ΕͰذྫ֎ॲཧ͕ೖΔͱࢮʹͦ͏
͜͏͍͏ͷΛίʔϧόοΫࠈͱ͍͏
Slide 17
Slide 17 text
PromiseͰॻ͍ͨ߹
processA()
.then(function() {
return processB();
}).then(function() {
return processC();
}).then(function() {
return processD();
});
ωετ1ஈ֊ਂ͘ͳΔ͕ɺͦΕҎ্ਂ͘ͳΒͳ͍
ίʔϧόοΫࠈΛ͋ΔఔࠀͰ͖͍ͯΔ
Slide 18
Slide 18 text
ൺֱͯ͠Έ·͠ΐ͏
processA(function() {
processB(function() {
processC(function() {
processD();
});
});
});
processA()
.then(function() {
return processB();
}).then(function() {
return processC();
}).then(function() {
return processD();
});
Promiseͷํ͕͔Γ͍͢
Slide 19
Slide 19 text
ΞϩʔؔΛ͏ͱ
ͬͱεϚʔτʹͳΔ
processA()
.then(() => processB())
.then(() => processC())
.then(() => processD());
Slide 20
Slide 20 text
ɹྫ֎ॲཧεϚʔτʹॻ͚Δ
processA()
.then(() => processB())
.then(() => processC())
.then(() => processD())
.catch(() => {
//ྫ֎ॲཧ
})
ͲͷؔͰྫ֎͕ग़ͯɺcatchʹඈΜͰऴྃ͢Δ
try-catchΈ͍ͨͳ͍ํ͕Ͱ͖Δ
Slide 21
Slide 21 text
ΞδΣϯμ
ϓϩϩʔά
Promiseͱඇಉظॲཧͷઆ໌
Promiseͷجຊతͳ͍ํ
Promiseͷಋೖํ๏
·ͱΊ
Slide 22
Slide 22 text
Promiseͷಋೖํ๏
ຆͲͷϒϥβͰඪ४උͯ͠Δ
ϥΠϒϥϦΛΠϯετʔϧ͢Δඞཁͳ͠
͕ؔPromiseΦϒδΣΫτΛฦ͢Α͏ʹ͢Δ
fetch apiͳͲൺֱత৽͍͠ͷPromiseΛฦ͢
طଘͷίʔϧόοΫؔܥͷͷΛPromiseԽ͢Δ
ํ๏ޙड़
Slide 23
Slide 23 text
http:/
/caniuse.com/#search=Promise
PromiseͷରԠঢ়گ
Slide 24
Slide 24 text
IEҎ֎……
·͞ʹ
ͱ͍͏ঢ়ଶ
͜ΜͳͷͲ͜ʹͰ
͍ΔͩΖ͏
Slide 25
Slide 25 text
Ͳ͜ʹͰ͍Δ
܅ͨͪͬͺΓPromiseͩ
ૉΒ͍͠ʂʂ
Slide 26
Slide 26 text
طଘؔΛPromiseԽ
// ݩͷؔ
function processA(cb) {
// ͕͔͔࣌ؒΔॲཧ
cb();
}
// PromiseԽ
function processAWithPromise() {
return Promise((resolve, reject) => {
processA(resolve);
}));
}
Slide 27
Slide 27 text
طଘؔΛPromiseԽ
// PromiseԽ
function processAWithPromise() {
return Promise((resolve, reject => {
processA(resolve);
}));
}
શମΛPromiseͰׅΔ
ݩͷؔͷίʔϧόοΫʹresolveΛ͢
Slide 28
Slide 28 text
༨ஊ
Slide 29
Slide 29 text
কདྷతʹඇಉظॲཧ
ͬͱָʹͳΓ·͢
async function main() {
await processA();
await processB();
await processC();
await processD();
}
͍ΘΏΔasyncɺawait
Slide 30
Slide 30 text
ͨͩ͠asyncɺawaitΛ͏ʹ
͕ؔPromiseΛฦ͢͜ͱ͕݅Ͱ͢
܅ͨͪͬͺΓ
ϓϩϛεͩ
Slide 31
Slide 31 text
ΞδΣϯμ
ϓϩϩʔά
Promiseͱඇಉظॲཧͷઆ໌
Promiseͷجຊతͳ͍ํ
Promiseͷಋೖํ๏
·ͱΊ
Slide 32
Slide 32 text
·ͱΊ
PromiseͰඇಉظॲཧΛεϚʔτʹॻ͚Δ
PromiseຆͲͷϒϥβͰඪ४උ
asyncɺawaitΛ͏ҝʹPromiseԽ͕ඞཁ
Slide 33
Slide 33 text
͝੩ௌ͋Γ͕ͱ͏
͍͟͝·ͨ͠