Tweet
Tweet

Slide 1

Slide 1 text

࣍ੈ୅ඇಉظϓϩάϥϛϯά Promise Yohei Munesada

Slide 2

Slide 2 text

फఆ༸ฏ 5XJUUFS!ZPIFJ.VOF #MPHIUUQXXXZPIFJNOFU

Slide 3

Slide 3 text

ಡॻͷ͓࣌ؒͰ͢CZ"NFCB

Slide 4

Slide 4 text

ࠓ೔͸ Promise Λѻ͍·͢

Slide 5

Slide 5 text

୤ϏΪφʔͷϙΠϯτ  1SPNJTFͷ಺༰Λཧղ͍ͯ͠Δ  1SPNJTFΛ༻͍ͨ࠷৽࢓༷͕ಡΊΔ  K2VFSZ%FGFSSFEΛ༻͍ͨ1SPNJTFϓϩάϥϛϯά͕Ͱ͖Δ

Slide 6

Slide 6 text

୤ϏΪφʔͷϙΠϯτ  1SPNJTFͷ಺༰Λཧղ͍ͯ͠Δ  1SPNJTFΛ༻͍ͨ࠷৽࢓༷͕ಡΊΔ  K2VFSZ%FGFSSFEΛ༻͍ͨ1SPNJTFϓϩάϥϛϯά͕Ͱ͖Δ 1SPNJTFʹΑΔඇಉظϓϩάϥϛϯά͕ॻ͚ΔಡΊΔ

Slide 7

Slide 7 text

Let’s Start!!

Slide 8

Slide 8 text

Promise ͬͯͳʹʁ

Slide 9

Slide 9 text

Promise ඇಉظϓϩάϥϛϯάͷ΍Γํ

Slide 10

Slide 10 text

$BMMCBDLͰඇಉظϓϩάϥϛϯά doAsync1(function (v1) { doAsync2(function (v2) { doAsync3(function (v3) { doAsync4(function (v4) { console.debug(v4); }); }); }); });

Slide 11

Slide 11 text

1SPNJTFͰඇಉظϓϩάϥϛϯά doAsync1() .then(doAsync2) .then(doAsync3) .then(doAsync4) .then(function (v4) { console.debug(v4); });

Slide 12

Slide 12 text

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ͷ৔߹

Slide 13

Slide 13 text

1SPNJTFͷར఺ 㾎 ඇಉظϓϩάϥϛϯάͷ৽͍͠ॻ͖ํ 㾎 Τϥʔॲཧ͕͍͍ײ͡ʹॻ͚Δʢޙड़ʣ 㾎 ύϥϨϧॲཧ΋͍͍ײ͡ʹॻ͚Δʢޙड़ʣ 㾎 ඇಉظॲཧ͕࣮ߦࡁ͔൱͔ؾʹ͠ͳͯ͘ྑ͍ʢޙड़ʣ

Slide 14

Slide 14 text

Promise ʙجૅฤʙ

Slide 15

Slide 15 text

// Promiseͷ࡞੒ var p = new Promise(function (resolve, reject) {}); // ੒ޭ࣌ͷॲཧ p.then(function (value) {}); // ࣦഊ࣌ͷॲཧ p.catch(function (reason) {}); ֓ཁͭͷίʔυ

Slide 16

Slide 16 text

Pending Resolved Rejected ஫ҙ ࢓্༷͸GVMpMMFE SFKFDUFE QFOEJOH TFUUMFEͰ͕͢ɺ෼͔Γ΍͘͢ݴ͍׵͑Λ͍ͯ͠·͢ɻ ·ͩ੒ޭࣦഊ͍ͯ͠ͳ͍ ੒ޭͨ͠ ࣦഊͨ͠ ֓ཁͭͷঢ়ଶ

Slide 17

Slide 17 text

Pending Resolved Rejected ஫ҙ ࢓্༷͸GVMpMMFE SFKFDUFE QFOEJOH TFUUMFEͰ͕͢ɺ෼͔Γ΍͘͢ݴ͍׵͑Λ͍ͯ͠·͢ɻ ·ͩ੒ޭࣦഊ͍ͯ͠ͳ͍ ੒ޭͨ͠ ࣦഊͨ͠ ֓ཁͭͷঢ়ଶ

Slide 18

Slide 18 text

Pending Resolved Rejected ஫ҙ ࢓্༷͸GVMpMMFE SFKFDUFE QFOEJOH TFUUMFEͰ͕͢ɺ෼͔Γ΍͘͢ݴ͍׵͑Λ͍ͯ͠·͢ɻ ·ͩ੒ޭࣦഊ͍ͯ͠ͳ͍ ੒ޭͨ͠ ࣦഊͨ͠ ֓ཁͭͷঢ়ଶ

Slide 19

Slide 19 text

Pending Resolved Rejected ஫ҙ ࢓্༷͸GVMpMMFE SFKFDUFE QFOEJOH TFUUMFEͰ͕͢ɺ෼͔Γ΍͘͢ݴ͍׵͑Λ͍ͯ͠·͢ɻ ·ͩ੒ޭࣦഊ͍ͯ͠ͳ͍ ੒ޭͨ͠ ࣦഊͨ͠ ֓ཁͭͷঢ়ଶ

Slide 20

Slide 20 text

var p = new Promise(function (resolve, reject) { // Կ΋͍ͯ͠ͳ͍ }); Pending

Slide 21

Slide 21 text

// resolveͰ੒ޭ var p = new Promise(function (resolve, reject) { resolve(1); }); // ੒ޭͨ͠Βthen͕ݺ͹ΕΔ p.then(function (value) { console.log(value); // 1 }); Pending => Resolved

Slide 22

Slide 22 text

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’ });

Slide 23

Slide 23 text

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); }); ࣮ફαϯϓϧ

Slide 24

Slide 24 text

Promise ʙجૅฤᶄʙ

Slide 25

Slide 25 text

UIFO͸νΣʔϯͰ͖Δ doAsync1() .then(doAsync2) .then(doAsync3) .then(doAsync4) .then(function(v4){ console.debug(v4); });

Slide 26

Slide 26 text

get(‘./book.json’) .then(function (responseText) { return JSON.parse(responseText); }).then(function (book) { console.log(‘book is JSON!!!’, book); }); UIFO͸νΣʔϯͰ͖Δᶃ஋Λฦ٫͢Δ

Slide 27

Slide 27 text

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Λฦ٫͢Δ

Slide 28

Slide 28 text

Promise ʙԠ༻ฤᶃʙ

Slide 29

Slide 29 text

1SPNJTFͷར఺ 㾎 ඇಉظϓϩάϥϛϯάͷ৽͍͠ॻ͖ํ 㾎 Τϥʔॲཧ͕͍͍ײ͡ʹॻ͚Δʢޙड़ʣ 㾎 ύϥϨϧॲཧ΋͍͍ײ͡ʹॻ͚Δʢޙड़ʣ 㾎 ඇಉظॲཧ͕࣮ߦࡁ͔൱͔ؾʹ͠ͳͯ͘ྑ͍ʢޙड़ʣ

Slide 30

Slide 30 text

ᶃ՚ྷͳΤϥʔϋϯυϦϯά$BMMCBDLฤ doAsync1 (function (result) { doAsync2 (function (result) { doAsync3 (function (result) { finishAction(); }); }); });

Slide 31

Slide 31 text

ᶃ՚ྷͳΤϥʔϋϯυϦϯά$BMMCBDLฤ doAsync1 (function (result) { if (isError(result)) treatError(); doAsync2 (function (result) { if (isError(result)) treatError(); doAsync3 (function (result) { if (isError(result)) treatError(); finishAction(); }); }); }); Τϥʔॲཧ Τϥʔॲཧ Τϥʔॲཧ

Slide 32

Slide 32 text

ᶃ՚ྷͳΤϥʔϋϯυϦϯά1SPNJTFฤ doAsync1() .then(doAsync2) .then(doAsync3) .then(finishAction) .catch(treatError); // doAsync1ͳͲ͕PromiseΛฦ͢Α͏ʹ࣮૷͢Ε͹ // ্هͷΑ͏ʹγϯϓϧʹͳΓ // Τϥʔॲཧ΋࠷ޙʹ1ͭॻ͚ͩ͘Ͱྑ͘ͳΔ

Slide 33

Slide 33 text

ᶄ՚ྷͳύϥϨϧॲཧ$BMMCBDLฤ doAsync1 doAsync2 finishAction EP"TZODͷॲཧΛ଴͔ͬͯΒɺ pOJTI"DUJPOΛݺͿ

Slide 34

Slide 34 text

ᶄ՚ྷͳύϥϨϧॲཧ$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(); });

Slide 35

Slide 35 text

ᶄ՚ྷͳύϥϨϧॲཧ1SPNJTFฤ Promise .all([doAsync1(), doAsync2()] .then(finishAction); // doAsync1ͱdoAsync2ΛPromise࣮૷ʹͯ͠ //ʮPromise.allʯΛ༻͍Δ͜ͱͰ // ෳ਺ͷPromiseͷύϥϨϧ࣮ߦͱ // ͦͷޙͷ׬ྃॲཧΛ៉ྷʹهड़͢Δ͜ͱ͕Ͱ͖Δ

Slide 36

Slide 36 text

ᶅ͍ͭͰ΋ݺͼग़͠Մೳ$BMMCBDLฤ var img = document.querySelector('img'); img.onload = function () { finishAction(this); } if (img.complete) { finishAction(this); } // ը૾ͷಡΈࠐΈঢ়گʹ߹Θͤͨ // ࣮૷Λ͢Δඞཁ͕͋Γେมɾɾɾ

Slide 37

Slide 37 text

ᶅ͍ͭͰ΋ݺͼग़͠Մೳ1SPNJTFฤ // ʢԾͷ࿩ʣimageཁૉ͕ready()ͰPromiseΛฦͤ͹ var img = document.querySelector('img'); img.ready().then(finishAction); // Image͕ϩʔυલɺϩʔυޙؔ܎ͳ͘ // thenΛίʔϧ͢Ε͹ϩʔυࡁͷը૾Λऔಘ͢Δ // ͜ͱ͕Ͱָ͖ͯνϯ♪

Slide 38

Slide 38 text

୤ϏΪφʔͷϙΠϯτ  ʢࡁʣ1SPNJTFͷ಺༰Λཧղ͍ͯ͠Δ  1SPNJTFΛ༻͍ͨ࠷৽࢓༷͕ಡΊΔ  K2VFSZ%FGFSSFEΛ༻͍ͨ1SPNJTFϓϩάϥϛϯά͕Ͱ͖Δ

Slide 39

Slide 39 text

࠷৽࢓༷Λ೷͖ݟʂʂ Service Worker

Slide 40

Slide 40 text

1VTI௨஌4FSWJDF8PSLFS navigator.serviceWorker.ready().then(function (reg) { reg.pushManager.subscribe({ userVisibleOnly: true }).then(function (subscription) { console.debug(‘success!!’); }); });

Slide 41

Slide 41 text

1VTI௨஌4FSWJDF8PSLFS navigator.serviceWorker.ready().then(function (reg) { reg.pushManager.subscribe({ userVisibleOnly: true }).then(function (subscription) { console.debug(‘success!!’); }); }); 1SPNJTF 1SPNJTF

Slide 42

Slide 42 text

IUUQTTQFBLFSEFDLDPNZPIFJNVOFQVTIOPUJpDBUJPOJTDPNNJOH

Slide 43

Slide 43 text

IUUQTTQFBLFSEFDLDPNDIJOUSPEVDUJPOUP TFSWJDFXPSLFS ࢀߟ

Slide 44

Slide 44 text

୤ϏΪφʔͷϙΠϯτ  ʢࡁʣ1SPNJTFͷ಺༰Λཧղ͍ͯ͠Δ  ʢࡁʣ1SPNJTFΛ༻͍ͨ࠷৽࢓༷͕ಡΊΔ  K2VFSZ%FGFSSFEΛ༻͍ͨ1SPNJTFϓϩάϥϛϯά͕Ͱ͖Δ

Slide 45

Slide 45 text

jQuery.deferred

Slide 46

Slide 46 text

K2VFSZEFGFSSFEͰ1SPNJTFίʔσΟϯά // ੒ޭ͢Δ৔߹ function doAsync () { var d = new $.Deferred(); d.resolve(1); return d.promise(); } doAsync().then(function (value) { console.debug(value); // 1 });

Slide 47

Slide 47 text

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’ });

Slide 48

Slide 48 text

BKBYϑΝϛϦʔ͸%FGFSSFEΛฦ͢ $.getJSON('./book.json').then(function (book) { console.debug(book); });

Slide 49

Slide 49 text

XIFOͰύϥϨϧॲཧ $.when( $.getJSON('./book1.json'), $.getJSON(‘./book2.json’) ).then(function (result1, result2) { console.debug(result1[0]); // book1 console.debug(result2[0]); // book2 });

Slide 50

Slide 50 text

୤ϏΪφʔͷϙΠϯτ  ʢࡁʣ1SPNJTFͷ಺༰Λཧղ͍ͯ͠Δ  ʢࡁʣ1SPNJTFΛ༻͍ͨ࠷৽࢓༷͕ಡΊΔ  ʢࡁʣK2VFSZ%FGFSSFEͰ1SPNJTFίʔσΟϯά

Slide 51

Slide 51 text

8FIBWF Promise 0IIIIIIIIIIIIIIII

Slide 52

Slide 52 text

ࢀߟ63-1SPNJTFؔ࿈ 㾎 +BWB4DSJQU1SPNJTFT5IFSFBOECBDLBHBJO)5.-3PDLT 㾎 1SPNJTF" ࢓༷ΛνϡʔτϦΞϧܗࣜͰৄ͘͠ղઆ͠·͢:PIFJ./&5 㾎 1SPNJTFTϒϥ΢βʔ+BWB4DSJQUͷ৽͍͠ඇಉظඪ४ʹͳΔ͔ʁ*OGP2 㾎 ࠓߋ͚ͩͲ1SPNJTFೖ໳2JJUB 㾎 ͸͡Ίͯͷ1SPNJTF2JJUB 㾎 +BWB4DSJQU1SPNJTFͷຊB[VHJUIVCJP 㾎 /PEFKTͷίʔϧόοΫ஍ࠈΛ1SPNJTF΍(FOFSBUPSΛ࢖ͬͯղফ͢Δ1045% 㾎 1SPNJTF+BWB4DSJQUc.%/ 㾎 &$."4DSJQU-BOHVBHF4QFDJpDBUJPO&$."UI&EJUJPO

Slide 53

Slide 53 text

ࢀߟ63-K2VFSZEFGFSSFEؔ࿈ 㾎 ര଎ͰΘ͔ΔK2VFSZ%FGFSSFE௒ೖ໳:BIPP+"1"/5FDI#MPH 㾎 ࠓ͞Βฉ͚ͳ͍K2VFSZ%FGFSSFEೖ໳2JJUB 㾎 K2VFSZEFGFSSFEͷ࢖͍ํ$PEF(SJE 㾎 K2VFSZϞμϯ"KBYͳॻ͖ํΛ໨ࢦͯ͠)BDL:PVS%FTJHO 㾎 K2VFSZ%FGFSSFEΛ࢖ָ͍ͬͯ͠ඇಉظੜ׆ΛૹΔํ๏2JJUB 㾎 +"7"4$3*15130.*4&4"/%8):+26&3:*.1-&.&/5"5*0/*4#30,&/

Slide 54

Slide 54 text

Thank you फఆ༸ฏ 5XJUUFS!ZPIFJ.VOF #MPHIUUQXXXZPIFJNOFU