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
500
CA 1Day Youth Bootcamp for Frontend LT
brn
0
960
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
WebAssemblyインタプリタを書く ~Component Modelを添えて~
ruccho
1
870
バイブコーディング × 設計思考
nogu66
0
120
画像コンペでのベースラインモデルの育て方
tattaka
3
1.8k
Flutterと Vibe Coding で個人開発!
hyshu
1
260
パスタの技術
yusukebe
1
390
Claude Code と OpenAI o3 で メタデータ情報を作る
laket
0
130
Honoアップデート 2025年夏
yusukebe
1
790
令和最新版手のひらコンピュータ
koba789
14
7.9k
Webinar: AI-Powered Development: Transformiere deinen Workflow mit Coding Tools und MCP Servern
danielsogl
0
140
Langfuseと歩む生成AI活用推進
licux
3
270
コーディングは技術者(エンジニア)の嗜みでして / Learning the System Development Mindset from Rock Lady
mackey0225
2
530
AI OCR API on Lambdaを Datadogで可視化してみた
nealle
0
120
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Gamification - CAS2011
davidbonilla
81
5.4k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Writing Fast Ruby
sferik
628
62k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
A better future with KSS
kneath
239
17k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Done Done
chrislema
185
16k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
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דְֽתׅ