ECMAScript Promise

第2回名古屋若手Webエンジニア交流会のLTで発表させていただいた資料です。
主にJavaScriptのPromiseを使った機能の紹介しています。
口頭で説明している部分が多いので、テキストにほぼ起こしていません。

Transcript

1. ☃ECMAScript Promise☃
2. yuta suzuki(32) frontend engineer
3. ECMAScript
4. &$."4DSJQU͸+BWB4DSJQUͷ࢓༷ɻ&4ͱུ͞ΕΔࣄ͕ଟ͍ɻݱࡏͷ+BWB4DSJQU͸&4 ͱ͍͏όʔδϣϯɻ
   ࢓༷ࡦఆʹ͸εςʔδ͕͋Γɺ4UBHF
   
   4USBXNBOɺ4UBHF
   
   1SPQPTBMɺ4UBHF
   
   %SBGUɺ4UBHF
   
   $BOEJEBUFɺ4UBHF
   
   'JOJTIFEͷ̑ஈ֊͋Δɻ
   'JOJTIFEʹͳΔʹ͸ɺ̎ͭҎ্ͷϒϥ΢β࣮૷͕ඞཁɻ Ҿ༻ݩɿ&$."4DSJQUͱ͸Կ͔ʁ
5. Promise
6. 1SPNJTF͸ඇಉظॲཧΛந৅Խͨ͠ΦϒδΣΫτͱͦΕΛૢ࡞͢Δ࢓૊Έͷ͜ͱɻ
7. function sleep(time) { return new Promise(function (resolve) { setTimeout(function () { resolve(time) }, time); }); } sleep(3000).then(function (time) { console.log(time * 3); // 3ඵޙʹ9000Λදࣔ });
8. ES2015 - ES2017
9. function sleep(time, callback) { setTimeout(function () { callback(time) }, time); } sleep(3000, function (time) { // 3ඵޙʹ9000Λදࣔ console.log(time * 3); }); function sleep(time) { return new Promise(function (resolve) { setTimeout(function () { resolve(time) }, time); }); } sleep(3000).then(function (time) { // 3ඵޙʹ9000Λදࣔ console.log(time * 3); });
10. function ajax(URL) { return new Promise(function (resolve, reject) { var req = new XMLHttpRequest(); req.open('GET', URL, true); req.onload = function () { if (req.status === 200) { resolve(req.responseText); } else { reject(new Error(req.statusText)); } }; req.onerror = function () { reject(new Error(req.statusText)); }; req.send(); }); } ఆٛ ajax('/api/foo') .then(function success(value){ console.log(value); }) .catch(function error(err){ console.error(err); }); ࣮ߦ
11. ajax('/api/foo') .then(function success(value){ return ajax('/api/foo/bar/' + value) }) .then(function success(value){ return ajax('/api/foo/bar/buz/' + value) }) .then(function success(value){ console.log(value) }) ajax('/api/foo') .then(function success(value){ ajax('/api/foo/bar/' + value) .then(function success(val)){ ajax('/api/foo/bar/buz/' + val) .then(function success(v)){ console.log(v) }) }) })
12. Async Await Function
13. function sleep(time) { return new Promise(function (resolve) { setTimeout(function () { resolve(time) }, time); }); } async function call(time) { var sleepTime = await sleep(time) console.log(sleepTime * 2) } call(1000) // 1ඵޙʹ2000Λදࣔ window.addEventListener('click', async function(){ var sleepTime = await sleep(2000) console.log(delayTime * 3) // 2ඵޙʹ6000Λදࣔ })
14. ES2018
15. Async Iteration
16. const items = [fetch(‘/api/item/1’), fetch(‘/api/item/2’)] function getItemPromises() { for (const item of items) { console.log(item) // get promise } } async function getItemContexts() { for await (const item of items) { console.log(item) // get api response } } getItemPromises() getItemContexts()
17. Dynamic import
18. async function main() { const { Person } = await import("./Person.js") const p = new Person("Yuta") p.say() // I’m Yuta } main() main.js Person.js export class Person { constructor(name = "foo") { this.name = name } say() { console.log("I'm " + this.name) } }
19. Closing
20. 1SPNJTFΛ্खʹ࢖͏͜ͱ͸ɺՄಡੑͷߴ͍+BWB4DSJQUΛॻ্͘Ͱඞਢʹͳͬͯ͘Δɻ
    ݸਓతʹ+BWB4DSJQUք۾͸ߋ৽͕ૣ͍͔Βָ͍͠ɻ
    ϞμϯϥΠϒϥϦͷυΩϡϝϯτ͸BTZOD
    BXBJUͱ͔νϡʔτϦΞϧͰ࢖ͬͯ͘ΔͷͰɺ ࠓͷ͏ͪʹ1SPNJTFΛ͓֮͑ͯ͘ͱ޾ͤʹͳΕΔ͜ͱ͕ଟ͍ɻ
21. Thanks