Tweet
Tweet

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