JSXのジェネレータ実装
西脇友一 / @wasabiz
2013/10/26 東京node学園祭

13年10月26日土曜日
自己紹介

✤

西脇友一

✤

@wasabiz

✤

東京大学教養学部2年 (理学部情報科学科進学予定)

✤

DeNAアルバイト

13年10月26日土曜日
DeNAでの業務
✤

プログラミング言語JSXの開発と保守
✤

✤

コンパイラの開発・バグフィックス

✤

✤

言語仕様のデザイン

etc

基本はコンパイラ屋さん

13年10月26日土曜日
✤

リリースされていないJSXの機能についてしゃべります

✤

今後のリリースまでに変わる可能性が十分にあります

13年10月26日土曜日
今日のキーワード

✤

nodejs

✤

ES6

✤

ジェネレータ

✤

非同期処理

✤

JSX

13年10月26日土曜日
node.js

✤

近々node.js v0.12がリリースされます

✤

ECMAScript6対応 (いわゆるJavaScriptの最新規格)
✤

目玉機能の一つがgenerator

✤

generatorでコールバック地獄から...
generatorとは
✤

一時停止・再開ができる関数

✤

現代的なプログラミング言語のほとんどがサポート
✤

✤

RubyのFibers

✤

✤

PythonのGenerators

C#, Go, Lua, ...etc

...
ECMAScript6のgenerators
✤

1997 - ECMAScript 1
✤

✤

2008 - ECMAScript 4
✤

✤

最初の規格

破棄

2009 - ECMAScript 5 / 2011- ECMAS...
例: ES6のジェネレータ
function * fib () {
var a = 1, b = 1;
while (true) {
yield a;
[a, b] = [b, a + b];
}
}
f = fib();
f.next().v...
ブラウザでのサポート状況
✤

Chrome (v8)
✤

✤

✤

ES6準拠のgeneratorを導入
そしてnode.jsも0.12からサポート

Firefox
✤

ES6が登場するはるか前に独自拡張として導入(JavaScrip...
ブラウザでのサポート状況
✤

Chrome (v8)
✤

✤

✤

ES6準拠のgeneratorを導入
そしてnode.jsも0.12からサポート

✤

ES6が登場するはるか前に独自拡張として導入(JavaScript 1.7)
✤...
JSXの場合

13年10月26日土曜日
JSX
✤

ユーザーが書くコードは単一
✤

✤

コンパイル結果をターゲットのブラウザ(JSエンジン)ごとに変える

全てのブラウザに互換性のある形の JSにコンパイル
✤

ジェネレータがあるブラウザ(Fx, Ch)
✤

✤

→ ブラ...
コード例
function fib () : Enumerable.<number> {
! var a = 0, b = 1;
! while (true) {
! ! var t = a;
! ! a = b;
! ! b = t + b;...
Chrome(v8)
function fib () : Enumerable.<number> {
! var a = 0, b = 1;
function fib * () {
! while (true) {
! var a = 0, b...
Firefox
function fib () : Enumerable.<number> {
! var a = 0, b = 1;
var fib = $__jsx_g_fx(function fib () {
! while (true)...
その他

function fib() {
!
var a;
!
var b;
!
var t;
!
var $START;
!
var $TEST_WHILE_0;
!
var $BODY_WHILE_0;
!
var $YIELD_0;
!...
コード例

f = fib();
f.next();
f.next();
f.next();
f.next();
f.next();

//=>
//=>
//=>
//=>
//=>

1
1
2
3
5

どのJSエンジンでもジェネレータが...
小まとめ
✤

generatorという便利なものがあります
✤

✤

node.js v0.12.0に入る予定

ブラウザでのサポートはまちまち
✤

✤

✤

そもそもgeneratorが無いもの(IE/Opera)
あっても互換性がな...
Why generators matter?

13年10月26日土曜日
Why generators matter?

✤

node.jsの問題点
✤

コールバック地獄

✤

ジェネレータでコールバック地獄は無くせる
✤

13年10月26日土曜日

Qやcoといったサードパーティライブラリ
co
var fs = require('fs');
fs.readFile('input.txt', , function(err, data) {
! fs.writeFile('output.txt', data, function (e...
co
var fs = require('fs');
fs.readFile('input.txt', , function(err, data) {
! fs.writeFile('output.txt', data, function (e...
await式
✤

将来のECMAScriptで非同期関連の構文(await)が導入される
✤

✤

C#のasync/awaitに似た構文

✤

✤

ES7で入るとか入らないとか

`function ! () { }`になるとか`fu...
JSXの場合

✤

ECMAがまだなら自分たちで作ってしまえ!

13年10月26日土曜日
JSXは…
// ES6 with co
co(function *() {
var data = yield thunkify(fs.readFile)('input.txt');
yield thunkify(fs.writeFile)('...
JSXは…
// ES6 with co
co(function *() {
var data = yield thunkify(fs.readFile)('input.txt');
yield thunkify(fs.writeFile)('...
結論
✤

ジェネレータを使うと非同期APIがすごくすっきりする
✤

✤

✤

でもブラウザのサポートはまちまち
仕様策定もまだまだ先

JSXは先回りして実装
✤

JavaScriptの非互換な部分を埋める

✤

Language a...
Upcoming SlideShare
Loading in …5
×

Jsx generator-impl

3,846 views
3,712 views

Published on

0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,846
On SlideShare
0
From Embeds
0
Number of Embeds
1,603
Actions
Shares
0
Downloads
5
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Jsx generator-impl

  1. 1. JSXのジェネレータ実装 西脇友一 / @wasabiz 2013/10/26 東京node学園祭 13年10月26日土曜日
  2. 2. 自己紹介 ✤ 西脇友一 ✤ @wasabiz ✤ 東京大学教養学部2年 (理学部情報科学科進学予定) ✤ DeNAアルバイト 13年10月26日土曜日
  3. 3. DeNAでの業務 ✤ プログラミング言語JSXの開発と保守 ✤ ✤ コンパイラの開発・バグフィックス ✤ ✤ 言語仕様のデザイン etc 基本はコンパイラ屋さん 13年10月26日土曜日
  4. 4. ✤ リリースされていないJSXの機能についてしゃべります ✤ 今後のリリースまでに変わる可能性が十分にあります 13年10月26日土曜日
  5. 5. 今日のキーワード ✤ nodejs ✤ ES6 ✤ ジェネレータ ✤ 非同期処理 ✤ JSX 13年10月26日土曜日
  6. 6. node.js ✤ 近々node.js v0.12がリリースされます ✤ ECMAScript6対応 (いわゆるJavaScriptの最新規格) ✤ 目玉機能の一つがgenerator ✤ generatorでコールバック地獄からおさらばする話 13年10月26日土曜日
  7. 7. generatorとは ✤ 一時停止・再開ができる関数 ✤ 現代的なプログラミング言語のほとんどがサポート ✤ ✤ RubyのFibers ✤ ✤ PythonのGenerators C#, Go, Lua, ...etc JavaScriptは? 13年10月26日土曜日
  8. 8. ECMAScript6のgenerators ✤ 1997 - ECMAScript 1 ✤ ✤ 2008 - ECMAScript 4 ✤ ✤ 最初の規格 破棄 2009 - ECMAScript 5 / 2011- ECMAScript 5.1 ✤ ✤ ✤ 仕様の厳格化、リフレクション 広く浸透している版 2013 - ECMAScript 6 ✤ 多数の新機能の追加、generatorが導入される 13年10月26日土曜日
  9. 9. 例: ES6のジェネレータ function * fib () { var a = 1, b = 1; while (true) { yield a; [a, b] = [b, a + b]; } } f = fib(); f.next().value; f.next().value; f.next().value; f.next().value; f.next().value; f.next().value; 13年10月26日土曜日 //=> //=> //=> //=> //=> //=> 1 1 2 3 5 8
  10. 10. ブラウザでのサポート状況 ✤ Chrome (v8) ✤ ✤ ✤ ES6準拠のgeneratorを導入 そしてnode.jsも0.12からサポート Firefox ✤ ES6が登場するはるか前に独自拡張として導入(JavaScript 1.7) ✤ ✤ generatorはある ✤ ✤ 他のブラウザが追従せず普及しなかった ES6と互換性がない IE/Operaは未だサポートせず 13年10月26日土曜日
  11. 11. ブラウザでのサポート状況 ✤ Chrome (v8) ✤ ✤ ✤ ES6準拠のgeneratorを導入 そしてnode.jsも0.12からサポート ✤ ES6が登場するはるか前に独自拡張として導入(JavaScript 1.7) ✤ ✤ 他のブラウザが追従せず普及しなかった generatorはある ✤ ✤ → 互換性の壁 Firefox ES6と互換性がない IE/Operaは未だサポートせず 13年10月26日土曜日
  12. 12. JSXの場合 13年10月26日土曜日
  13. 13. JSX ✤ ユーザーが書くコードは単一 ✤ ✤ コンパイル結果をターゲットのブラウザ(JSエンジン)ごとに変える 全てのブラウザに互換性のある形の JSにコンパイル ✤ ジェネレータがあるブラウザ(Fx, Ch) ✤ ✤ → ブラウザでサポートされている形式に変換 そもそもサポートしていないブラウザ ✤ 13年10月26日土曜日 → special care
  14. 14. コード例 function fib () : Enumerable.<number> { ! var a = 0, b = 1; ! while (true) { ! ! var t = a; ! ! a = b; ! ! b = t + b; ! ! yield a; ! } } JSXで書かれたコード 13年10月26日土曜日
  15. 15. Chrome(v8) function fib () : Enumerable.<number> { ! var a = 0, b = 1; function fib * () { ! while (true) { ! var a = 0, b = 1; ! ! var t = a; ! while (true) { ! ! a = b; ! ! var t = a; ! ! b = t + b; ! ! a = b; ! ! yield a; ! ! b = t + b; ! } ! ! yield a; } ! } } 13年10月26日土曜日
  16. 16. Firefox function fib () : Enumerable.<number> { ! var a = 0, b = 1; var fib = $__jsx_g_fx(function fib () { ! while (true) { ! var a = 0, b = 1; ! ! var t = a; ! while (true) { ! ! a = b; ! ! var t = a; ! ! b = t + b; ! ! a = b; ! ! yield a; ! ! b = t + b; ! } ! ! yield a; } ! } }); 13年10月26日土曜日
  17. 17. その他 function fib() { ! var a; ! var b; ! var t; ! var $START; ! var $TEST_WHILE_0; ! var $BODY_WHILE_0; ! var $YIELD_0; ! var $END_WHILE_0; ! var $END; ! var $generator0; ! $generator0 = new __jsx_generator$x2E$x3Cnumber$x3E(); ! $START = (function () { ! ! (a = 0, b = 1); ! ! $TEST_WHILE_0(); ! }); ! $TEST_WHILE_0 = (function () { ! ! if (true) { ! ! ! $BODY_WHILE_0(); ! ! } else { ! ! ! $END_WHILE_0(); ! ! } ! }); ! $BODY_WHILE_0 = (function () { ! ! t = a; ! ! a = b; ! ! b = t + b; ! ! $generator0.__value = a; ! ! $generator0.__next = $YIELD_0; ! }); ! $YIELD_0 = (function () { ! ! $TEST_WHILE_0(); ! }); ! $END_WHILE_0 = (function () { ! ! throw new StopIteration(); ! ! $END(); ! }); ! $END = (function () { ! }); ! $generator0.__next = $START; ! return $generator0; } function fib () : Enumerable.<number> { ! var a = 0, b = 1; ! while (true) { ! ! var t = a; ! ! a = b; ! ! b = t + b; ! ! yield a; ! } } generatorをIE/operaでも動くJSに変換して出力 13年10月26日土曜日
  18. 18. コード例 f = fib(); f.next(); f.next(); f.next(); f.next(); f.next(); //=> //=> //=> //=> //=> 1 1 2 3 5 どのJSエンジンでもジェネレータが動く 13年10月26日土曜日
  19. 19. 小まとめ ✤ generatorという便利なものがあります ✤ ✤ node.js v0.12.0に入る予定 ブラウザでのサポートはまちまち ✤ ✤ ✤ そもそもgeneratorが無いもの(IE/Opera) あっても互換性がないもの(Firefox) JSXは非互換な部分を吸収するレイヤー 13年10月26日土曜日
  20. 20. Why generators matter? 13年10月26日土曜日
  21. 21. Why generators matter? ✤ node.jsの問題点 ✤ コールバック地獄 ✤ ジェネレータでコールバック地獄は無くせる ✤ 13年10月26日土曜日 Qやcoといったサードパーティライブラリ
  22. 22. co var fs = require('fs'); fs.readFile('input.txt', , function(err, data) { ! fs.writeFile('output.txt', data, function (err) { ! ! console.log('It's saved!'); ! }); }); ↓ 13年10月26日土曜日
  23. 23. co var fs = require('fs'); fs.readFile('input.txt', , function(err, data) { ! fs.writeFile('output.txt', data, function (err) { ! ! console.log('It's saved!'); ! }); }); ↓ var co = require('co'); var fs = require('fs'); co(function *() { var data = yield thunkify(fs.readFile)('input.txt'); yield thunkify(fs.writeFile)('output.txt', data); console.log('It's saved!'); }); 13年10月26日土曜日
  24. 24. await式 ✤ 将来のECMAScriptで非同期関連の構文(await)が導入される ✤ ✤ C#のasync/awaitに似た構文 ✤ ✤ ES7で入るとか入らないとか `function ! () { }`になるとか`function ^ () { }`になるとか もちろんまだ利用できない… ✤ ES5.1からES6まで2年 ✤ ES7は2015年…? 13年10月26日土曜日
  25. 25. JSXの場合 ✤ ECMAがまだなら自分たちで作ってしまえ! 13年10月26日土曜日
  26. 26. JSXは… // ES6 with co co(function *() { var data = yield thunkify(fs.readFile)('input.txt'); yield thunkify(fs.writeFile)('output.txt', data); console.log('It's saved!'); }); 13年10月26日土曜日
  27. 27. JSXは… // ES6 with co co(function *() { var data = yield thunkify(fs.readFile)('input.txt'); yield thunkify(fs.writeFile)('output.txt', data); console.log('It's saved!'); }); ↓ // JSX (draft spec) // コンパイル結果はES6互換のJavaScript function * () : void { var data = await fs.readFileAsync(‘input.txt’); await fs.writeFileAsync(‘output.txt’, data); console.log(‘It’s saved!’); } 13年10月26日土曜日
  28. 28. 結論 ✤ ジェネレータを使うと非同期APIがすごくすっきりする ✤ ✤ ✤ でもブラウザのサポートはまちまち 仕様策定もまだまだ先 JSXは先回りして実装 ✤ JavaScriptの非互換な部分を埋める ✤ Language as a Layer ✤ 13年10月26日土曜日 独自言語を持つ強み

×