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
100
kamalでRailsアプリを Amazon Lightsailにデプロイするぞ!
jacoyutorius
0
200
オープンデータとAWSで作っている 浜松市イベントカレンダー
jacoyutorius
0
260
浜松市オープンデータを使ってイベントカレンダーアプリを作りました
jacoyutorius
0
91
Amplifyアプリを 任意のタイミングでデプロイするぞ!
jacoyutorius
1
440
AWS Amplify で翻訳アプリを作った話とAmplifyからカジュアルにCloudWatchLogsにログを送る方法について
jacoyutorius
1
1.4k
AWS App Runner + copilot cli
jacoyutorius
1
1.1k
AWS App Runner + Copilot CLI
jacoyutorius
0
72
covid19対策サイトを通してコミュニティとシビックテックのあり方について思うこと
jacoyutorius
0
400
Other Decks in Technology
See All in Technology
BigQuery Remote FunctionでLooker Studioをインタラクティブ化
cuebic9bic
2
230
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
390
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
140
_第3回__AIxIoTビジネス共創ラボ紹介資料_20250617.pdf
iotcomjpadmin
0
140
Welcome to the LLM Club
koic
0
140
PHPでWebブラウザのレンダリングエンジンを実装する
dip_tech
PRO
0
170
エンジニア向け技術スタック情報
kauche
0
110
AWS CDK 実践的アプローチ N選 / aws-cdk-practical-approaches
gotok365
4
520
Observability в PHP без боли. Олег Мифле, тимлид Altenar
lamodatech
0
290
Definition of Done
kawaguti
PRO
6
460
rubygem開発で鍛える設計力
joker1007
1
130
Кто отправит outbox? Валентин Удальцов, автор канала Пых
lamodatech
0
290
Featured
See All Featured
Writing Fast Ruby
sferik
628
61k
Practical Orchestrator
shlominoach
188
11k
Adopting Sorbet at Scale
ufuk
77
9.4k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
Docker and Python
trallard
44
3.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.9k
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/)