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
710
Other Decks in Programming
See All in Programming
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
230
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
330
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.4k
AI時代のUIはどこへ行く?
yusukebe
18
8.9k
Ruby Parser progress report 2025
yui_knk
1
440
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
530
AIでLINEスタンプを作ってみた
eycjur
1
230
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
160
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
470
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
120
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
230
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
A Tale of Four Properties
chriscoyier
160
23k
Automating Front-end Workflow
addyosmani
1370
200k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Docker and Python
trallard
45
3.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Into the Great Unknown - MozCon
thekraken
40
2k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
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