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.2k
非同期プログラミング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
5k
How to create a service, How to google !
yoheimune
0
270
Machine Learning Basic and Python
yoheimune
1
440
Python Scraping and Web Apps for G's ACADEMY TOKYO
yoheimune
0
210
DevelopWorkflow and Solving Problems
yoheimune
0
400
Git and Github for Beginners
yoheimune
1
250
Data Science BOOTCAMP Practices - Recommendation
yoheimune
0
170
Data Science BOOTCAMP Practices
yoheimune
0
340
Machine Learning with Python
yoheimune
0
300
Other Decks in Technology
See All in Technology
こんなに簡単!AWSマルチアカウント
takuya_terada
0
120
中央集権体制からDataOpsへの転換 / centralized-to-dataops-transformation
pei0804
7
1.6k
生成AIの不確実性と向き合うためのオブジェクト指向設計
tkikuchi1002
2
700
社内共通ルールを値オブジェクトにして社内ライブラリとして運用してみた話
leveragestech
2
1.2k
SaaS型Webサービス「カオナビ」のチーム開発でPackage by Featureを取り入れた話/Implementing Package by Feature in kaonavi
kaonavi
0
110
大規模データとの戦い方
knih
1
480
継続的テストモデルを実現するためにスリーアミーゴスを用いた10Xでのシフトレフトの事例
nihonbuson
3
260
.NETの非同期戦略とUnityとの相互運用
neuecc
2
2.4k
今さら聞けない!? AWSの生成AIサービス Amazon Bedrock入門!
minorun365
PRO
11
2.7k
複数の LLM モデルを扱う上で直面した辛みまとめ
kazuyaseki
1
260
OCI Data Integration技術情報 / ocidi_technical_jp
oracle4engineer
PRO
1
1.5k
大規模言語モデル開発のための日本語 Instruction データセット作成の取り組み
kunishou
0
140
Featured
See All Featured
Clear Off the Table
cherdarchuk
82
310k
Atom: Resistance is Futile
akmur
258
25k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Building Effective Engineering Teams - LeadDev
addyosmani
25
1.8k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
Into the Great Unknown - MozCon
thekraken
10
830
Designing with Data
zakiwarfel
94
4.8k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
In The Pink: A Labor of Love
frogandcode
137
21k
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