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
140
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
5
2.5k
Parsing Javascript
brn
12
6.9k
JSON & Object Tips
brn
1
280
CA 1Day Youth Bootcamp for Frontend LT
brn
0
660
Modern TypeScript
brn
2
680
javascript - behind the scene
brn
3
590
tc39 proposals
brn
0
640
プロダクト開発とTypeScript
brn
8
2.7k
React-Springでリッチなアニメーション
brn
1
490
Other Decks in Programming
See All in Programming
MySQL のインデックスの種類をおさらいしよう! / overviewing indexes in MySQL
okashoi
0
170
両面どころかインフラもTSでできるよ ~ 全方位TypeScriptによるプロダクト開発 ~
myfinder
9
2.4k
クソコード動画『カプセル化 Mk-II』 で考える 上手くカプセル化できない理由 / encapsulation2
minodriven
11
8k
ファイル先頭の use の意味、説明できますか? 〜PHP の namespace と autoloading の関係を正しく理解しよう〜 / namespace and autoloading in php
okashoi
2
470
受託開発でGitLab CI を活用していく
xiombatsg
1
130
PHPでOfficeファイルを取り扱う! PHP Officeライブラリを プロダクトに組み込んだ話
hirobe1999
0
840
【KMC春合宿2024】実装視点で見るNeural Radiance Fields
runningoutrate
0
150
Introduction for Open Source Swift Workshop
giginet
PRO
0
290
PHP8の機能を使って堅牢にコードを書く
fendo181
6
2.6k
プロンプトエンジニアリング入門
tomokusaba
2
980
AppDeveloperCon 2024 EU: Building polyglot developer experiences in 2024
salaboy
0
380
App Router への移行は「改善」となり得るのか?/ Can migration to App Router be an improvement
takefumiyoshii
1
130
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
407
22k
Building Applications with DynamoDB
mza
88
5.6k
The World Runs on Bad Software
bkeepers
PRO
60
6.6k
Designing on Purpose - Digital PM Summit 2013
jponch
109
6.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
12
1.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
15
6.3k
The Invisible Side of Design
smashingmag
293
49k
Six Lessons from altMBA
skipperchong
19
2.9k
The Power of CSS Pseudo Elements
geoffreycrofte
58
4.9k
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