18
The generator of ES6 id:paulownia / @nullpon

The Generator of ECMAScript 6th

Embed Size (px)

DESCRIPTION

ECMAScript 6thのジェネレータについて。

Citation preview

Page 1: The Generator of ECMAScript 6th

The generator of ES6id:paulownia / @nullpon

Page 2: The Generator of ECMAScript 6th

2013/12/19koa 0.1.0 release

Page 3: The Generator of ECMAScript 6th

koa

• node.jsのWebアプリケーションフレームワーク

• ECMAScript 6thのgeneratorを使用

Page 4: The Generator of ECMAScript 6th

Generator ?

Page 5: The Generator of ECMAScript 6th

generator

• イテレータを生成する特殊な関数。

Page 6: The Generator of ECMAScript 6th

Iterator ?

Page 7: The Generator of ECMAScript 6th

Iterator

• ECMAScript 6thで導入

• 反復処理を行うためのオブジェクト

Page 8: The Generator of ECMAScript 6th

var arr = [3, 4, 5, 6]; !for (var i of arr) { console.log(i); // => 3, 4, 5, 6 }

Page 9: The Generator of ECMAScript 6th

Iteratorを自作

Page 10: The Generator of ECMAScript 6th

function range(a, b) { var i = a; return { iterator: function() { return this; }, next: function() { if (i <= b) { return { value: i++ }; } else { return { done: true }; } } } } !for (var i of range(3, 6)) { console.log(i); // => 3, 4, 5, 6 }

Page 11: The Generator of ECMAScript 6th

Generatorで書き直す

Page 12: The Generator of ECMAScript 6th

function* range(a, b) { for (var i = a; i <= b; i++) { yield i; } } !for (var i of range(3, 6)) { console.log(i); // => 3, 4, 5, 6 }

Page 13: The Generator of ECMAScript 6th

Generatorの挙動

Page 14: The Generator of ECMAScript 6th

// Generator関数定義 function* f(i) { var x; x = yield 1; // x => "a" x = yield 2; // x => "b" x = yield 3; // x => "c" }

// Generator関数実行 // この時点ではGenerator関数のコードは実行されない var g = f(0); // g => [Object: Generator] // nextを呼ぶと、Generator関数のコードが実行される var x;x = g.next(); // x => {value:1, done:false} x = g.next("a"); // x => {value:2, done:false} x = g.next("b"); // x => {value:3, done:false} x = g.next("c"); // x => {done:true}

Page 15: The Generator of ECMAScript 6th

• Generator#nextを呼び出す→ Generator関数の最初のyield式まで実行される→ yield式を評価し、Generator関数は停止する→ 制御がnextを呼び出した側に戻る

• さらにGenertor#nextを呼び出す→ 中断位置から次のyield式まで実行→ yield式を評価し、Generator関数は再度停止する→ 制御がnextを呼び出した側に戻る

Page 16: The Generator of ECMAScript 6th

yield式を評価して中断↓

非同期処理の制御に使えそうだ…

Page 17: The Generator of ECMAScript 6th

var g = (function* (i) { console.log(i); // すぐに 1 が出力 i = yield setTimeout(function() { g.next(2); }, 1000); console.log(i); // 1秒待って 2 が出力 ! i = yield setTimeout(function() { g.next(3); }, 1000); console.log(i); // 1秒待って 3 が出力 })(1); !g.next();

Page 18: The Generator of ECMAScript 6th

まとめ

• ジェネレータで非同期処理ができる

• 本来は反復処理のための機能

• node 0.12で使えるようになるらしい(node 0.11はES6 draftと実装が異なる)