Upgrade to Pro — share decks privately, control downloads, hide ads and more …

javascriptの非同期処理・過去と未来

 javascriptの非同期処理・過去と未来

javascriptの非同期処理の振り返りと、未来の実装についての紹介

More Decks by Taketoshi Aono(青野健利 a.k.a brn)

Other Decks in Programming

Transcript

  1. Past and Future of Asynchronous Javascript

  2. せ⵸: @brn (ꫬꅿ⨳ⵃ) 耵噟: ؿٗٝزؒٝسؒٝآص،٥ط؎ذ؍ـؒٝآص، ⠓爡: Cyberagent ،سذؙأةآؔRightSegment٥AI Messenger ـؚٗ:

    http://abcdef.gets.b6n.ch/
  3. What is Asynchronous? javascriptחֶֽ׷ꬊず劍Ⳣ椚הכծ׉ךةأָؙ植㖈ךjavascriptךstack ♳ח㶷㖈ׇ׆ծ㼛勻ךוַֿך儗挿דⱄןstack♳ח䗁䌓ׅ׷Ⳣ椚ד֮׷կ

  4. What is Asynchronous? e e. .g g. . s se

    et tT Ti im me eo ou ut t setTimeoutꟼ侧כ植㖈ך؝٦ٕأةحؙ♳דㄎן⳿ׁ׸׷הծ䭷㹀ׁ׸׋ 儗꟦דأ؛آُ٦ٕ涫ꐮ׃Ⳣ椚׾穄✪ׅ׷ָծ䭷㹀ׁ׸׋儗꟦ָ穗麓ׅ׷ הծ植㖈ךⳢ椚ךⴖ׸湡ח؝٦ٕغحؙꟼ侧ָㄎן⳿ׁ׸׷կ
  5. Callback ֿך״ֲזꬊず劍ةأؙ׾Ⳣ椚ׅ׷ךחծjavascriptדכꟼ侧ؔـآؙؑز ׾䒷侧ח床ׅ؝٦ٕغحؙ䕎䒭׾⢪׏גְ׋կ someAsyncJob(function() {…}); ֿ׸כꟼ侧㘗鎉铂דכ竰竲床׃הㄎל׸׷׮ךדׅկ

  6. 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)})
  7. 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();
  8. Promise ׉׃גծאְחEcmascriptחPromiseָ㼪Ⰵׁ׸׷ const p = new Promise((resolve, reject) => {

    setTimeout(() => resolve('hello')); }); p.then(word => console.log(word));
  9. Problems ׋׌ծPromiseָ؝٦ٕغحؙך㉏겗挿׾ׅץג鍑寸׃׋הכ鎉ְꨇְկ 穠㽷䕎׾㢌ִ׋؝٦ٕغحؙ䕎䒭ד׃ַזְךדծ؝٦سָ醱꧟חז׷הծ ּׅ鋅ב׵ֻז׷կ const p = new Promise(resolve =>

    { setTimeout(() => resolve('hello')); }) p.then(word => { setTimeout(() => resolve(`${word} world`)); }) .then(word => console.log(word));
  10. Generator & co ׁ׵חծGenerator׮Ecmascriptח㼪Ⰵׁ׸׷կ 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));
  11. 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}`) }
  12. 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); }
  13. ➙וֲׅץַֹ 植㖈ך؝٦س׾؝٦ٕغحؙ䕎䒭ד剅ְגְ׷㜥さծ׉׸כּׅװ׭״ֲկ ꬊ䌢ח؝٦س׾أ؛٦ׇׁٕ׷ךָꨇ׃ֻז׷׃ծغؚך庛䎮חז׷կ •  Babel٥typescript׾ⵃ欽׃גְ׷ז׵async٥await׾⢪ְת׃׳ֲկ •  稆ךJSז׵Bluebird׾㼪Ⰵׅ׷կ •  㢩鿇ךٓ؎ـָٓٔ⢪ִזְז׵知僒Promise׾㹋鄲ׅ׷կ https://gist.github.com/brn/4f639a5bdb845f0aebe8e0725691a442