ECMAScript6策定目前！ ECMA262読書会・1周年記念会 https://ecma262reading.doorkeeper.jp/events/25174 での発表資料です。

1. AltES6 Introduction
さっき作った（@make_now_just）
1

2. 1. 自己紹介
2. AltES6とは
3. AltES6の例
a. Spider
b. Earl Grey
c. その他
4. まとめ
目次
2

3. 自己紹介
● 「さっき作った」という変な名前です
● Quineをたくさん書きました
(200言語くらい)
● Twitter: @make_now_just
● GitHub: @MakeNowJust
3

4. AltES6とは
4

5. AltES6とは？
従来のAltJS
5
AltJS

6. AltES6とは？
AltES6の場合
6
AltES6

7. AltES6のメリット
● ES6にコンパイルされる
→重いランタイムを使う必要が無くなる
→ES6が動く環境ではES6のまま、
そうで無ければBabelやTraceurでES5にして実行、
使い分けできる
● ES6も結局はJavaScriptなので、(構文的に)書きたくない！
→AltES6使えば別の構文で書ける
7

8. AltES6の例
8

9. Spider
9
http://spiderlang.org

10. Spider(概観)
$ npm install spider-script
● Go言語、Swift、Python、C#、CoffeeScriptの
影響を受けたプログラミング言語
● ES5かES6をターゲットに変換できる
● 日本語の記事がちょっとだけある
(Qiitaに3件くらい)
10

11. Spider(特徴)
● 構文はJavaScriptをベースにして、
SwiftとGo言語のいいとこ取りをした感じ
● ただしセミコロン必須！
● ES6の構文が割とそのまま使える
● Go言語のようなChannelとgoブロックがある
(ただし別ライブラリが必要)
11

12. Spider(特徴)
// コメント
fn add1(x, y = 10) {
return x + y;
}
var {name} = {name:"MakeNowJust"};
var add2 = (x, y) => x + y;
if true {
::console.log("Hey (name)");
}
12
function add1(x, y = 10) {
return x + y;
}
let {name} = {name:"MakeNowJust"};
let add2 = (x, y) => ｛
return x + y;
};
if (true) {
console.log("Hey " + name);
}
Spider ES6

13. Spider(特徴)
use :node;
import Channel from 'spider-channels';
var chan = new Channel();
setTimeout(() => {
chan <- "finish";
}, 1000);
go {
console.log(<-chan);
}
import {Channel} from 'spider-channels';
let chan = new Channel();
setTimeout(() => {
chan.push("finish");
});
(async function () {
console.log(await chan);
})();
13
Spider ES6

14. Earl Grey
http://breuleux.github.io/earl-grey/
14

15. Earl Grey(概観)
$ npm install earlgrey
● Pythonのような見た目でマクロがある言語
● ES5かES6をターゲットに変換できる
● 比較的新しい言語なので情報が皆無
15

16. Earl Grey(特徴)
● 構文はインデントベースで一見Pythonのよう
● ただし、構文はもの凄く柔軟(PythonというよりPerl的)
● 実行にランタイムが必要
● マクロでさらに構文を拡張できる
● EDSLでVirtualDOMを組めるearl-reactというものもある
● あまりES6の機能使わない‥
16

17. Earl Grey(特徴)
;; 全て同じ意味
if true:
print .Hello
if true: [print "Hello"]
if{true, print 'Hello'}
var x = "variable" ;; 再代入可能
let y = "const" ;; 再代入不可
x = "ok"
;; y = "error!" ( 変換時にエラーが出る )
;; 他にも色々と機能があるけれど、
;; 変換結果が複雑なので割愛
17
if (true) console.log("Hello");
if (true) console.log("Hello");
if (true) console.log("Hello");
let x = "variable";
let y = "const";
x = "ok"
Earl Grey ES6

18. Earl Grey(特徴)
require:
earl-react as React
require-macros:
earl-react -> (%, component)
globals: document
component Hello:
render() = div % 'Hello {@props.name}'
React.render {
Hello % name = "Balthazar",
document.get-element-by-id("mount")
}
18
// たくさん出力されるので省力
Earl Grey ES6

19. SpiderとEarl Grey
● ES5とES6、どちらに変換するか選ぶことができる
(内部的には、ES6のASTを作ったあと、
ES6ならescodegenで、ES5ならBabelかTraceurで変換)
● SpiderはデフォルトではES5、
Earl GreyではデフォルトでES6
19

20. SpiderとEarl Grey
SpiderはあくまでベターJavaScript、という印象
対してEarl Greyは、JavaScript(Node.js)のエコシステムを
利用できる別のプログラミング言語を目指してる感じがする
どちらも一長一短だと思います
20

21. その他
● CoffeeScriptでもES6のGeneratorsには対応してるので、
CoffeeScriptもAltES6かもしれません
● DartもES6へのtranspilerを開発しているらしいです
● TypeScriptも次のバージョンで
ES6のGeneratorsに対応するはずです
21

22. まとめ
● ES6を直接使うのではなく、AltES6という選択肢もある
● AltES6の例として、SpiderやEarl Greyがある
● 既存のAltJSも、ES6のコードを吐く方向(AltES6)
へと進んでいっている
● AltES6の未来は明るい！
22

23. 余談：どうやってAltES6を見つけてくるの？
● RedditとかHacker Newsを監視する
● CoffeeScriptのリポジトリのWikiをチェックする
https://github.com/jashkenas/coffeescript/wiki/List-of-languages-that-compile-to-JS
JavaScriptにコンパイルされる言語の一覧がある
23