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.3k
JSON & Object Tips
brn
1
510
CA 1Day Youth Bootcamp for Frontend LT
brn
0
970
Modern TypeScript
brn
2
820
javascript - behind the scene
brn
3
750
tc39 proposals
brn
0
890
プロダクト開発とTypeScript
brn
8
2.9k
React-Springでリッチなアニメーション
brn
1
720
Other Decks in Programming
See All in Programming
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
350
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
560
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
190
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
2
220
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
1.9k
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
510
AWS発のAIエディタKiroを使ってみた
iriikeita
1
190
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
340
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.5k
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
320
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
170
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
120
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Agile that works and the tools we love
rasmusluckow
330
21k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.1k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Documentation Writing (for coders)
carmenintech
74
5k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
850
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
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