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
280
浜松市オープンデータを使ってイベントカレンダーアプリを作りました
jacoyutorius
0
93
Amplifyアプリを 任意のタイミングでデプロイするぞ!
jacoyutorius
1
460
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
AI時代を生き抜くエンジニアキャリアの築き方 (AI-Native 時代、エンジニアという道は 「最大の挑戦の場」となる) / Building an Engineering Career to Thrive in the Age of AI (In the AI-Native Era, the Path of Engineering Becomes the Ultimate Arena of Challenge)
jeongjaesoon
0
150
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
270
まずはマネコンでちゃちゃっと作ってから、それをCDKにしてみよか。
yamada_r
2
110
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
220
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
170
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
230
2つのフロントエンドと状態管理
mixi_engineers
PRO
3
110
「Linux」という言葉が指すもの
sat
PRO
4
130
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
120
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
290
【初心者向け】ローカルLLMの色々な動かし方まとめ
aratako
7
3.5k
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.2k
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
Into the Great Unknown - MozCon
thekraken
40
2k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Designing for humans not robots
tammielis
253
25k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Typedesign – Prime Four
hannesfritz
42
2.8k
Code Review Best Practice
trishagee
70
19k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Become a Pro
speakerdeck
PRO
29
5.5k
GraphQLとの向き合い方2022年版
quramy
49
14k
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/)