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
830
JavaScriptのPromiseをわかりやすく説明したい
勉強していてなかなか理解できずつらかったPromiseについて、自分なりにわかりやすい形で、実例を出して説明します。
chihaso
February 15, 2020
Tweet
Share
More Decks by chihaso
See All by chihaso
孤独のRubyKaigi
chihaso
0
150
CSVこわい - 複雑なフォーマットのCSVを取り込むアプリを作りました
chihaso
1
76
Other Decks in Programming
See All in Programming
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
330
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
160
エンジニア向け採用ピッチ資料
inusan
0
160
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
irof
1
300
CursorはMCPを使った方が良いぞ
taigakono
1
170
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
110
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
800
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
570
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
390
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
980
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
220
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Why Our Code Smells
bkeepers
PRO
337
57k
Typedesign – Prime Four
hannesfritz
42
2.7k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
210
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Designing for Performance
lara
609
69k
Music & Morning Musume
bryan
46
6.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
RailsConf 2023
tenderlove
30
1.1k
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