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
Honoとフロントエンドの 型安全性について
yodaka
7
1.4k
GAEログのコスト削減
mot_techtalk
0
120
Software Architecture
hschwentner
6
2.1k
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
9
1.8k
Conform を推す - Advocating for Conform
mizoguchicoji
3
700
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
180
Django NinjaによるAPI開発の効率化とリプレースの実践
kashewnuts
1
150
2024年のWebフロントエンドのふりかえりと2025年
sakito
3
260
仕様変更に耐えるための"今の"DRY原則を考える
mkmk884
8
2.4k
Unity Android XR入門
sakutama_11
0
170
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1.1k
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
670
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
560
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Automating Front-end Workflow
addyosmani
1368
200k
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דְֽתׅ