Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo
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/
Closure CompilerのES6対応 あるいはES6時代のAltJS生存戦略
Closure CompilerのES6対応 あるいはES6時代のAltJS生存戦略
対応状況のチェックを自動化 
• かなりの書きなぐりコード 
• 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
nodeconf.eu 2014 
http://yosuke-furukawa.hatenablog.com/entry/2014/09/10/191140
ちょw
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!

More Related Content

Closure CompilerのES6対応 あるいはES6時代のAltJS生存戦略