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
120
kamalでRailsアプリを Amazon Lightsailにデプロイするぞ!
jacoyutorius
0
250
オープンデータと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
76
covid19対策サイトを通してコミュニティとシビックテックのあり方について思うこと
jacoyutorius
0
410
Other Decks in Technology
See All in Technology
帳票Vibe Coding
terurou
0
140
認知戦の理解と、市民としての対抗策
hogehuga
0
370
「AI2027」を紐解く ― AGI・ASI・シンギュラリティ
masayamoriofficial
0
110
Devinを使ったモバイルアプリ開発 / Mobile app development with Devin
yanzm
0
190
あとはAIに任せて人間は自由に生きる
kentaro
3
1.1k
広島銀行におけるAWS活用の取り組みについて
masakimori
0
140
アジャイルテストで高品質のスプリントレビューを
takesection
0
120
実践アプリケーション設計 ①データモデルとドメインモデル
recruitengineers
PRO
3
370
Postman MCP 関連機能アップデート / Postman MCP feature updates
yokawasa
1
160
実践アプリケーション設計 ②トランザクションスクリプトへの対応
recruitengineers
PRO
3
380
GitHub Copilot coding agent を推したい / AIDD Nagoya #1
tnir
4
4.7k
夢の印税生活 / Life on Royalties
tmtms
0
290
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Optimizing for Happiness
mojombo
379
70k
Designing for humans not robots
tammielis
253
25k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
How GitHub (no longer) Works
holman
315
140k
A Tale of Four Properties
chriscoyier
160
23k
GraphQLとの向き合い方2022年版
quramy
49
14k
For a Future-Friendly Web
brad_frost
179
9.9k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
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/)