Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ES2018 AsyncIteratorでキメる
Search
Taketoshi Aono(青野健利 a.k.a brn)
July 27, 2017
Programming
1
2.7k
ES2018 AsyncIteratorでキメる
EcmascriptのAsyncIteratorがどのように動くのか、iterator/generator/async・awaitの解説
Taketoshi Aono(青野健利 a.k.a brn)
July 27, 2017
Tweet
Share
More Decks by Taketoshi Aono(青野健利 a.k.a brn)
See All by Taketoshi Aono(青野健利 a.k.a brn)
document.write再考
brn
6
3k
Parsing Javascript
brn
13
9.1k
JSON & Object Tips
brn
1
440
CA 1Day Youth Bootcamp for Frontend LT
brn
0
870
Modern TypeScript
brn
2
770
javascript - behind the scene
brn
3
710
tc39 proposals
brn
0
830
プロダクト開発とTypeScript
brn
8
2.9k
React-Springでリッチなアニメーション
brn
1
650
Other Decks in Programming
See All in Programming
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
100
AI Agent系IDEを使って 開発生産性を爆アゲする
ouchi2501
1
100
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
240
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
150
React 19アップデートのために必要なこと
uhyo
6
1.2k
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
130
負債になりにくいCSSをデザイナとつくるには?
fsubal
10
2.5k
SwiftUI Viewの責務分離
elmetal
PRO
2
260
『品質』という言葉が嫌いな理由
korimu
0
180
Formの複雑さに立ち向かう
bmthd
1
900
Generating OpenAPI schema from serializers throughout the Rails stack - Kyobashi.rb #5
envek
1
330
Rails アプリ地図考 Flush Cut
makicamel
1
130
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
172
14k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Agile that works and the tools we love
rasmusluckow
328
21k
4 Signs Your Business is Dying
shpigford
182
22k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Designing for Performance
lara
604
68k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Music & Morning Musume
bryan
46
6.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
Transcript
AsyncIterator
せ: @brn (ꫬꅿ⨳ⵃa.k.a ـٕ٦ظ) 耵噟: ؿٗٝزؒٝسؒٝآص،٥iOSؒٝآص، ⠓爡: Cyberagent ،سذؙأةآؔRightSegment٥AI Messenger
ـؚٗ: http://abcdef.gets.b6n.ch/ Twitter: https://twitter.com/brn227 GitHub: https://github.com/brn
Iterator/Generator EcmascriptךIterator/Generator⢪גתַׅ 兛鸐חWeb،فٔ剅ְגְהծ䛊ֻ湫䱸涸חIterator/ Generator⢪ֲֿהכזְה䙼ְתׅկ redux-sagaהַ⢪גְל꼧厩ַָ֮׃תׇָկ זךדהִ֮׆ծIterator/Generatorָוזךזךַ䮶鵤 גת׃׳ֲկ
Iterator ת׆כ鸐䌢ךIteratorדׅկIterator荈 ⡤כ暴ⴽז圓俑䗳銲הׇ׆ծ 鸐䌢ךJavascriptؔـآؙؑزה׃ג 鎸鶢〳腉דׅկ
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();!
Generator ⯓玎ךIteratorכ然ַחIteratorה׃ג ⹛⡲׃תָׅծ 荈ⴓדꂁך؎ٝرحؙأ盖椚׃ הׅךכ⡦ַה⦜דׅկ ؟ؙحהءٝفٕח剅ְֹ…! ֿדGeneratorⵃ欽׃תׅկ
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();!
for-of ׯֻׯءٝفٕחזת׃կ ֿד⼧ⴓ⢪ְ麣כ֮דָׅծ ㉏겗挿ָ♧אկ כiter.next()ㄎן竲ֽזְהְ ֽזְֿהկ ֿכְֽגתׇיկ ׁגֿדfor-ofٕ٦ف崞欽׃תׅկ
for (const value of generator(arr)) {! console.log(value);! }!
Symbol.iterator 馄知⽃דׅיw ֿדוזךדٕ٦فד㔐ׇ״ֲחזת׃կ ծ嫣㔐generatorꟼ侧ח⦼床ׅךכ⦜דׅ״יկ ؔـآؙؑز荈⡤ָiterator䭯גְךָؔـآؙؑز 䭷ぢדכ姻׃ְ㪦ךכ׆կ ֿדSymbol.iteratorךדׅկ
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! }!
yield* 㹋כծSymbol.iteratorכString/Array/ TypedArray/Set/Map瘝ךؽٕز؎ٝ ؔـآؙؑزחرؿٕؓزד㹀纏ׁ גֶծ ⯓玎ך״ֲחٕ٦فⰻדyield剅ְג ⚥ך⦼《⳿ׅ䗳銲כזְךדׅկ ֿדⴽךiteratorㄎן⳿ׅחծ 㨻⟣generator圓俑ⵃ欽׃תׅկ
function *iter() {! yield *['makanai', "tech", "teamspirit"];! }!
Async٥Await IteratorכOKדׅי ׁגֶ如כES7ַ㼪ⰅׁAsync٥Await⢪גתַׅ AsyncIteratorًؗחծ Async٥Awaitָוז堣腉זךַ䮶鵤ת׃׳ֲկ
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));!
Async٥Await PromiseכOKדׅ״י Promiseחאְגכazuׁך剅ְJavascript٥Promiseך劤铣דֻ ְׁկ http://azu.github.io/promises-book/ Asyncכ➰♷ֿׅהדꟼ侧ך䨱⦼ָ荈⹛涸חPromiseחזתׅկ Awaitכasyncꟼ侧ⰻדך鎸鶢〳腉דծ Promiseַ֮ず劍涸ַך״ֲח鎸鶢ֿׅהָדֹתׅկ
AsyncIterator ׁג➙㔐ך劤겗ךAsyncIteratorדׅ ֿכ➙תד稱➜׃堣腉ךさׇ䪮הזתׅկ ׳ה醱꧟חזתָׅ鋅גְֹת׃׳ֲ٦
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);! });!
AsyncIterator 穠卓涸חIteratorדٓحفׁPromiseָ鵤גֹתׅկ ׃ַ׃ֿךתתה⦼《⳿ׅך蕱汤׃ծ 剣欽䚍זְ…
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.! }! }!
for-await-of IteratorדٓحفׁPromise鐰⣣ׅծꬊず劍ٕ٦ف堣腉דׅկ AsyncIterator「ֽֿהד⦼ָ䌓גֹהֹךٕ٦فنر؍ 㹋遤׃תׅկ
Sagu for-await-ofהAsyncIterator穈さׇה눤岀ך״ֲז؝٦سָ ⹛⡲ׅ״ֲחזתׅկ ֿדծAsyncIterator崞欽׃ٓ؎ـٓٔ Sagu(Simple Async Generator Util)הְֲך⡲גת׃կ https://github.com/brn/sagu
Sagu with Stream-API Stream-APIהSaguדًؗ
// Stream! const st = stream('http://ex.com/stream', {binary: true});! for await
(const {chunk, ok, done} of st) {! console.log(chunk.read());! }!
Sagu with DOM-Event DOM-EventהSaguדًؗ
// DOM-Event! const a = document.querySelector('a');! for await (const {event,
dispose} of event(a, 'click')) {! console.log(event.target.nodeName);! }!
Sagu with Socket.IO Socket.IOהSaguדًؗ
// Socket.IO! const URL = 'http://www.sample.com/ws';! for await (const {type,
event} of ws(URL, io)) {! switch (type) {! case 'connection':! ...! case 'request':! ...! }! ...! }!
Summary AsyncIteratorכ葿ղ嚂׃ךד僽ꬊ鍗גגְֻׁկ 兛鸐ח⢪״ֲחזꬊず劍Ⳣ椚כְע㢌ֲדׅկ 植㖈Babelדstage-3דְֽתׅ