ES2018 AsyncIteratorでキメる

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

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דְֽתׅ