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

ES2018 AsyncIteratorでキメる

ES2018 AsyncIteratorでキメる

EcmascriptのAsyncIteratorがどのように動くのか、iterator/generator/async・awaitの解説

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

Other Decks in Programming

Transcript

  1. AsyncIterator

  2. せ⵸: @brn (ꫬꅿ⨳ⵃa.k.a ـٕ٦ظ) 耵噟: ؿٗٝزؒٝسؒٝآص،٥iOSؒٝآص، ⠓爡: Cyberagent ،سذؙأةآؔRightSegment٥AI Messenger

    ـؚٗ: http://abcdef.gets.b6n.ch/ Twitter: https://twitter.com/brn227 GitHub: https://github.com/brn
  3. Iterator/Generator EcmascriptךIterator/Generator⢪׏גתַׅ 兛鸐חWeb،فٔ׾剅ְגְ׷הծ䛊׵ֻ湫䱸涸חIterator/ Generator׾⢪ֲֿהכזְה䙼ְתׅկ redux-sagaהַ⢪׏גְ׸ל꼧厩׫ָ֮׷ַ׮׃׸תׇ׿ָկ זךדה׶ִ֮׆ծIterator/Generatorָו׿ז׮ךזךַ䮶׶鵤׏ ג׫ת׃׳ֲկ

  4. Iterator ת׆כ鸐䌢ךIteratorדׅկIterator荈 ⡤כ暴ⴽז圓俑׾䗳銲הׇ׆ծ 鸐䌢ךJavascriptؔـآؙؑزה׃ג 鎸鶢〳腉דׅկ

  5. const arr = [1, 2, 3, 4, 5];! ! function

    iterator(arr) {! let currentIndex = 0;! const { length } = arr;! return {! next() {! return arr[currentIndex++];! },! done() {! return length =< currentIndex;! }! }! }! const iter = iterator(arr);! iter.next();! iter.next();!
  6. Generator ⯓玎ךIteratorכ然ַחIteratorה׃ג ⹛⡲׃תָׅծ 荈ⴓדꂁ⴨ך؎ٝرحؙأ׾盖椚׃׋ ׶הׅ׷ךכ⡦ַה꬗⦜דׅկ ؟ؙحהءٝفٕח剅ֹ׋ְ…! ׉ֿדGenerator׾ⵃ欽׃תׅկ

  7. const arr = [1, 2, 3, 4, 5];! ! function

    generator(arr) {! const { length } = arr;! for (let i = 0; i < length; i++) {! yield arr[i];! }! }! const iter = generator(arr);! iter.next();! iter.next();!
  8. for-of ׭׍ׯֻ׍ׯءٝفٕחז׶ת׃׋կ ֿ׸ד׮⼧ⴓ⢪ְ麣כ֮׷׿דָׅծ ㉏겗挿ָ♧אկ ׉׸כiter.next()׾ㄎן竲ֽזְהְ ֽזְֿהկ ֿ׸כְֽגתׇ׿יկ ׁג׉ֿדfor-ofٕ٦ف׾崞欽׃תׅկ

  9. for (const value of generator(arr)) {! console.log(value);! }!

  10. Symbol.iterator 馄知⽃דׅיw ֿ׸דו׿ז׮ךד׮ٕ٦فד㔐ׇ׷״ֲחז׶ת׃׋կ ׋׌ծ嫣㔐generatorꟼ侧ח⦼׾床ׅךכ꬗⦜דׅ״יկ ׉׮׉׮ؔـآؙؑز荈⡤ָiterator׾䭯׏גְ׷ךָؔـآؙؑز 䭷ぢדכ姻׃ְ㪦ךכ׆կ ׉ֿדSymbol.iteratorךדׅկ

  11. class MakanaiTechIterator {! *[Symbol.iterator]() {! yield "makanai";! yield "tech";! yield

    "teamspirit";! }! }! const mti = new MakanaiTechIterator();! for (const word of mti) {! console.log(word);! // makanai tech word! }! 
  12. yield* 㹋כծSymbol.iteratorכString/Array/ TypedArray/Set/Map瘝ךؽٕز؎ٝ ؔـآؙؑزחرؿٕؓزד㹀纏ׁ׸ גֶ׶ծ ⯓玎ך״ֲחٕ٦فⰻדyield׾剅ְג ⚥ך⦼׾《׶⳿ׅ䗳銲כזְךדׅկ ׉ֿדⴽךiterator׾ㄎן⳿ׅ׋׭חծ 㨻⟣generator圓俑׾ⵃ欽׃תׅկ

  13. function *iter() {! yield *['makanai', "tech", "teamspirit"];! }!

  14. Async٥Await IteratorכOKדׅי ׁגֶ如כES7ַ׵㼪Ⰵׁ׸׋Async٥Await⢪׏גתַׅ AsyncIterator׾ًؗ׷⵸חծ Async٥Awaitָ׉׮׉׮ו׿ז堣腉זךַ䮶׶鵤׶ת׃׳ֲկ

  15. async function timer(callback) {! return new Promise(resolve => {! setTimeout(()

    => resolve(callback()), 1000);! })! }! ! async function wait() {! const result = await timer(() => 'teamspirit!');! return result;! }! ! wait().then(v => console.log(v));!
  16. Async٥Await PromiseכOKדׅ״י Promiseחאְגכazuׁ׿ך剅ְ׋Javascript٥Promiseך劤׾铣׿דֻ׌ ְׁկ http://azu.github.io/promises-book/ Asyncכ➰♷ׅ׷ֿהדꟼ侧ך䨱׶⦼ָ荈⹛涸חPromiseחז׶תׅկ Awaitכasyncꟼ侧ⰻדך׫鎸鶢〳腉דծ Promise׾֮׋ַ׮ず劍涸ַך״ֲח鎸鶢ׅ׷ֿהָדֹתׅկ

  17. AsyncIterator ׁג➙㔐ך劤겗ךAsyncIteratorדׅ ֿ׸כ➙תד稱➜׃׋堣腉ךさ׻ׇ䪮הז׶תׅկ ׍׳׏ה醱꧟חז׶תָׅ鋅גְֹת׃׳ֲ٦

  18. async function* asyncIterator() {! yield await fetch("/a");! yield await fetch("/b");!

    yield await fetch("/c");! }! const it = asyncIterator();! it.next().then(({value, done}) => {! console.log(value);! });! 
  19. AsyncIterator 穠卓涸חIteratorדٓحفׁ׸׋Promiseָ鵤׏גֹתׅկ ׃ַ׃ֿךתת׌ה⦼׾《׶⳿ׅך׮蕱汤׌׃ծ 剣欽䚍׮זְ…

  20. async function* asyncIterator() {! yield await fetch("/a");! yield await fetch("/b");!

    yield await fetch("/c");! }! async function main() {! for await (const v of asyncIterator()) {! console.log(v) // Response object.! }! }!
  21. for-await-of Iteratorדٓحفׁ׸׋Promise׾鐰⣣ׅ׷ծꬊず劍ٕ٦ف堣腉דׅկ AsyncIterator׾「ֽ׷ֿהד⦼ָ䌓׏גֹ׋הֹך׫ٕ٦فنر؍ ׾㹋遤׃תׅկ

  22. Sagu for-await-ofהAsyncIterator׾穈׫さ׻ׇ׷ה눤岀ך״ֲז؝٦سָ ⹛⡲ׅ׷״ֲחז׶תׅկ ׉ֿדծAsyncIterator׾崞欽׃׋ٓ؎ـٓٔ Sagu(Simple Async Generator Util)הְֲ׮ך׾⡲׏ג׫ת׃׋կ https://github.com/brn/sagu

  23. Sagu with Stream-API Stream-APIהSaguדًؗ׷

  24. // Stream! const st = stream('http://ex.com/stream', {binary: true});! for await

    (const {chunk, ok, done} of st) {! console.log(chunk.read());! }!
  25. Sagu with DOM-Event DOM-EventהSaguדًؗ׷

  26. // DOM-Event! const a = document.querySelector('a');! for await (const {event,

    dispose} of event(a, 'click')) {! console.log(event.target.nodeName);! }!
  27. Sagu with Socket.IO Socket.IOהSaguדًؗ׷

  28. // Socket.IO! const URL = 'http://www.sample.com/ws';! for await (const {type,

    event} of ws(URL, io)) {! switch (type) {! case 'connection':! ...! case 'request':! ...! }! ...! }!
  29. Summary AsyncIteratorכ葿ղ嚂׃׭׷ךד僽ꬊ鍗׏ג׫גֻ׌ְׁկ 兛鸐ח⢪׻׸׷״ֲחז׏׋׵ꬊず劍Ⳣ椚כ׌ְע㢌׻׶׉ֲדׅկ 植㖈Babelדstage-3דְֽתׅ