Slide 1
Slide 1 text
AsyncIterator
Slide 2
Slide 2 text
せ: @brn (ꫬꅿ⨳ⵃa.k.a ـٕ٦ظ)
耵噟: ؿٗٝزؒٝسؒٝآص،٥iOSؒٝآص،
⠓爡: Cyberagent ،سذؙأةآؔRightSegment٥AI Messenger
ـؚٗ: http://abcdef.gets.b6n.ch/
Twitter: https://twitter.com/brn227
GitHub: https://github.com/brn
Slide 3
Slide 3 text
Iterator/Generator
EcmascriptךIterator/Generator⢪גתַׅ
兛鸐חWeb،فٔ剅ְגְהծ䛊ֻ湫䱸涸חIterator/
Generator⢪ֲֿהכזְה䙼ְתׅկ
redux-sagaהַ⢪גְל꼧厩ַָ֮׃תׇָկ
זךדהִ֮׆ծIterator/Generatorָוזךזךַ䮶鵤
גת׃׳ֲկ
Slide 4
Slide 4 text
Iterator
ת׆כ鸐䌢ךIteratorדׅկIterator荈
⡤כ暴ⴽז圓俑䗳銲הׇ׆ծ
鸐䌢ךJavascriptؔـآؙؑزה׃ג
鎸鶢〳腉דׅկ
Slide 5
Slide 5 text
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();!
Slide 6
Slide 6 text
Generator
⯓玎ךIteratorכ然ַחIteratorה׃ג
⹛⡲׃תָׅծ
荈ⴓדꂁך؎ٝرحؙأ盖椚׃
הׅךכ⡦ַה⦜דׅկ
؟ؙحהءٝفٕח剅ְֹ…!
ֿדGeneratorⵃ欽׃תׅկ
Slide 7
Slide 7 text
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();!
Slide 8
Slide 8 text
for-of
ׯֻׯءٝفٕחזת׃կ
ֿד⼧ⴓ⢪ְ麣כ֮דָׅծ
㉏겗挿ָ♧אկ
כiter.next()ㄎן竲ֽזְהְ
ֽזְֿהկ
ֿכְֽגתׇיկ
ׁגֿדfor-ofٕ٦ف崞欽׃תׅկ
Slide 9
Slide 9 text
for (const value of generator(arr)) {!
console.log(value);!
}!
Slide 10
Slide 10 text
Symbol.iterator
馄知⽃דׅיw
ֿדוזךדٕ٦فד㔐ׇ״ֲחזת׃կ
ծ嫣㔐generatorꟼ侧ח⦼床ׅךכ⦜דׅ״יկ
ؔـآؙؑز荈⡤ָiterator䭯גְךָؔـآؙؑز
䭷ぢדכ姻׃ְ㪦ךכ׆կ
ֿדSymbol.iteratorךדׅկ
Slide 11
Slide 11 text
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!
}!
Slide 12
Slide 12 text
yield*
㹋כծSymbol.iteratorכString/Array/
TypedArray/Set/Map瘝ךؽٕز؎ٝ
ؔـآؙؑزחرؿٕؓزד㹀纏ׁ
גֶծ
⯓玎ך״ֲחٕ٦فⰻדyield剅ְג
⚥ך⦼《⳿ׅ䗳銲כזְךדׅկ
ֿדⴽךiteratorㄎן⳿ׅחծ
㨻⟣generator圓俑ⵃ欽׃תׅկ
Slide 13
Slide 13 text
function *iter() {!
yield *['makanai', "tech", "teamspirit"];!
}!
Slide 14
Slide 14 text
Async٥Await
IteratorכOKדׅי
ׁגֶ如כES7ַ㼪ⰅׁAsync٥Await⢪גתַׅ
AsyncIteratorًؗחծ
Async٥Awaitָוז堣腉זךַ䮶鵤ת׃׳ֲկ
Slide 15
Slide 15 text
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));!
Slide 16
Slide 16 text
Async٥Await
PromiseכOKדׅ״י
Promiseחאְגכazuׁך剅ְJavascript٥Promiseך劤铣דֻ
ְׁկ http://azu.github.io/promises-book/
Asyncכ➰♷ֿׅהדꟼ侧ך䨱⦼ָ荈⹛涸חPromiseחזתׅկ
Awaitכasyncꟼ侧ⰻדך鎸鶢〳腉דծ
Promiseַ֮ず劍涸ַך״ֲח鎸鶢ֿׅהָדֹתׅկ
Slide 17
Slide 17 text
AsyncIterator
ׁג➙㔐ך劤겗ךAsyncIteratorדׅ
ֿכ➙תד稱➜׃堣腉ךさׇ䪮הזתׅկ
׳ה醱꧟חזתָׅ鋅גְֹת׃׳ֲ٦
Slide 18
Slide 18 text
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);!
});!
Slide 19
Slide 19 text
AsyncIterator
穠卓涸חIteratorדٓحفׁPromiseָ鵤גֹתׅկ
׃ַ׃ֿךתתה⦼《⳿ׅך蕱汤׃ծ
剣欽䚍זְ…
Slide 20
Slide 20 text
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.!
}!
}!
Slide 21
Slide 21 text
for-await-of
IteratorדٓحفׁPromise鐰⣣ׅծꬊず劍ٕ٦ف堣腉דׅկ
AsyncIterator「ֽֿהד⦼ָ䌓גֹהֹךٕ٦فنر؍
㹋遤׃תׅկ
Slide 22
Slide 22 text
Sagu
for-await-ofהAsyncIterator穈さׇה눤岀ך״ֲז؝٦سָ
⹛⡲ׅ״ֲחזתׅկ
ֿדծAsyncIterator崞欽׃ٓ؎ـٓٔ
Sagu(Simple Async Generator Util)הְֲך⡲גת׃կ
https://github.com/brn/sagu
Slide 23
Slide 23 text
Sagu with Stream-API
Stream-APIהSaguדًؗ
Slide 24
Slide 24 text
// Stream!
const st = stream('http://ex.com/stream', {binary: true});!
for await (const {chunk, ok, done} of st) {!
console.log(chunk.read());!
}!
Slide 25
Slide 25 text
Sagu with DOM-Event
DOM-EventהSaguדًؗ
Slide 26
Slide 26 text
// DOM-Event!
const a = document.querySelector('a');!
for await (const {event, dispose} of event(a, 'click')) {!
console.log(event.target.nodeName);!
}!
Slide 27
Slide 27 text
Sagu with Socket.IO
Socket.IOהSaguדًؗ
Slide 28
Slide 28 text
// Socket.IO!
const URL = 'http://www.sample.com/ws';!
for await (const {type, event} of ws(URL, io)) {!
switch (type) {!
case 'connection':!
...!
case 'request':!
...!
}!
...!
}!
Slide 29
Slide 29 text
Summary
AsyncIteratorכ葿ղ嚂׃ךד僽ꬊ鍗גגְֻׁկ
兛鸐ח⢪״ֲחזꬊず劍Ⳣ椚כְע㢌ֲדׅկ
植㖈Babelדstage-3דְֽתׅ