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
350
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
90
kamalでRailsアプリを Amazon Lightsailにデプロイするぞ!
jacoyutorius
0
160
オープンデータとAWSで作っている 浜松市イベントカレンダー
jacoyutorius
0
250
浜松市オープンデータを使ってイベントカレンダーアプリを作りました
jacoyutorius
0
89
Amplifyアプリを 任意のタイミングでデプロイするぞ!
jacoyutorius
1
440
AWS Amplify で翻訳アプリを作った話とAmplifyからカジュアルにCloudWatchLogsにログを送る方法について
jacoyutorius
1
1.3k
AWS App Runner + copilot cli
jacoyutorius
1
1.1k
AWS App Runner + Copilot CLI
jacoyutorius
0
67
covid19対策サイトを通してコミュニティとシビックテックのあり方について思うこと
jacoyutorius
0
400
Other Decks in Technology
See All in Technology
AIエージェントデザインパターンの選び方
almondo_event
0
140
GoogleのAI Agent
shukob
0
100
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
12k
OSMnx Galleryの紹介
mopinfish
0
150
MCP Clientを活用するための設計と実装上の工夫
yudai00
1
750
シンプルな設定ファイルで実現する AWS IAM Identity Center のユーザー管理と開発チームへの委譲 / Delegating AWS IAM Identity Center User Management with a Simple DSL
yamaguchitk333
3
560
AIのための オンボーディングドキュメントを整備する - hirotea
hirotea
9
2.3k
データプレーンプログラミングとは? DPU&スイッチASICの開発経験から語る
ebiken
PRO
1
260
面接を通過するためにやってて良かったこと3選
sansantech
PRO
0
130
“⾞が通れるほど⼤きな”セキュリティーホールを抑えながらログインしたい
taiseiue
0
150
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.2k
プロジェクトマネジメント実践論|現役エンジニアが語る!~チームでモノづくりをする時のコツとは?~
mixi_engineers
PRO
3
180
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
A designer walks into a library…
pauljervisheath
205
24k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
1
77
GitHub's CSS Performance
jonrohan
1031
460k
It's Worth the Effort
3n
184
28k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Faster Mobile Websites
deanohume
307
31k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.8k
RailsConf 2023
tenderlove
30
1.1k
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/)