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
javascriptの非同期処理・過去と未来
Search
Taketoshi Aono(青野健利 a.k.a brn)
June 07, 2017
Programming
0
150
javascriptの非同期処理・過去と未来
javascriptの非同期処理の振り返りと、未来の実装についての紹介
Taketoshi Aono(青野健利 a.k.a brn)
June 07, 2017
Tweet
Share
More Decks by Taketoshi Aono(青野健利 a.k.a brn)
See All by Taketoshi Aono(青野健利 a.k.a brn)
document.write再考
brn
6
3k
Parsing Javascript
brn
14
9.2k
JSON & Object Tips
brn
1
490
CA 1Day Youth Bootcamp for Frontend LT
brn
0
940
Modern TypeScript
brn
2
800
javascript - behind the scene
brn
3
740
tc39 proposals
brn
0
870
プロダクト開発とTypeScript
brn
8
2.9k
React-Springでリッチなアニメーション
brn
1
690
Other Decks in Programming
See All in Programming
WindowInsetsだってテストしたい
ryunen344
1
190
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
1
110
Create a website using Spatial Web
akkeylab
0
300
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
17
3.3k
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1k
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
910
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
170
ドメインモデリングにおける抽象の役割、tagless-finalによるDSL構築、そして型安全な最適化
knih
11
2k
ReadMoreTextView
fornewid
1
460
GraphRAGの仕組みまるわかり
tosuri13
7
480
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
250
ニーリーにおけるプロダクトエンジニア
nealle
0
130
Featured
See All Featured
Speed Design
sergeychernyshev
32
1k
A better future with KSS
kneath
239
17k
Git: the NoSQL Database
bkeepers
PRO
430
65k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Automating Front-end Workflow
addyosmani
1370
200k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
Statistics for Hackers
jakevdp
799
220k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Rails Girls Zürich Keynote
gr2m
94
14k
Transcript
Past and Future of Asynchronous Javascript
せ: @brn (ꫬꅿ⨳ⵃ) 耵噟: ؿٗٝزؒٝسؒٝآص،٥ط؎ذ؍ـؒٝآص، ⠓爡: Cyberagent ،سذؙأةآؔRightSegment٥AI Messenger ـؚٗ:
http://abcdef.gets.b6n.ch/
What is Asynchronous? javascriptחֶֽꬊず劍Ⳣ椚הכծךةأָؙ植㖈ךjavascriptךstack ♳ח㶷㖈ׇ׆ծ㼛勻ךוַֿך儗挿דⱄןstack♳ח䗁䌓ׅⳢ椚ד֮կ
What is Asynchronous? e e. .g g. . s se
et tT Ti im me eo ou ut t setTimeoutꟼ侧כ植㖈ך؝٦ٕأةحؙ♳דㄎן⳿ׁהծ䭷㹀ׁ 儗דأ؛آُ٦ٕ涫ꐮ׃Ⳣ椚穄✪ָׅծ䭷㹀ׁ儗ָ穗麓ׅ הծ植㖈ךⳢ椚ךⴖ湡ח؝٦ٕغحؙꟼ侧ָㄎן⳿ׁկ
Callback ֿך״ֲזꬊず劍ةأؙⳢ椚ׅךחծjavascriptדכꟼ侧ؔـآؙؑز 䒷侧ח床ׅ؝٦ٕغحؙ䕎䒭⢪גְկ someAsyncJob(function() {…}); ֿכꟼ侧㘗鎉铂דכ竰竲床׃הㄎלךדׅկ
jQuery.Deferred jQueryדכֿךꬊず劍Ⳣ椚Deferredהְֲ倯岀דֲתֻⳢ椚׃ג ְת׃կ function delayHello() { var d = new
$.Deferred; setTimeout(function(){ d.resolve('Hello'); }, 1000); return d.promise(); } delayHello().done(function(word) {console.log(word)})
Promise/A+ ַאגծNodejsהWebךjs垥彊⻉׃״ֲה׃ծCommonJSהְֲ穈籼 ָ倜זꬊず劍Ⳣ椚堣圓㹀纏ׅկ ך➿邌涸ז㹋鄲ד֮Qך؝٦س Q.fcall(promisedStep1) .then(promisedStep2) .then(promisedStep3) .then(promisedStep4) .then(function (value4)
{ // Do something with value4 }) .catch(function (error) { // Handle any error from all above steps }) .done();
Promise ׃גծאְחEcmascriptחPromiseָ㼪Ⰵׁ const p = new Promise((resolve, reject) => {
setTimeout(() => resolve('hello')); }); p.then(word => console.log(word));
Problems ծPromiseָ؝٦ٕغحؙך㉏겗挿ׅץג鍑寸׃הכ鎉ְꨇְկ 穠㽷䕎㢌ִ؝٦ٕغحؙ䕎䒭ד׃ַזְךדծ؝٦سָ醱꧟חזהծ ּׅ鋅בֻזկ const p = new Promise(resolve =>
{ setTimeout(() => resolve('hello')); }) p.then(word => { setTimeout(() => resolve(`${word} world`)); }) .then(word => console.log(word));
Generator & co ׁחծGeneratorEcmascriptח㼪Ⰵׁկ Generator⽃⡤דכꬊず劍Ⳣ椚ך㉏겗כ鍑寸דֹזְָծcoػح؛٦آ ⢪ֲה⟃♴ך圫חזկ const hello = ()
=> new Promise(resolve => { setTimeout(() => resolve("hello"), 300); }); const world = () => new Promise(resolve => { setTimeout(() => resolve("world"), 300); }); co(function* () { var hello = yield hello(); var world = yield world(); return `${hello} ${world}`; }).then(word => console.log(value));
async & await ׃גծֿ驎תִծasync awaitהְֲ堣圓ָES7חג䱰欽ׁկ ֿכPromiseⷚ涸ח何㊣׃ծקר䩛竲ֹ倯ך膷דꬊず劍Ⳣ椚鎸鶢ד ֹկ async helloWorld() {
const hello = await new Promise(resolve => { setTimeout(() => resolve('hello')); }); const word = await new Promise(resolve => { setTimeout(() => resolve('world')); }); console.log(`${hello} ${world}`) }
Asynchronous Iterators ׃ծasync awaitג׃גꬊず劍ٕ٦فכ㺁僒דכזְկ ֿדծAsynchronous Iteratorsהְֲ➬圫ָ䲿周⚥דծ植㖈Stage3 ח֮կ async function* readLines(path)
{ let file = await fileOpen(path); try { while (!file.EOF) { yield await file.readLine(); } } finally { await file.close(); } } for await (const line of readLines(filePath)) { console.log(line); }
➙וֲׅץַֹ 植㖈ך؝٦س؝٦ٕغحؙ䕎䒭ד剅ְגְ㜥さծכּׅװ״ֲկ ꬊ䌢ח؝٦سأ؛٦ׇׁٕךָꨇ׃ֻז׃ծغؚך庛䎮חזկ • Babel٥typescriptⵃ欽׃גְזasync٥await⢪ְת׃׳ֲկ • 稆ךJSזBluebird㼪Ⰵׅկ • 㢩鿇ךٓ؎ـָٓٔ⢪ִזְז知僒Promise㹋鄲ׅկ https://gist.github.com/brn/4f639a5bdb845f0aebe8e0725691a442