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
510
CA 1Day Youth Bootcamp for Frontend LT
brn
0
970
Modern TypeScript
brn
2
820
javascript - behind the scene
brn
3
750
tc39 proposals
brn
0
890
プロダクト開発とTypeScript
brn
8
2.9k
React-Springでリッチなアニメーション
brn
1
710
Other Decks in Programming
See All in Programming
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
2
230
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
530
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
120
Namespace and Its Future
tagomoris
6
700
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
540
1から理解するWeb Push
dora1998
7
1.9k
OSS開発者という働き方
andpad
5
1.7k
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
300
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
6
2.5k
AWS発のAIエディタKiroを使ってみた
iriikeita
1
190
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
24
12k
AIコーディングAgentとの向き合い方
eycjur
0
270
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Designing Experiences People Love
moore
142
24k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Code Review Best Practice
trishagee
70
19k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Embracing the Ebb and Flow
colly
87
4.8k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
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דְֽתׅ