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
14
9.3k
JSON & Object Tips
brn
1
490
CA 1Day Youth Bootcamp for Frontend LT
brn
0
950
Modern TypeScript
brn
2
810
javascript - behind the scene
brn
3
740
tc39 proposals
brn
0
880
プロダクト開発とTypeScript
brn
8
2.9k
React-Springでリッチなアニメーション
brn
1
700
Other Decks in Programming
See All in Programming
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
14k
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
490
ふつうの技術スタックでアート作品を作ってみる
akira888
1
900
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
450
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
11k
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
3
280
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
540
RailsGirls IZUMO スポンサーLT
16bitidol
0
190
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
170
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
93
31k
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
1
130
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Faster Mobile Websites
deanohume
307
31k
For a Future-Friendly Web
brad_frost
179
9.8k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Thoughts on Productivity
jonyablonski
69
4.7k
Agile that works and the tools we love
rasmusluckow
329
21k
Speed Design
sergeychernyshev
32
1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Music & Morning Musume
bryan
46
6.6k
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דְֽתׅ