ES6+カジュアルトークの発表資料です。 http://connpass.com/event/9113/

1. Closure CompilerのES6対応
あるいは
ES6時代のAltJS生存戦略
@teppeis
ES6 Casual 2014/10/29

2. Hello!
• @teppeis
• cybozu kintone
• Closure Compiler, TypeScript, Testing, Scaling..

3. Closure Compiler

4. Closure Compiler
• compile JS to better JS
• 超圧縮＆最適化
• JSDocベースの静的型付け

5. あなたも毎日使ってます！

6. JSDocベースの静的型付け

7. JSDocベースの静的型付け
• 冗長だけど、既存のJSとの親和性がバツグン
• JavaScriptの進化に追随できる（後述）
• コンパイルなしでも実行可能
• どうせJSDoc書くし。
まさか、ドキュメント書かない気ですか？

8. 5月にGitHub化

9. 活発に開発中

10. 最近何やってんの？
• ECMAScript6対応
• 型推論の強化
• RefasterJS（自動リファクタリング）
• Conformance（規約チェック）

11. ECMAScript 6

12. Compile ES6 to ES3
java -jar compiler.jar
--language_in ECMASCRIPT6
--language_out ECMASCRIPT3
--js foo.js

13. Arrow Function

14. Class

15. Enhanced object literals

16. Default, rest, spread params

17. and already supported !
• const/let
• Generator
• Destructuring
• String templates
• Binary & octal literal
• …

18. 実装中の大物
• Modules
• super (Class)

19. ES6 compatibility table
各種ブラウザとコンパイラのES6対応表
http://kangax.github.io/compat-table/es6/

22. 対応状況のチェックを自動化
• かなりの書きなぐりコード
• 6to5とかも対応しようと思ったけど面 (ry

23. Why doesn’t
Closure use Traceur?

24. Tracuerを使わなかった理由
• Tracuerは変換結果にコメントを残せない
• Closure CompilerではJSDocが肝
• パフォーマンス問題
• TraceurはJS実装、ClosureはJava実装
• ASTとソースの変換が2回

25. コンパイルのコスト
• Traceur + Closure
• ES6 > Traceur AST > ES5 > Closure AST > Optimized ES5
• Closure only
• ES6 > Closure AST (ES6 > ES5) > Optimized ES5

26. nodeconf.eu 2014
http://yosuke-furukawa.hatenablog.com/entry/2014/09/10/191140

27. ちょｗ

28. Tracuerの微妙なところ
• 自前で実装する基準がよくわからない
• String.prototype.startsWith とか
• そのおかげでランタイムがめちゃでかい。
• コンパイル不要な機能は
es6shimに任せれば良いのでは？

29. ES6 vs. AltJS

30. AltJS黎明期
• 各種AltJSがオレオレ最強Syntaxを実装
• そのうち有用なものをES6/7が取り込む
• ES6だけでも十分モダンなsyntaxに
• 各ブラウザとコンパイラがES6対応開始
• いまここ

31. AltJSの選定基準
• そのコンテキストにおけるJSの不満を解決
• 主目的はそれぞれ
• 学習コスト、開発者の確保
• ECMAScriptベースだと楽じゃない？
• AltJSからの出口戦略（プロダクトとAltJSどっちが長生き？）
• 開発の継続性
• コミュニティが活発
• 強力な後ろだて（政治）
• 移行コスト
• 元コードがキレイ or 生成コードがキレイ（標準に近い）

32. ECMAScript準拠の強み
• Closure Compilerは基本文法はJSそのまま
• JS (ECMAScript) が進化すれば、
Closure Compilerも合わせて進化できる
• 独自syntaxのAltJSではそうもいかない
• 進化しないと、機能落ち、
類似だけど微妙に違う仕様、などに陥る

33. ES6時代のAltJS
• 欲張らないES6ベース + 独自色（主目的）
• Closure（型、圧縮）
• TypeScript（型）
• AngularJS AtScript（型、アノテーション）
• Facebook Flow（型、高速化？）

34. 型ばっかりでゴメンw
• でも Google, Microsoft, Facebook,
ビッグネームが型付きJS始めたのは
偶然じゃあない。
• ECMAScript Types が提案に（次の発表で！）
• 最強の出口戦略: 標準化
• 来るか大統一型定義時代！

35. http://teppeis.hatenablog.com/entry/2014/10/facebook-flow-in-3-minutes

36. Thanks!