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
Hamamatsu.js #3 Promise入門
Search
jacoyutorius
May 18, 2018
Technology
0
360
Hamamatsu.js #3 Promise入門
Hamamatsu.js #3にて発表したPromiseに関する資料です。
https://connpass.com/event/85858/presentation/
jacoyutorius
May 18, 2018
Tweet
Share
More Decks by jacoyutorius
See All by jacoyutorius
Amplify Gen 2 Authentication では Cognito IdentityPool のみでのゲストユーザーへの認可ができない件
jacoyutorius
0
130
kamalでRailsアプリを Amazon Lightsailにデプロイするぞ!
jacoyutorius
0
260
オープンデータとAWSで作っている 浜松市イベントカレンダー
jacoyutorius
0
270
浜松市オープンデータを使ってイベントカレンダーアプリを作りました
jacoyutorius
0
92
Amplifyアプリを 任意のタイミングでデプロイするぞ!
jacoyutorius
1
450
AWS Amplify で翻訳アプリを作った話とAmplifyからカジュアルにCloudWatchLogsにログを送る方法について
jacoyutorius
1
1.4k
AWS App Runner + copilot cli
jacoyutorius
1
1.2k
AWS App Runner + Copilot CLI
jacoyutorius
0
77
covid19対策サイトを通してコミュニティとシビックテックのあり方について思うこと
jacoyutorius
0
410
Other Decks in Technology
See All in Technology
努力家なスクラムマスターが陥る「傍観者」という罠と乗り越えた先に信頼があった話 / 20250830 Takahiro Sasaki
shift_evolve
PRO
2
100
Go で言うところのアレは TypeScript で言うとコレ / Kyoto.なんか #7
susisu
7
2k
会社にデータエンジニアがいることでできるようになること
10xinc
9
1.6k
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
30k
microCMS 最新リリース情報(microCMS Meetup 2025)
microcms
0
230
RAID6 を楔形文字で組んで現代人を怖がらせましょう(実装編)
mimifuwa
1
320
mruby(PicoRuby)で ファミコン音楽を奏でる
kishima
1
310
どこで動かすか、誰が動かすか 〜 kintoneのインフラ基盤刷新と運用体制のシフト 〜
ueokande
0
200
Postman MCP 関連機能アップデート / Postman MCP feature updates
yokawasa
1
200
「守る」から「進化させる」セキュリティへ ~AWS re:Inforce 2025参加報告~ / AWS re:Inforce 2025 Participation Report
yuj1osm
1
160
AIドリブンのソフトウェア開発 - うまいやり方とまずいやり方
okdt
PRO
9
700
小さなチーム 大きな仕事 - 個人開発でAIをフル活用する
himaratsu
0
130
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Statistics for Hackers
jakevdp
799
220k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
780
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
RailsConf 2023
tenderlove
30
1.2k
Why Our Code Smells
bkeepers
PRO
338
57k
Transcript
modern async in JavaScript 2018.5.19 yuto ogi Hamamatsu.js #3
i am… yuto ogi / @jacoyutorius Ruby / Rails JavaScript
/ Vue.js / Nuxt.js AWS
contents •modern async in Javascript •promise (ES6) •async/await (ES7)
purpose •promiseΦϒδΣΫτͷ͍ํΛཧղ͢Δ •callbackʹΑΔඇಉظॲཧͱͷൺֱ •promiseΦϒδΣΫτͷ࡞Γํ •Promise.all •Promise.race
playground in browser •RunKit (https://runkit.com/home/) •CodePen (https://codepen.io/) •Paiza (https://paiza.io/ja)
Promise is what? •ඇಉظॲཧΛநԽͨ͠ΦϒδΣΫτ •ΠϯλʔϑΣʔε͕౷Ұ͞ΕΔ •promise().then().catch(); •ޭ࣌resolveɺࣦഊ࣌reject ΛͦΕͧΕݺͿ •PromiseΦϒδΣΫτͷ࡞ •var
promise = new Promise(function(resolve, reject){ });
callback is troublesome •ωετ͕ਂ͘ͳΓ͕ͪ •Τϥʔ࣌ͷॲཧͷॻ͖ํ͕౷Ұ ͞Εͳ͍
callback Result => “hi!ABC” https://runkit.com/jacoyutorius/callback-is-troublesome A, B, C ͷ֤ϝιουͷॲཧॱΛ୲อ͢ΔͨΊίʔϧ όοΫΛ͏͕ɺωετ͕ਂ·ͬͯ͠·͏ɻ
Ex.1
promise Result => “hi!pApBpC” https://runkit.com/jacoyutorius/callback-is-troublesome Promise.then() ͰϝιουνΣΠϯ͢Δ͜ͱͰɺඇ ಉظॲཧͷॲཧॱΛ୲อ͢Δ͜ͱ͕Ͱ͖Δɻ pA, pB,
pC ϝιουʹͯͦΕͧΕpromiseΦϒδΣ ΫτΛฦ͢ඞཁ͕͋Δɻ Ex.1
Ex.2 API call by callback https://runkit.com/jacoyutorius/promise-call-api-sample-2 (JUIVCͷ"1*ΑΓɺਓؾϨϙδτϦͷҰཡΛऔಘ ͷϦετͷ൪ͷϨίʔυ ࠷ਓؾͷ͋ΔϨϙδτϦ ͷzDPOUSJCVUPST@VSMzΑΓίϯτϦϏϡʔλͷҰཡΛऔಘ
ͷ݁ՌΑΓɺίϯτϦϏϡʔλͷαϜωΠϧΛJNHλάͰׅͬͨྻΛ࡞
Ex.2 API call by promise https://runkit.com/jacoyutorius/promise-call-api-sample-2
•new Promise(fn) ͷΓ͕promiseΦϒδΣΫτ •fnʹඇಉظॲཧΛॻ͘ •fnresolveͱrejectͷ2ͭͷҾΛͱΔ •fn(resolve, reject) •ॲཧ݁Ռ͕ਖ਼ৗͰ͋ΕresolveɺΤϥʔͰ͋ΕrejectΛݺͿ creating new
Promise
creating new Promise Result => {user: “yuto”} https://runkit.com/jacoyutorius/creating-new-promise new Promiseʹ͢callbackʹඇಉظॲཧΛ࣮͢Δɻ
ॲཧͷ࠷ظͰresolve͔rejectͷ͍ͣΕ͔ΛݺͿɻ promiseΦϒδΣΫτͷॲཧ݁Ռ.thenͰड͚औΔɻ
creating new Promise Result => “error!” https://runkit.com/jacoyutorius/creating-new-promise .then(onFulfilled, onRejected) onFulfilledresolve͕ݺΕͨࡍͷΓΛड͚औΔɻ
onRejectedreject͕ݺΕͨࡍͷ݁ՌΛड͚औΔɻ
creating new Promise Result => “error!” https://runkit.com/jacoyutorius/creating-new-promise .catch() reject͕ݺΕͨࡍͷ݁ՌΛड͚͚Δϝιουɻ Promise.catch(“ࣦഊ࣌ͷίʔϧόοΫ”)
= Promise.then(undefined, “ࣦഊ࣌ͷίʔϧόοΫ”)
method chain (promise chain) Result => 1 => 3 =>
5 https://runkit.com/jacoyutorius/promise-method-chain
error handling Result => 1 => “Error!” https://runkit.com/jacoyutorius/promise-method-chain
Promise.all •Promise.all() ʹPromiseΦϒδΣΫτͷྻΛ͢ •ͨ͠promiseΦϒδΣΫτ͕શͯྃ͢Δͱɺ.then() ʹPromiseΦϒδΣ ΫτͷฦΓ͕ྻͰฦͬͯ͘Δ
Promise.all Result => [1, 2] https://runkit.com/jacoyutorius/promise-all
Promise.race •Promise.race() ʹPromiseΦϒδΣΫτͷྻΛ͢ •ͨ͠promiseΦϒδΣΫτͷ͏͍ͪͣΕ͔͕ྃ͢Δͱɺ.then() ʹྃ ͨ͠PromiseΦϒδΣΫτͷฦΓ͕ฦͬͯ͘Δ •ଞͷpromiseΦϒδΣΫτΩϟϯηϧ͞ΕΔΘ͚Ͱͳ͘ɺ࣮ߦ͞ΕΔ • promiseʹΩϟϯηϧͱ͍͏֓೦ͳ͍ •λΠϜΞτॲཧΛ࣮͢Δࡍʹ͏ͱྑ͍Β͍͠
Promise.race Result => 2 https://runkit.com/jacoyutorius/promise-all
end •PromiseͰҰ൪େ͖͍ͷඇಉظॲཧͷॻ͖ํ͕౷Ұ͞ΕΔ͜ͱ •ͱ͍͑ɺۙͷjsϑϨʔϜϫʔΫnpmύοέʔδͰΓ͕PromiseΦϒδΣΫτ ͷͷ͕΄ͱΜͲͳͷͰԡ͓͖͍͑ͯͨ͞ •promiseͷଞʹ࠷ۙΑ͘ݟ͔͚Δ͜ΕΒˣͷػೳ •async/await •Arrow function •ԡ͓͖͍͑ͯͨ͞ɻશ͘ະͷػೳͱ͍͏Θ͚Ͱͳ͍ͷͰ࠷ॳྲྀ͢ఔͰ͍͍͔
docs. •JavaScript MDN (https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/ Using_promises) •JavaScript Promiseͷຊ (http://azu.github.io/promises-book/)