Closure CompilerのES6対応 あるいは

ES6時代のAltJS生存戦略

@teppeis ES6 Casual 2014/10/29

Hello!• @teppeis

• cybozu kintone

• Closure Compiler, TypeScript, Testing, Scaling..

Closure Compiler

Closure Compiler

• compile JS to better JS

• 超圧縮＆最適化

• JSDocベースの静的型付け

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

JSDocベースの静的型付け

JSDocベースの静的型付け• 冗長だけど、既存のJSとの親和性がバツグン

• JavaScriptの進化に追随できる（後述）

• コンパイルなしでも実行可能

• どうせJSDoc書くし。まさか、ドキュメント書かない気ですか？

5月にGitHub化

活発に開発中

最近何やってんの？• ECMAScript6対応

• 型推論の強化

• RefasterJS（自動リファクタリング）

• Conformance（規約チェック）

ECMAScript 6

Compile ES6 to ES3

java -jar compiler.jar \ --language_in ECMASCRIPT6 \ --language_out ECMASCRIPT3 \ --js foo.js

Arrow Function

Class

Enhanced object literals

Default, rest, spread params

and already supported !• const/let

• Generator

• Destructuring

• String templates

• Binary & octal literal

• …

実装中の大物• Modules

• super (Class)

ES6 compatibility table

各種ブラウザとコンパイラのES6対応表

http://kangax.github.io/compat-table/es6/

対応状況のチェックを自動化• かなりの書きなぐりコード

• 6to5とかも対応しようと思ったけど面 (ry

Why doesn’t Closure use Traceur?

Tracuerを使わなかった理由• Tracuerは変換結果にコメントを残せない

• Closure CompilerではJSDocが肝

• パフォーマンス問題

• TraceurはJS実装、ClosureはJava実装

• ASTとソースの変換が2回

コンパイルのコスト• Traceur + Closure

• ES6 > Traceur AST > ES5 > Closure AST > Optimized ES5

• Closure only

• ES6 > Closure AST (ES6 > ES5) > Optimized ES5

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

nodeconf.eu 2014

ちょｗ

Tracuerの微妙なところ• 自前で実装する基準がよくわからない

• String.prototype.startsWith とか

• そのおかげでランタイムがめちゃでかい。

• コンパイル不要な機能はes6shimに任せれば良いのでは？

ES6 vs. AltJS

AltJS黎明期• 各種AltJSがオレオレ最強Syntaxを実装

• そのうち有用なものをES6/7が取り込む

• ES6だけでも十分モダンなsyntaxに

• 各ブラウザとコンパイラがES6対応開始

• いまここ

AltJSの選定基準• そのコンテキストにおけるJSの不満を解決

• 主目的はそれぞれ • 学習コスト、開発者の確保

• ECMAScriptベースだと楽じゃない？ • AltJSからの出口戦略（プロダクトとAltJSどっちが長生き？）

• 開発の継続性 • コミュニティが活発 • 強力な後ろだて（政治）

• 移行コスト

• 元コードがキレイ or 生成コードがキレイ（標準に近い）

ECMAScript準拠の強み• Closure Compilerは基本文法はJSそのまま

• JS (ECMAScript) が進化すれば、Closure Compilerも合わせて進化できる

• 独自syntaxのAltJSではそうもいかない

• 進化しないと、機能落ち、 類似だけど微妙に違う仕様、などに陥る

ES6時代のAltJS

• 欲張らないES6ベース + 独自色（主目的）

• Closure（型、圧縮）

• TypeScript（型）

• AngularJS AtScript（型、アノテーション）

• Facebook Flow（型、高速化？）

型ばっかりでゴメンw• でも Google, Microsoft, Facebook,

ビッグネームが型付きJS始めたのは 偶然じゃあない。

• ECMAScript Types が提案に（次の発表で！）

• 最強の出口戦略: 標準化

• 来るか大統一型定義時代！

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

Thanks!