非同期プログラミングPromiseに入門

JavaScriptの非同期プログラミングの手法の一つ、Promiseを説明したスライド。HTML5ビギナーズの第12回の登壇内容です。

Transcript

1. ࣍ੈ୅ඇಉظϓϩάϥϛϯά Promise Yohei Munesada
2. फఆ
   ༸ฏ
   5XJUUFS
   
   !ZPIFJ.VOF
   #MPH
   
   IUUQXXXZPIFJNOFU
3. ಡॻͷ͓࣌ؒͰ͢
   CZ
   "NFCB
4. ࠓ೔͸ Promise Λѻ͍·͢
5. ୤ϏΪφʔͷϙΠϯτ  1SPNJTFͷ಺༰Λཧղ͍ͯ͠Δ
    1SPNJTFΛ༻͍ͨ࠷৽࢓༷͕ಡΊΔ
    K2VFSZ%FGFSSFEΛ༻͍ͨ1SPNJTFϓϩάϥϛϯά͕Ͱ͖Δ
6. ୤ϏΪφʔͷϙΠϯτ  1SPNJTFͷ಺༰Λཧղ͍ͯ͠Δ
    1SPNJTFΛ༻͍ͨ࠷৽࢓༷͕ಡΊΔ
    K2VFSZ%FGFSSFEΛ༻͍ͨ1SPNJTFϓϩάϥϛϯά͕Ͱ͖Δ 1SPNJTFʹΑΔඇಉظϓϩάϥϛϯά͕ॻ͚ΔಡΊΔ
7. Let’s Start!!
8. Promise ͬͯͳʹʁ
9. Promise ඇಉظϓϩάϥϛϯάͷ΍Γํ
10. $BMMCBDLͰඇಉظϓϩάϥϛϯά doAsync1(function (v1) { doAsync2(function (v2) { doAsync3(function (v3) { doAsync4(function (v4) { console.debug(v4); }); }); }); });
11. 1SPNJTFͰඇಉظϓϩάϥϛϯά doAsync1() .then(doAsync2) .then(doAsync3) .then(doAsync4) .then(function (v4) { console.debug(v4); });
12. doAsync1(function(v1){ doAsync2(function(v2){ doAsync3(function(v3){ doAsync4(function(v4){ console.debug(v4); }); }); }); }); doAsync1() .then(doAsync2) .then(doAsync3) .then(doAsync4) .then(function(v4){ console.debug(v4); }); 1SPNJTFͷ৔߹ $BMMCBDLͷ৔߹
13. 1SPNJTFͷར఺ 㾎 ඇಉظϓϩάϥϛϯάͷ৽͍͠ॻ͖ํ
    㾎 Τϥʔॲཧ͕͍͍ײ͡ʹॻ͚Δʢޙड़ʣ
    㾎 ύϥϨϧॲཧ΋͍͍ײ͡ʹॻ͚Δʢޙड़ʣ
    㾎 ඇಉظॲཧ͕࣮ߦࡁ͔൱͔ؾʹ͠ͳͯ͘ྑ͍ʢޙड़ʣ
14. Promise ʙ
    جૅฤ
    ʙ
15. // Promiseͷ࡞੒ var p = new Promise(function (resolve, reject) {}); // ੒ޭ࣌ͷॲཧ p.then(function (value) {}); // ࣦഊ࣌ͷॲཧ p.catch(function (reason) {}); ֓ཁ
    
    ͭͷίʔυ
16. Pending Resolved Rejected ஫ҙ
    ࢓্༷͸GVMpMMFE
    SFKFDUFE
    QFOEJOH
    TFUUMFEͰ͕͢ɺ෼͔Γ΍͘͢ݴ͍׵͑Λ͍ͯ͠·͢ɻ ·ͩ੒ޭࣦഊ͍ͯ͠ͳ͍ ੒ޭͨ͠ ࣦഊͨ͠ ֓ཁ
    
    ͭͷঢ়ଶ
17. Pending Resolved Rejected ஫ҙ
    ࢓্༷͸GVMpMMFE
    SFKFDUFE
    QFOEJOH
    TFUUMFEͰ͕͢ɺ෼͔Γ΍͘͢ݴ͍׵͑Λ͍ͯ͠·͢ɻ ·ͩ੒ޭࣦഊ͍ͯ͠ͳ͍ ੒ޭͨ͠ ࣦഊͨ͠ ֓ཁ
    
    ͭͷঢ়ଶ
18. Pending Resolved Rejected ஫ҙ
    ࢓্༷͸GVMpMMFE
    SFKFDUFE
    QFOEJOH
    TFUUMFEͰ͕͢ɺ෼͔Γ΍͘͢ݴ͍׵͑Λ͍ͯ͠·͢ɻ ·ͩ੒ޭࣦഊ͍ͯ͠ͳ͍ ੒ޭͨ͠ ࣦഊͨ͠ ֓ཁ
    
    ͭͷঢ়ଶ
19. Pending Resolved Rejected ஫ҙ
    ࢓্༷͸GVMpMMFE
    SFKFDUFE
    QFOEJOH
    TFUUMFEͰ͕͢ɺ෼͔Γ΍͘͢ݴ͍׵͑Λ͍ͯ͠·͢ɻ ·ͩ੒ޭࣦഊ͍ͯ͠ͳ͍ ੒ޭͨ͠ ࣦഊͨ͠ ֓ཁ
    
    ͭͷঢ়ଶ
20. var p = new Promise(function (resolve, reject) { // Կ΋͍ͯ͠ͳ͍ }); Pending
21. // resolveͰ੒ޭ var p = new Promise(function (resolve, reject) { resolve(1); }); // ੒ޭͨ͠Βthen͕ݺ͹ΕΔ p.then(function (value) { console.log(value); // 1 }); Pending => Resolved
22. Pending => Rejected // rejectͰࣦഊ var p = new Promise(function (resolve, reject) { rejected(‘error is occurred’); }); // ࣦഊͨ͠Βcatch͕ݺ͹ΕΔ p.catch(function (error) { console.log(error); // ‘error is occurred’ });
23. var p = new Promise(function (resolve, reject) { var img = new Image(); img.src = ‘./rss.png'; img.onload = function () {resolve(this);} image.onerror = function () {reject('fail');} }); p.then(function (image) { console.debug(image); }); p.catch(function (reason) { console.debug(reason); }); ࣮ફαϯϓϧ
24. Promise ʙ
    جૅฤᶄ
    ʙ
25. UIFO͸νΣʔϯͰ͖Δ doAsync1() .then(doAsync2) .then(doAsync3) .then(doAsync4) .then(function(v4){ console.debug(v4); });
26. get(‘./book.json’) .then(function (responseText) { return JSON.parse(responseText); }).then(function (book) { console.log(‘book is JSON!!!’, book); }); UIFO͸νΣʔϯͰ͖Δ
    ᶃ஋Λฦ٫͢Δ
27. getJson(‘./book.json’).then(function (book) { return new Promise (function (resolve, reject) { var image = new Image(); image.src = book.imageUrl; image.onload = function () {resolve(this)}; }); }).then (function (image) { console.log(‘image:’, image); }); UIFO͸νΣʔϯͰ͖Δ
    ᶄ1SPNJTFΛฦ٫͢Δ
28. Promise ʙ
    Ԡ༻ฤᶃ
    ʙ
29. 1SPNJTFͷར఺ 㾎 ඇಉظϓϩάϥϛϯάͷ৽͍͠ॻ͖ํ
    㾎 Τϥʔॲཧ͕͍͍ײ͡ʹॻ͚Δʢޙड़ʣ
    㾎 ύϥϨϧॲཧ΋͍͍ײ͡ʹॻ͚Δʢޙड़ʣ
    㾎 ඇಉظॲཧ͕࣮ߦࡁ͔൱͔ؾʹ͠ͳͯ͘ྑ͍ʢޙड़ʣ
30. ᶃ
    ՚ྷͳΤϥʔϋϯυϦϯά
    
    $BMMCBDLฤ doAsync1 (function (result) { doAsync2 (function (result) { doAsync3 (function (result) { finishAction(); }); }); });
31. ᶃ
    ՚ྷͳΤϥʔϋϯυϦϯά
    
    $BMMCBDLฤ doAsync1 (function (result) { if (isError(result)) treatError(); doAsync2 (function (result) { if (isError(result)) treatError(); doAsync3 (function (result) { if (isError(result)) treatError(); finishAction(); }); }); }); Τϥʔॲཧ Τϥʔॲཧ Τϥʔॲཧ
32. ᶃ
    ՚ྷͳΤϥʔϋϯυϦϯά
    
    1SPNJTFฤ doAsync1() .then(doAsync2) .then(doAsync3) .then(finishAction) .catch(treatError); // doAsync1ͳͲ͕PromiseΛฦ͢Α͏ʹ࣮૷͢Ε͹ // ্هͷΑ͏ʹγϯϓϧʹͳΓ // Τϥʔॲཧ΋࠷ޙʹ1ͭॻ͚ͩ͘Ͱྑ͘ͳΔ
33. ᶄ
    ՚ྷͳύϥϨϧॲཧ
    
    $BMMCBDLฤ doAsync1 doAsync2 finishAction EP"TZODͷॲཧΛ଴͔ͬͯΒɺ
    pOJTI"DUJPOΛݺͿ
34. ᶄ
    ՚ྷͳύϥϨϧॲཧ
    
    $BMMCBDLฤ var results =[], numOfAction = 2; doAsync1 (function (result) { results.push(result); if (results.length === numOfAction) finishAction(); }); doAsync2 (function (result) { results.push(result); if (results.length === numOfAction) finishAction(); });
35. ᶄ
    ՚ྷͳύϥϨϧॲཧ
    
    1SPNJTFฤ Promise .all([doAsync1(), doAsync2()] .then(finishAction); // doAsync1ͱdoAsync2ΛPromise࣮૷ʹͯ͠ //ʮPromise.allʯΛ༻͍Δ͜ͱͰ // ෳ਺ͷPromiseͷύϥϨϧ࣮ߦͱ // ͦͷޙͷ׬ྃॲཧΛ៉ྷʹهड़͢Δ͜ͱ͕Ͱ͖Δ
36. ᶅ
    ͍ͭͰ΋ݺͼग़͠Մೳ
    
    $BMMCBDLฤ var img = document.querySelector('img'); img.onload = function () { finishAction(this); } if (img.complete) { finishAction(this); } // ը૾ͷಡΈࠐΈঢ়گʹ߹Θͤͨ // ࣮૷Λ͢Δඞཁ͕͋Γେมɾɾɾ
37. ᶅ
    ͍ͭͰ΋ݺͼग़͠Մೳ
    
    1SPNJTFฤ // ʢԾͷ࿩ʣimageཁૉ͕ready()ͰPromiseΛฦͤ͹ var img = document.querySelector('img'); img.ready().then(finishAction); // Image͕ϩʔυલɺϩʔυޙؔ܎ͳ͘ // thenΛίʔϧ͢Ε͹ϩʔυࡁͷը૾Λऔಘ͢Δ // ͜ͱ͕Ͱָ͖ͯνϯ♪
38. ୤ϏΪφʔͷϙΠϯτ  ʢࡁʣ1SPNJTFͷ಺༰Λཧղ͍ͯ͠Δ
     1SPNJTFΛ༻͍ͨ࠷৽࢓༷͕ಡΊΔ
     K2VFSZ%FGFSSFEΛ༻͍ͨ1SPNJTFϓϩάϥϛϯά͕Ͱ͖Δ
39. ࠷৽࢓༷Λ೷͖ݟʂʂ Service Worker
40. 1VTI௨஌
    
    4FSWJDF
    8PSLFS navigator.serviceWorker.ready().then(function (reg) { reg.pushManager.subscribe({ userVisibleOnly: true }).then(function (subscription) { console.debug(‘success!!’); }); });
41. 1VTI௨஌
    
    4FSWJDF
    8PSLFS navigator.serviceWorker.ready().then(function (reg) { reg.pushManager.subscribe({ userVisibleOnly: true }).then(function (subscription) { console.debug(‘success!!’); }); }); 1SPNJTF 1SPNJTF
42. IUUQTTQFBLFSEFDLDPNZPIFJNVOFQVTIOPUJpDBUJPOJTDPNNJOH
43. IUUQTTQFBLFSEFDLDPNDIJOUSPEVDUJPOUP TFSWJDFXPSLFS ࢀߟ
44. ୤ϏΪφʔͷϙΠϯτ  ʢࡁʣ1SPNJTFͷ಺༰Λཧղ͍ͯ͠Δ
     ʢࡁʣ1SPNJTFΛ༻͍ͨ࠷৽࢓༷͕ಡΊΔ
     K2VFSZ%FGFSSFEΛ༻͍ͨ1SPNJTFϓϩάϥϛϯά͕Ͱ͖Δ
45. jQuery.deferred
46. K2VFSZEFGFSSFEͰ1SPNJTFίʔσΟϯά // ੒ޭ͢Δ৔߹ function doAsync () { var d = new $.Deferred(); d.resolve(1); return d.promise(); } doAsync().then(function (value) { console.debug(value); // 1 });
47. K2VFSZEFGFSSFEͰ1SPNJTFίʔσΟϯά // ࣦഊ͢Δ৔߹ function doAsync () { var d = new $.Deferred(); d.reject(‘something is strange’); return d.promise(); } doAsync().fail(function (reason) { console.debug(reason); //‘something is strange’ });
48. BKBYϑΝϛϦʔ͸%FGFSSFEΛฦ͢ $.getJSON('./book.json').then(function (book) { console.debug(book); });
49. XIFOͰύϥϨϧॲཧ $.when( $.getJSON('./book1.json'), $.getJSON(‘./book2.json’) ).then(function (result1, result2) { console.debug(result1[0]); // book1 console.debug(result2[0]); // book2 });
50. ୤ϏΪφʔͷϙΠϯτ  ʢࡁʣ1SPNJTFͷ಺༰Λཧղ͍ͯ͠Δ
     ʢࡁʣ1SPNJTFΛ༻͍ͨ࠷৽࢓༷͕ಡΊΔ
     ʢࡁʣK2VFSZ%FGFSSFEͰ1SPNJTFίʔσΟϯά
51. 8F
    IBWF Promise 0IIIIIIIIIIIIIIII
52. ࢀߟ63-
    
    1SPNJTFؔ࿈ 㾎 +BWB4DSJQU
    1SPNJTFT
    5IFSF
    BOE
    CBDL
    BHBJO
    
    )5.-
    3PDLT
    㾎 1SPNJTF" ࢓༷ΛνϡʔτϦΞϧܗࣜͰৄ͘͠ղઆ͠·͢
    
    :PIFJ./&5
    㾎 1SPNJTFT
    ϒϥ΢βʔ+BWB4DSJQUͷ৽͍͠ඇಉظඪ४ʹͳΔ͔ʁ
    
    *OGP2
    㾎 ࠓߋ͚ͩͲ1SPNJTFೖ໳
    
    2JJUB
    㾎 ͸͡Ίͯͷ1SPNJTF
    
    2JJUB
    㾎 +BWB4DSJQU
    1SPNJTFͷຊ
    
    B[VHJUIVCJP
    㾎 /PEFKTͷίʔϧόοΫ஍ࠈΛ1SPNJTF΍(FOFSBUPSΛ࢖ͬͯղফ͢Δ
    
    1045%
    㾎 1SPNJTF
    
    +BWB4DSJQU
    c
    .%/
    㾎 &$."4DSJQU
    -BOHVBHF
    4QFDJpDBUJPO
    &$."
    UI
    &EJUJPO
53. ࢀߟ63-
    
    K2VFSZEFGFSSFEؔ࿈ 㾎 ര଎ͰΘ͔ΔK2VFSZ%FGFSSFE௒ೖ໳
    
    :BIPP
    +"1"/
    5FDI
    #MPH
    㾎 ࠓ͞Βฉ͚ͳ͍K2VFSZ%FGFSSFEೖ໳
    
    2JJUB
    㾎 K2VFSZ
    EFGFSSFEͷ࢖͍ํ
    
    $PEF(SJE
    㾎 K2VFSZ
    Ϟμϯ"KBYͳॻ͖ํΛ໨ࢦͯ͠
    
    )BDL
    :PVS
    %FTJHO
    㾎 K2VFSZ%FGFSSFEΛ࢖ָ͍ͬͯ͠ඇಉظੜ׆ΛૹΔํ๏
    
    2JJUB
    㾎 +"7"4$3*15
    130.*4&4
    "/%
    8):
    +26&3:
    *.1-&.&/5"5*0/
    *4
    #30,&/
54. Thank you फఆ
    ༸ฏ
    5XJUUFS
    
    !ZPIFJ.VOF
    #MPH
    
    IUUQXXXZPIFJNOFU