Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

16,384 views

Published on

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

Published in: Technology
  • Be the first to comment

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

  1. 1. Closure CompilerのES6対応 あるいは ES6時代のAltJS生存戦略 @teppeis ES6 Casual 2014/10/29
  2. 2. Hello! • @teppeis • cybozu kintone • Closure Compiler, TypeScript, Testing, Scaling..
  3. 3. Closure Compiler
  4. 4. Closure Compiler • compile JS to better JS • 超圧縮&最適化 • JSDocベースの静的型付け
  5. 5. あなたも毎日使ってます!
  6. 6. JSDocベースの静的型付け
  7. 7. JSDocベースの静的型付け • 冗長だけど、既存のJSとの親和性がバツグン • JavaScriptの進化に追随できる(後述) • コンパイルなしでも実行可能 • どうせJSDoc書くし。 まさか、ドキュメント書かない気ですか?
  8. 8. 5月にGitHub化
  9. 9. 活発に開発中
  10. 10. 最近何やってんの? • ECMAScript6対応 • 型推論の強化 • RefasterJS(自動リファクタリング) • Conformance(規約チェック)
  11. 11. ECMAScript 6
  12. 12. Compile ES6 to ES3 java -jar compiler.jar --language_in ECMASCRIPT6 --language_out ECMASCRIPT3 --js foo.js
  13. 13. Arrow Function
  14. 14. Class
  15. 15. Enhanced object literals
  16. 16. Default, rest, spread params
  17. 17. and already supported ! • const/let • Generator • Destructuring • String templates • Binary & octal literal • …
  18. 18. 実装中の大物 • Modules • super (Class)
  19. 19. ES6 compatibility table 各種ブラウザとコンパイラのES6対応表 http://kangax.github.io/compat-table/es6/
  20. 20. 対応状況のチェックを自動化 • かなりの書きなぐりコード • 6to5とかも対応しようと思ったけど面 (ry
  21. 21. Why doesn’t Closure use Traceur?
  22. 22. Tracuerを使わなかった理由 • Tracuerは変換結果にコメントを残せない • Closure CompilerではJSDocが肝 • パフォーマンス問題 • TraceurはJS実装、ClosureはJava実装 • ASTとソースの変換が2回
  23. 23. コンパイルのコスト • Traceur + Closure • ES6 > Traceur AST > ES5 > Closure AST > Optimized ES5 • Closure only • ES6 > Closure AST (ES6 > ES5) > Optimized ES5
  24. 24. nodeconf.eu 2014 http://yosuke-furukawa.hatenablog.com/entry/2014/09/10/191140
  25. 25. ちょw
  26. 26. Tracuerの微妙なところ • 自前で実装する基準がよくわからない • String.prototype.startsWith とか • そのおかげでランタイムがめちゃでかい。 • コンパイル不要な機能は es6shimに任せれば良いのでは?
  27. 27. ES6 vs. AltJS
  28. 28. AltJS黎明期 • 各種AltJSがオレオレ最強Syntaxを実装 • そのうち有用なものをES6/7が取り込む • ES6だけでも十分モダンなsyntaxに • 各ブラウザとコンパイラがES6対応開始 • いまここ
  29. 29. AltJSの選定基準 • そのコンテキストにおけるJSの不満を解決 • 主目的はそれぞれ • 学習コスト、開発者の確保 • ECMAScriptベースだと楽じゃない? • AltJSからの出口戦略(プロダクトとAltJSどっちが長生き?) • 開発の継続性 • コミュニティが活発 • 強力な後ろだて(政治) • 移行コスト • 元コードがキレイ or 生成コードがキレイ(標準に近い)
  30. 30. ECMAScript準拠の強み • Closure Compilerは基本文法はJSそのまま • JS (ECMAScript) が進化すれば、 Closure Compilerも合わせて進化できる • 独自syntaxのAltJSではそうもいかない • 進化しないと、機能落ち、 類似だけど微妙に違う仕様、などに陥る
  31. 31. ES6時代のAltJS • 欲張らないES6ベース + 独自色(主目的) • Closure(型、圧縮) • TypeScript(型) • AngularJS AtScript(型、アノテーション) • Facebook Flow(型、高速化?)
  32. 32. 型ばっかりでゴメンw • でも Google, Microsoft, Facebook, ビッグネームが型付きJS始めたのは 偶然じゃあない。 • ECMAScript Types が提案に(次の発表で!) • 最強の出口戦略: 標準化 • 来るか大統一型定義時代!
  33. 33. http://teppeis.hatenablog.com/entry/2014/10/facebook-flow-in-3-minutes
  34. 34. Thanks!

×