Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
非同期プログラミングPromiseに入門
Search
Yohei Munesada
August 27, 2015
Technology
0
1.3k
非同期プログラミングPromiseに入門
JavaScriptの非同期プログラミングの手法の一つ、Promiseを説明したスライド。HTML5ビギナーズの第12回の登壇内容です。
Yohei Munesada
August 27, 2015
Tweet
Share
More Decks by Yohei Munesada
See All by Yohei Munesada
G'sデータベース設計の講義
yoheimune
4
5.3k
How to create a service, How to google !
yoheimune
0
300
Machine Learning Basic and Python
yoheimune
1
510
Python Scraping and Web Apps for G's ACADEMY TOKYO
yoheimune
0
240
DevelopWorkflow and Solving Problems
yoheimune
0
450
Git and Github for Beginners
yoheimune
1
290
Data Science BOOTCAMP Practices - Recommendation
yoheimune
0
210
Data Science BOOTCAMP Practices
yoheimune
0
370
Machine Learning with Python
yoheimune
0
350
Other Decks in Technology
See All in Technology
ビギナーであり続ける/beginning
ikuodanaka
3
760
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
120
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
130
OPENLOGI Company Profile for engineer
hr01
1
34k
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
1
290
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
480
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
260
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
ymrl
2
200
DatabricksにOLTPデータベース『Lakebase』がやってきた!
inoutk
0
110
Backlog ユーザー棚卸しRTA、多分これが一番早いと思います
__allllllllez__
1
150
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
2
170
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
340
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Optimizing for Happiness
mojombo
379
70k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Being A Developer After 40
akosma
90
590k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
BBQ
matthewcrist
89
9.7k
The Cult of Friendly URLs
andyhume
79
6.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Transcript
࣍ੈඇಉظϓϩάϥϛϯά Promise Yohei Munesada
फఆ༸ฏ 5XJUUFS!ZPIFJ.VOF #MPHIUUQXXXZPIFJNOFU
ಡॻͷ͓࣌ؒͰ͢CZ"NFCB
ࠓ Promise Λѻ͍·͢
ϏΪφʔͷϙΠϯτ 1SPNJTFͷ༰Λཧղ͍ͯ͠Δ 1SPNJTFΛ༻͍ͨ࠷৽༷͕ಡΊΔ K2VFSZ%FGFSSFEΛ༻͍ͨ1SPNJTFϓϩάϥϛϯά͕Ͱ͖Δ
ϏΪφʔͷϙΠϯτ 1SPNJTFͷ༰Λཧղ͍ͯ͠Δ 1SPNJTFΛ༻͍ͨ࠷৽༷͕ಡΊΔ K2VFSZ%FGFSSFEΛ༻͍ͨ1SPNJTFϓϩάϥϛϯά͕Ͱ͖Δ 1SPNJTFʹΑΔඇಉظϓϩάϥϛϯά͕ॻ͚ΔಡΊΔ
Let’s Start!!
Promise ͬͯͳʹʁ
Promise ඇಉظϓϩάϥϛϯάͷΓํ
$BMMCBDLͰඇಉظϓϩάϥϛϯά doAsync1(function (v1) { doAsync2(function (v2) { doAsync3(function (v3) {
doAsync4(function (v4) { console.debug(v4); }); }); }); });
1SPNJTFͰඇಉظϓϩάϥϛϯά doAsync1() .then(doAsync2) .then(doAsync3) .then(doAsync4) .then(function (v4) { console.debug(v4); });
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ͷ߹
1SPNJTFͷར 㾎 ඇಉظϓϩάϥϛϯάͷ৽͍͠ॻ͖ํ 㾎 Τϥʔॲཧ͕͍͍ײ͡ʹॻ͚Δʢޙड़ʣ 㾎 ύϥϨϧॲཧ͍͍ײ͡ʹॻ͚Δʢޙड़ʣ 㾎 ඇಉظॲཧ͕࣮ߦࡁ͔൱͔ؾʹ͠ͳͯ͘ྑ͍ʢޙड़ʣ
Promise ʙجૅฤʙ
// Promiseͷ࡞ var p = new Promise(function (resolve, reject) {});
// ޭ࣌ͷॲཧ p.then(function (value) {}); // ࣦഊ࣌ͷॲཧ p.catch(function (reason) {}); ֓ཁͭͷίʔυ
Pending Resolved Rejected ҙ ্༷GVMpMMFE SFKFDUFE QFOEJOH TFUUMFEͰ͕͢ɺ͔Γ͘͢ݴ͍͑Λ͍ͯ͠·͢ɻ ·ͩޭࣦഊ͍ͯ͠ͳ͍ ޭͨ͠
ࣦഊͨ͠ ֓ཁͭͷঢ়ଶ
Pending Resolved Rejected ҙ ্༷GVMpMMFE SFKFDUFE QFOEJOH TFUUMFEͰ͕͢ɺ͔Γ͘͢ݴ͍͑Λ͍ͯ͠·͢ɻ ·ͩޭࣦഊ͍ͯ͠ͳ͍ ޭͨ͠
ࣦഊͨ͠ ֓ཁͭͷঢ়ଶ
Pending Resolved Rejected ҙ ্༷GVMpMMFE SFKFDUFE QFOEJOH TFUUMFEͰ͕͢ɺ͔Γ͘͢ݴ͍͑Λ͍ͯ͠·͢ɻ ·ͩޭࣦഊ͍ͯ͠ͳ͍ ޭͨ͠
ࣦഊͨ͠ ֓ཁͭͷঢ়ଶ
Pending Resolved Rejected ҙ ্༷GVMpMMFE SFKFDUFE QFOEJOH TFUUMFEͰ͕͢ɺ͔Γ͘͢ݴ͍͑Λ͍ͯ͠·͢ɻ ·ͩޭࣦഊ͍ͯ͠ͳ͍ ޭͨ͠
ࣦഊͨ͠ ֓ཁͭͷঢ়ଶ
var p = new Promise(function (resolve, reject) { // Կ͍ͯ͠ͳ͍
}); Pending
// resolveͰޭ var p = new Promise(function (resolve, reject) {
resolve(1); }); // ޭͨ͠Βthen͕ݺΕΔ p.then(function (value) { console.log(value); // 1 }); Pending => Resolved
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’ });
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); }); ࣮ફαϯϓϧ
Promise ʙجૅฤᶄʙ
UIFOνΣʔϯͰ͖Δ doAsync1() .then(doAsync2) .then(doAsync3) .then(doAsync4) .then(function(v4){ console.debug(v4); });
get(‘./book.json’) .then(function (responseText) { return JSON.parse(responseText); }).then(function (book) { console.log(‘book
is JSON!!!’, book); }); UIFOνΣʔϯͰ͖ΔᶃΛฦ٫͢Δ
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Λฦ٫͢Δ
Promise ʙԠ༻ฤᶃʙ
1SPNJTFͷར 㾎 ඇಉظϓϩάϥϛϯάͷ৽͍͠ॻ͖ํ 㾎 Τϥʔॲཧ͕͍͍ײ͡ʹॻ͚Δʢޙड़ʣ 㾎 ύϥϨϧॲཧ͍͍ײ͡ʹॻ͚Δʢޙड़ʣ 㾎 ඇಉظॲཧ͕࣮ߦࡁ͔൱͔ؾʹ͠ͳͯ͘ྑ͍ʢޙड़ʣ
ᶃ՚ྷͳΤϥʔϋϯυϦϯά$BMMCBDLฤ doAsync1 (function (result) { doAsync2 (function (result) { doAsync3
(function (result) { finishAction(); }); }); });
ᶃ՚ྷͳΤϥʔϋϯυϦϯά$BMMCBDLฤ doAsync1 (function (result) { if (isError(result)) treatError(); doAsync2 (function
(result) { if (isError(result)) treatError(); doAsync3 (function (result) { if (isError(result)) treatError(); finishAction(); }); }); }); Τϥʔॲཧ Τϥʔॲཧ Τϥʔॲཧ
ᶃ՚ྷͳΤϥʔϋϯυϦϯά1SPNJTFฤ doAsync1() .then(doAsync2) .then(doAsync3) .then(finishAction) .catch(treatError); // doAsync1ͳͲ͕PromiseΛฦ͢Α͏ʹ࣮͢Ε // ্هͷΑ͏ʹγϯϓϧʹͳΓ
// Τϥʔॲཧ࠷ޙʹ1ͭॻ͚ͩ͘Ͱྑ͘ͳΔ
ᶄ՚ྷͳύϥϨϧॲཧ$BMMCBDLฤ doAsync1 doAsync2 finishAction EP"TZODͷॲཧΛ͔ͬͯΒɺ pOJTI"DUJPOΛݺͿ
ᶄ՚ྷͳύϥϨϧॲཧ$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(); });
ᶄ՚ྷͳύϥϨϧॲཧ1SPNJTFฤ Promise .all([doAsync1(), doAsync2()] .then(finishAction); // doAsync1ͱdoAsync2ΛPromise࣮ʹͯ͠ //ʮPromise.allʯΛ༻͍Δ͜ͱͰ // ෳͷPromiseͷύϥϨϧ࣮ߦͱ
// ͦͷޙͷྃॲཧΛ៉ྷʹهड़͢Δ͜ͱ͕Ͱ͖Δ
ᶅ͍ͭͰݺͼग़͠Մೳ$BMMCBDLฤ var img = document.querySelector('img'); img.onload = function () {
finishAction(this); } if (img.complete) { finishAction(this); } // ը૾ͷಡΈࠐΈঢ়گʹ߹Θͤͨ // ࣮Λ͢Δඞཁ͕͋Γେมɾɾɾ
ᶅ͍ͭͰݺͼग़͠Մೳ1SPNJTFฤ // ʢԾͷʣimageཁૉ͕ready()ͰPromiseΛฦͤ var img = document.querySelector('img'); img.ready().then(finishAction); // Image͕ϩʔυલɺϩʔυޙؔͳ͘
// thenΛίʔϧ͢Εϩʔυࡁͷը૾Λऔಘ͢Δ // ͜ͱ͕Ͱָ͖ͯνϯ♪
ϏΪφʔͷϙΠϯτ ʢࡁʣ1SPNJTFͷ༰Λཧղ͍ͯ͠Δ 1SPNJTFΛ༻͍ͨ࠷৽༷͕ಡΊΔ K2VFSZ%FGFSSFEΛ༻͍ͨ1SPNJTFϓϩάϥϛϯά͕Ͱ͖Δ
࠷৽༷Λ͖ݟʂʂ Service Worker
1VTI௨4FSWJDF8PSLFS navigator.serviceWorker.ready().then(function (reg) { reg.pushManager.subscribe({ userVisibleOnly: true }).then(function (subscription) {
console.debug(‘success!!’); }); });
1VTI௨4FSWJDF8PSLFS navigator.serviceWorker.ready().then(function (reg) { reg.pushManager.subscribe({ userVisibleOnly: true }).then(function (subscription) {
console.debug(‘success!!’); }); }); 1SPNJTF 1SPNJTF
IUUQTTQFBLFSEFDLDPNZPIFJNVOFQVTIOPUJpDBUJPOJTDPNNJOH
IUUQTTQFBLFSEFDLDPNDIJOUSPEVDUJPOUP TFSWJDFXPSLFS ࢀߟ
ϏΪφʔͷϙΠϯτ ʢࡁʣ1SPNJTFͷ༰Λཧղ͍ͯ͠Δ ʢࡁʣ1SPNJTFΛ༻͍ͨ࠷৽༷͕ಡΊΔ K2VFSZ%FGFSSFEΛ༻͍ͨ1SPNJTFϓϩάϥϛϯά͕Ͱ͖Δ
jQuery.deferred
K2VFSZEFGFSSFEͰ1SPNJTFίʔσΟϯά // ޭ͢Δ߹ function doAsync () { var d =
new $.Deferred(); d.resolve(1); return d.promise(); } doAsync().then(function (value) { console.debug(value); // 1 });
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’ });
BKBYϑΝϛϦʔ%FGFSSFEΛฦ͢ $.getJSON('./book.json').then(function (book) { console.debug(book); });
XIFOͰύϥϨϧॲཧ $.when( $.getJSON('./book1.json'), $.getJSON(‘./book2.json’) ).then(function (result1, result2) { console.debug(result1[0]); //
book1 console.debug(result2[0]); // book2 });
ϏΪφʔͷϙΠϯτ ʢࡁʣ1SPNJTFͷ༰Λཧղ͍ͯ͠Δ ʢࡁʣ1SPNJTFΛ༻͍ͨ࠷৽༷͕ಡΊΔ ʢࡁʣK2VFSZ%FGFSSFEͰ1SPNJTFίʔσΟϯά
8FIBWF Promise 0IIIIIIIIIIIIIIII
ࢀߟ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
ࢀߟ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,&/
Thank you फఆ༸ฏ 5XJUUFS!ZPIFJ.VOF #MPHIUUQXXXZPIFJNOFU