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
JavaScriptのPromiseをわかりやすく説明したい
Search
chihaso
February 15, 2020
Programming
0
810
JavaScriptのPromiseをわかりやすく説明したい
勉強していてなかなか理解できずつらかったPromiseについて、自分なりにわかりやすい形で、実例を出して説明します。
chihaso
February 15, 2020
Tweet
Share
More Decks by chihaso
See All by chihaso
孤独のRubyKaigi
chihaso
0
130
CSVこわい - 複雑なフォーマットのCSVを取り込むアプリを作りました
chihaso
1
76
Other Decks in Programming
See All in Programming
Being an ethical software engineer
xgouchet
PRO
0
210
AI時代の開発者評価について
ayumuu
0
170
Enterprise Web App. Development (1): Build Tool Training Ver. 5
knakagawa
1
120
Make Parsers Compatible Using Automata Learning
makenowjust
2
5.2k
PHPバージョンアップから始めるOSSコントリビュート / how2oss-contribute
dmnlk
1
1.1k
音声プラットフォームのアーキテクチャ変遷から学ぶ、クラウドネイティブなバッチ処理 (20250422_CNDS2025_Batch_Architecture)
thousanda
0
230
AWS で実現する安全な AI エージェントの作り方 〜 Bedrock Engineer の実装例を添えて 〜 / how-to-build-secure-ai-agents
gawa
8
840
Do Dumb Things
mitsuhiko
0
440
「影響が少ない」を自分の目でみてみる
o0h
PRO
2
1.1k
AIコーディングエージェントを 「使いこなす」ための実践知と現在地 in ログラス / How to Use AI Coding Agent in Loglass
rkaga
3
520
エンジニアが挑む、限界までの越境
nealle
1
250
AWSで雰囲気でつくる! VRChatの写真変換ピタゴラスイッチ
anatofuz
0
160
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
41
2.2k
Building Flexible Design Systems
yeseniaperezcruz
329
38k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
How to Ace a Technical Interview
jacobian
276
23k
Typedesign – Prime Four
hannesfritz
41
2.6k
[RailsConf 2023] Rails as a piece of cake
palkan
54
5.4k
Writing Fast Ruby
sferik
628
61k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
BBQ
matthewcrist
88
9.6k
Site-Speed That Sticks
csswizardry
5
500
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2k
Transcript
+BWB4DSJQUͷ1SPNJTFΛ Θ͔Γ͘͢આ໌͍ͨ͠ ઍ༿༤ଠɹ!DIJIBTP ʢʣ
ࣗݾհ wDIJIBTPʢͪͦʣͰ͢ wϑΟϤϧυϒʔτΩϟϯϓͰษڧத ਐߦ w͖ͳͷɿΞχϝɺອըɺΓɺྉཧɺԻָɺ ञʂʂɺϓϩάϥϛϯάʂɹ w ྛాٿɺߴڮ༿հɺϓϩϝΞɺUIFQJMMPXTɺ3):.&45&3FUD
ڭՊॻΛશ෦ಡΜ͕ͩɺ+BWB4DSJQU ͷඇಉظϓϩάϥϛϯά͕Θ͔Βͳ ͗ͯͭ͢Β͔ͬͨ ಛʹϓϩϛε͕ͭΒ͍ ͜ͷςʔϚΛબΜͩഎܠ
ࣗͳΓʹΘ͔Γ͘͢ આ໌ͯ͠Έ͍ͨ ωλόϨɿؤு͚ͬͨͲɺ͋Μ·ΓΘ͔Γ͘͢ͳ͍Ͱ͢
+BWB4DSJQUͰͷඇಉظϓϩάϥϛϯάͷํ๏Λɺ ςΩετϑΝΠϧΛಡΈࠐΉϓϩάϥϜΛྫʹͯ͠આ໌͠·͢ɻ ͜Ε͔Β͢͜ͱ ɾඇಉظϓϩάϥϛϯάͱʁ ɾίʔϧόοΫʹΑΔ࣮ݱํ๏ ɾϓϩϛεʹΑΔ࣮ݱํ๏ ɾൺֱ BUYU a.txtͷ༰ͩΑ CUYU
b.txtͷ༰ͩΑ DUYU c.txtͷ༰ͩΑ a.txtͷ༰ͩΑ b.txtͷ༰ͩΑ c.txtͷ༰ͩΑ ࣮ߦ݁Ռ +BWB4DSJQUͷ ϓϩάϥϜ ̏ͭͷςΩετϑΝΠϧΛಡΈࠐΜͰɺͦͷॱ൪ͷ··ίϯιʔϧ্ʹදࣔ ˞্هΛ࣮ݱ͢ΔʹαʔόʔΛ ཱͯΔඞཁ͕͋Γ·͕͢ɺͦ͜ ׂѪ͠·͢
ඇಉظϓϩάϥϛϯάͬͯʁ ϢʔβʔͷϘλϯΫϦοΫɺσʔλͷϩʔυͷΑ͏ͳ ඇಉظΠϕϯτ͕ൃੜͨ͠ࡍͷॲཧΛهड़͢Δ͜ͱ
+BWB4DSJQUͰඇಉظϓϩάϥϛϯά͢ΔͨΊͷಓ۩ ίʔϧόοΫ ϓϩϛε ଞʹ͋ΔΒ͍͚͠ͲͱΓ͋͑ͣɾɾɾ
ϑΝΠϧͷಡΈࠐΈɿ͜͏ॻ͍ͯμϝ const prefix = "http://localhost:7070/"; const xhr1 = new XMLHttpRequest();
xhr1.open("GET", prefix + "a.txt"); xhr1.send(); console.log(xhr1.response); console.log("͜Ε͕࠷ऴߦͰ͢"); ࣮ߦ݁Ռ ϩʔυΛͨͣʹ࣮ߦ͞ΕΔ DBMMCBDLKT BUYUΛ(&5͢ΔϦΫΤετͩΑ YIS͍ͯ͏໊લͷ9)3ΦϒδΣΫτ࡞ͬͯͶ ϦΫΤετඈͯ͠Ͷ ϨεϙϯεΛίϯιʔϧʹදࣔͯ͠Ͷ
ϑΝΠϧͷಡΈࠐΈɿίʔϧόοΫΛ͏ ؔʹ͞ΕͨؔΛίʔϧόοΫؔͱ͍͏ const prefix = "http://localhost:7070/"; const xhr1 = new
XMLHttpRequest(); xhr1.open("GET", prefix + "a.txt"); xhr1.addEventListener("load", event => console.log(xhr1.response)); xhr1.send(); console.log("͜Ε͕࠷ऴߦͰ͢"); ࣮ߦ݁Ռ ϩʔυͰ͖ͨΒϨεϙϯεΛίϯιʔϧʹදࣔͯ͠Ͷ
ϑΝΠϧͷಡΈࠐΈɿίʔϧόοΫࠈ ඇಉظॲཧΛͭͳ͛Α͏ͱ͢Δͱωετ͞Εͯݟ௨͕͠ѱ͍ const prefix = "http://localhost:7070/"; const xhr1 = new
XMLHttpRequest(); xhr1.open("GET", prefix + "a.txt"); xhr1.addEventListener("load", event => { const xhr2 = new XMLHttpRequest(); xhr2.open("GET", prefix + "b.txt"); xhr2.addEventListener("load", event => { const xhr3 = new XMLHttpRequest(); xhr3.open("GET", prefix + "c.txt"); xhr3.addEventListener("load", event => { console.log(xhr3.response); }); xhr3.send(); console.log(xhr2.response); }); xhr2.send(); console.log(xhr1.response); }); xhr1.send(); console.log("͜Ε͕࠷ऴߦͰ͢"); DBMMCBDL@IFMMKT ࣮ߦ݁Ռ
ڞ௨෦Λ·ͱΊͯ·ͩͭΒ͍ const prefix = “http://localhost:7070/"; function openFile(url, onload) { const
xhr = new XMLHttpRequest(); xhr.open("GET", url); xhr.addEventListener("load", e => { onload(e, xhr); console.log(xhr.response); }); xhr.send(); } openFile(prefix + "a.txt", (event, xhr) => { openFile(prefix + "b.txt", (event, xhr) => { openFile(prefix + "c.txt", (event, xhr) => {}); }); }); console.log("͜Ε͕࠷ऴߦͰ͢"); DBMMCBDL@IFMMKT ࣮ߦ݁Ռ ϑΝΠϧͷಡΈࠐΈɿίʔϧόοΫࠈ
ɾ+BWB4DSJQUʹ1SPNJTFͱ͍͏Ϋϥε͕͋Δ ɾ1SPNJTFͷΠϯελϯεඇಉظॲཧΛϥοϓͯ͠͏ ɾ1SPNJTF̏ͭͷঢ়ଶΛऔΔ ɹɹɾGVMpMMFEʢྃʣɹॲཧ͕શͯޭͨ͠ ɹɹɾSFKFDUFEʢغ٫ʣɿ్தͰΤϥʔ͕ൃੜͨ͠ ɹɹɾQFOEJOHɿྃغ٫͞Ε͍ͯͳ͍ ɾUIFOϝιουͰ1SPNJTF͕ྃͨ͠Β࣮ߦ͢ΔॲཧΛهड़͢Δ ϓϩϛεͱʁ
ϓϩϛεͷ͍ํΠϝʔδ 1SPNJTF ඇಉظॲཧ UIFO IPHF ʜ GVODUJPOIPHF ʜ \
DPOTUQOFX1SPNJTF ʜ \ ɾ ɾ ɾ ^ SFUVSOQ ^ 1SPNJTFΠϯελϯεΛฦؔ͢IPHF IPHF ʜ 1SPNJTF ඇಉظॲཧ UIFO IPHF ʜ 1SPNJTF ඇಉظॲཧ UIFO IPHF ʜ ɾ ɾ ɾ
ϑΝΠϧͷಡΈࠐΈɿϓϩϛεΛ͏ function openFile(url) { const p = new Promise(function(onFulfilled, onRejected)
{ const xhr = new XMLHttpRequest(); xhr.open("GET", url); xhr.addEventListener("load", e => { console.log(xhr.responseText); onFulfilled(); }); xhr.send(); }); return p; } const prefix = "http://localhost:7070/"; openFile(prefix + "a.txt") .then(() => openFile(prefix + "b.txt")) .then(() => openFile(prefix + "c.txt")); console.log("͜Ε͕࠷ऴߦͰ͢"); QSPNJTF@QBSBEJTFKT ࣮ߦ݁Ռ
ϓϩϛεΛੜͯ͠Δ෦Λॻ͖Լ͢ const p = new Promise( function(onFulfilled, onRejected) { const
xhr = new XMLHttpRequest(); xhr.open("GET", url); xhr.addEventListener("load", e => { console.log(xhr.responseText); onFulfilled(); }); xhr.send(); } ); 1SPNJTFΠϯελϯεΛ࡞ΔΑ ɹ1SPNJTFͷίϯετϥΫλʹԾҾPO'VMpMMFE ͱPO3FKFDUFEͯ͠ ɹɹఆYISͱ͍͏9)3ΦϒδΣΫτΛͭͬͯ͘Ͷ ɹɹYISVSMͷϦιʔεΛ(&5͢ΔϦΫΤετͩΑ ɹɹϦΫΤετඈͯ͠σʔλ͕ϩʔυ͞ΕͨΒҎԼΛ࣮ߦͯ͠Ͷ ɹɹ ɹɹɹɹϨεϙϯεͷςΩετΛίϯιʔϧʹදࣔͯ͠Ͷ ɹɹɹɹԾҾPO'VMpMMFEΛ࣮ߦͯ͠Ͷ ɹɹɹɹʢPO'VMpMMFEؔʣ ɹɹ ɹɹϦΫΤετඈͯ͠Ͷ
ϓϩϛεͷத͜Μͳײ͡ʢͨͿΜʣ 1SPNJTFΦϒδΣΫτΛ࡞Δ 1SPNJTFΦϒδΣΫτͷԾҾPO'VMpMMFE ͱPO3FKFDUFE ɹɹYISͱ͍͏ϦΫΤετΦϒδΣΫτΛ࡞Δ ɹɹ63-ͷϦιʔεΛ(&5͢ΔϦΫΤετ ɹɹϦΫΤετඈͯ͠σʔλ͕ϩʔυ͞ΕͨΒҎԼΛͬͯͶ ɹɹʢ͙͢Εͱݴͬͯͳ͍ʣ ɹɹɹɹϨεϙϯεͷςΩετΛίϯιʔϧʹදࣔ͢Δ ɹɹɹɹԾҾPO'VMpMMFEʹϦΫΤετΦϒδΣΫτ࣮ͯ͠ߦ͢Δ
ɹɹɹɹʢڻዼͷਅ࣮ɿPO'VMpMMFEؔʣ 1SPNJTFΦϒδΣΫτ ໊લͷͳ͍ؔ ୈҾʢؔʣ ʢ͜Εઈରඞཁʣ ୈҾʢؔʣ ඇಉظతʹ࣮ߦ͍ͨ͜͠ͱ ɾ ɾ ɾ const p = new Promise( function(onFulfilled, onRejected) { const xhr = new XMLHttpRequest(); xhr.open("GET", url); xhr.addEventListener("load", e => { console.log(xhr.responseText); onFulfilled(); }); xhr.send(); } ); ྃ࣌ʹ࣮ߦ͍ͨ͜͠ͱ ɾ ɾ ɾ غ٫࣌ʹ࣮ߦ͍ͨ͜͠ͱ ɾ ɾ ɾ
ͷײɿ ɹਖ਼ɺίʔϧόοΫ͚ͩͷํ͕Θ͔Γ͍͢ͷͰɾɾɾʁ
UIFOνΣʔϯΛGPSͰ·ͱΊΒΕΔ function openFile(url) { const p = new Promise(function(onFulfilled, onRejected)
{ const xhr = new XMLHttpRequest(); xhr.open("GET", url); xhr.addEventListener("load", e => { console.log(xhr.responseText); onFulfilled(); }); xhr.send(); }); return p; } const prefix = “http://localhost:7070/"; const dataIds = ["a", "b", "c"]; let promise = Promise.resolve(); // ղܾࡁΈͷۭͷPromiseΛ࡞Δ for (const id of dataIds) { promise = promise.then(() => openFile(prefix + `/${id}.txt`)); } console.log("͜Ε͕࠷ऴߦͰ͢"); QSPNJTF@QBSBEJTFKT ࣮ߦ݁Ռ
ൺֱϑΝΠϧݸ const dataIds = ["a", "b", "c"]; let promise =
Promise.resolve(); for (const id of dataIds) { promise = promise.then(() => openFile(prefix + `${id}.txt`)); } ίʔϧόοΫ openFile(prefix + "a.txt", (event, xhr) => { openFile(prefix + "b.txt", (event, xhr) => { openFile(prefix + "c.txt", (event, xhr) => {}); }); }); ϓϩϛε
ൺֱϑΝΠϧݸ const dataIds = ["a", "b", "c", "d", "e", "f",
"g", "h", "i", “j"]; let promise = Promise.resolve(); for (const id of dataIds) { promise = promise.then(() => openFile(prefix + `${id}.txt`)); } ίʔϧόοΫ openFile(prefix + "a.txt", (event, xhr) => { openFile(prefix + "b.txt", (event, xhr) => { openFile(prefix + "c.txt", (event, xhr) => { openFile(prefix + "d.txt", (event, xhr) => { openFile(prefix + "e.txt", (event, xhr) => { openFile(prefix + “f.txt", (event, xhr) => { openFile(prefix + "g.txt", (event, xhr) => { openFile(prefix + "h.txt", (event, xhr) => { openFile(prefix + "i.txt", (event, xhr) => { openFile(prefix + “j.txt", (event, xhr) => {}); }); }); }); }); }); }); }); }); }); ϓϩϛε
·ͱΊ 1SPNJTF ඇಉظॲཧ UIFO IPHF ʜ IPHF ʜ 1SPNJTF
ඇಉظॲཧ UIFO IPHF ʜ 1SPNJTF ඇಉظॲཧ UIFO IPHF ʜ ɾ ɾ ɾ 1SPNJTFΦϒδΣΫτΛ࡞Δ 1SPNJTFΦϒδΣΫτͷԾҾPO'VMpMMFE ͱPO3FKFDUFE ɹɹYISͱ͍͏ϦΫΤετΦϒδΣΫτΛ࡞Δ ɹɹ63-ͷϦιʔεΛ(&5͢ΔϦΫΤετ ɹɹϦΫΤετඈͯ͠σʔλ͕ϩʔυ͞ΕͨΒҎԼΛͬͯͶ ɹɹʢ͙͢Εͱݴͬͯͳ͍ʣ ɹɹɹɹϨεϙϯεͷςΩετΛίϯιʔϧʹදࣔ͢Δ ɹɹɹɹԾҾPO'VMpMMFEʹϦΫΤετΦϒδΣΫτ࣮ͯ͠ߦ͢Δ ɹɹɹɹʢڻዼͷਅ࣮ɿPO'VMpMMFEؔʣ 1SPNJTFΦϒδΣΫτ ໊લͷͳ͍ؔ ୈҾʢؔʣ ʢ͜Εઈରඞཁʣ ୈҾʢؔʣ ඇಉظతʹ࣮ߦ͍ͨ͜͠ͱ ɾ ɾ ɾ ྃ࣌ʹ࣮ߦ͍ͨ͜͠ͱ ɾ ɾ ɾ غ٫࣌ʹ࣮ߦ͍ͨ͜͠ͱ ɾ ɾ ɾ
αϯϓϧίʔυɺ(JU)VCʹ্͛·ͨ͠ IUUQTHJUIVCDPNDIJIBTPBTZODISPOPVT@TUVEZ ɹɹɹ݁ہࣗͰಈ͔ͯ͠ΈΔͷ͕Ұ൪ʂʂ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ มͳͱ͋ͬͨ͜Βڭ͍͑ͯͩ͘͞ʂ
ࢀߟࢿྉ 1SPNJTFͱBTZODBXBJUͰ+BWB4DSJQUͷඇಉظॲཧΛγϯϓϧʹهड़͢Δ ɹɹIUUQTTCqOFUCMPHTJNQMJGZJOHBTZODDPEFXJUIQSPNJTFBOEBTZODBXBJU ॳΊͯͷ+BWB4DSJQUୈ൛ʕ&4Ҏ߱ͷ࠷৽Σϒ։ൃ ɹɹIUUQTXXXBNB[PODPKQEQ 1SPNJTFʹΑΔ+BWB4DSJQUඇಉظॲཧϨγϐू ɹɹIUUQTTCqOFUCMPHQSPNJTFDPPLCPPLJ