JavaScript Tips 2015（PDF 版）
1 like2,935 views
HTML 版: http://alprosys.com/es6/js_tips_2015.html 主に ECMAScript 6 と altJS の話
![try it out
https://babeljs.io/repl/
let x = 42;
{
let x = 0;
}
let pow2 = x => x * x;
class Base {}
class Derived extends Base {}
let xs = [2, 3, 5];
for (let x of xs) console.log(x);
14 / 46](https://image.slidesharecdn.com/javascripttips2015-150630123450-lva1-app6891/85/JavaScript-Tips-2015-PDF-14-320.jpg)
![ECMAScript 7
ECMAScript 7 compatibility table
Babel は ES7 にも一部対応している
--stage [0-1] フラグが必要
Experimental · Babel
Stage 2 (Draft) 以上はデフォルトでオンになっている
async / await や配列内包表記などが実装されている
変更がある可能性が非常に高いので実務では使えない
Firefox (39) が SIMD に対応してたり (asm.js 関連) 、Chrome が
Object.observe（AngularJS 関連）に対応してたりする
16 / 46](https://image.slidesharecdn.com/javascripttips2015-150630123450-lva1-app6891/85/JavaScript-Tips-2015-PDF-16-320.jpg)
JavaScript Tips 2015（PDF 版）
- 1. JavaScript Tips 2015 ES6 リリース記念号 主に ECMAScript 6 と altJS の話 2015/06/06 2015/06/30 改訂 taskie 1 / 46
- 2. 目次 ECMAScript 6 (+ Babel) altJS (Co?eeScript, TypeScript, Haxe, Flow) React（おまけ） Appendix: ES6 Features 別スライドに分離 2 / 46
- 3. このスライドについて Remark 製 gnab/remark JavaScript 製スライドショー作成ツール Markdown でスライドを書ける ややパーザに癖あり Syntax Highlighting あり 3 / 46
- 4. 前提 JavaScript とは Java ではない 基本的に Chrome, Firefox, IE などのブラウザ上で動く言語 サーバサイド JavaScript 処理系もある Node.js / io.js パッケージマネージャ：npm creationix/nvm か hokaccha/nodebrew でインストールするとよい Windows は hakobera/nvmw というのがあるらしい（未確認） 4 / 46
- 5. ECMAScript 6 5 / 46
- 6. ECMAScript 公式サイト：ECMAScript Ecma International が定めたスクリプト言語の規格 (ECMA-262) ECMAScript 1st Edition は 1997 年 6 月公開 背景：JavaScript (Netscape) と JScript (IE) が独自進化しすぎて互換性 がない→ 標準化の機運 JavaScript や ActionScript は ECMAScript の方言という扱い ECMAScript に採用された機能は（将来的に）JavaScript でも使えるよ うになる（ことが期待される） 6 / 46
- 7. 歴史 ES3: ECMAScript 3rd Edition（1999 年 12 月?） ES4: ECMAScript 4th Edition（放棄） 1st Round (?2003): Netscape vs. Microsoft 2nd Round (?2008): Mozilla, Adobe, Opera, Google vs. Microsoft, Yahoo! → ECMAScript Harmony へ ES4 で議論されていた機能は ES5, ES6 以降に引き継がれる ES5: ECMAScript 5th Edition（2009 年 12 月?） ES6: ECMAScript 6th Edition（2015 年 6 月?） ES7: ECMAScript 7th Edition（??） 7 / 46
- 8. ECMAScript 5 2009 年 12 月リリース 2010 年 6 月に修正版の ECMAScript 5.1 がリリースされた ECMAScript 5 compatibility table IE 8 (2009 年 3 月?) では動かない（IE 9: 2011 年 4 月?） 目安：Bootstrap 3 は IE 8 にギリギリ対応 小粒ながら重要な機能追加がある 参考：ES6の前にES5のベストプラクティスを改めて考えたい - snyk_s log 8 / 46
- 9. ECMAScript 5 の新機能 Object.create , Object.defineProperty Function.prototype.bind Array.prototype.indexOf , Array.prototype.forEach , Array.prototype.map , ... JSON "use strict"; etc... 9 / 46
- 10. ECMAScript 6 2015 年 6 月 17 日に正式リリース ECMAScript 2015 Language Speci?cation ? ECMA-262 6th Edition 重要な新機能の追加が多々ある 参考：Overview of ECMAScript 6 features 10 / 46
- 11. ECMAScript 6 の新機能 クラス ( class , extends , super ) アロー関数（ (x, y) => { ... } ） ブロックスコープの変数 ( let ) 、定数 ( const ) 列挙 ( for (var x of xs) ) ジェネレータ ( function * , yield ) テンプレートリテラル ( `${x} + ${y} = ${x + y}` ) etc... 11 / 46
- 12. 対応状況 ECMAScript 6 compatibility table 各ブラウザ?処理系の対応状況が見られる 最もスコアが高いブラウザは IE 後継の Edge (69%) 前身の IE 11 は 10% 台しかない Firefox は 60% 台、Chrome は 50% くらい node.js は 23%、io.js は 43% どうでもいい機能も多々あるので 60% あれば優秀っぽい 規格がリリースされても実際に動作しなければ意味がない…… 12 / 46
- 13. Babel 公式サイト：Babel · The compiler for writing next generation JavaScript 次世代の JavaScript を現世代の JavaScript に変換するトランスパイラ 旧称：6to5 (ES6 to ES5 の意) $ npm install -g babel でグローバルインストール 使い方 $ babel input.js -o output.js $ babel-node input.js 13 / 46
- 14. try it out https://babeljs.io/repl/ let x = 42; { let x = 0; } let pow2 = x => x * x; class Base {} class Derived extends Base {} let xs = [2, 3, 5]; for (let x of xs) console.log(x); 14 / 46
- 15. 注意 ES6 の全機能に対応しているわけではない また、ブラウザ（処理系）側のサポートが必要な機能も多々ある 一部の機能を使う場合には poly?ll が必要になる IE, Safari には Symbol.iterator （ for ? of に必要）が無い Caveats · Babel Poly?ll · Babel $ npm install --save babel して import "babel/polyfill"; ( require("babel/polyfill"); ) する 15 / 46
- 16. ECMAScript 7 ECMAScript 7 compatibility table Babel は ES7 にも一部対応している --stage [0-1] フラグが必要 Experimental · Babel Stage 2 (Draft) 以上はデフォルトでオンになっている async / await や配列内包表記などが実装されている 変更がある可能性が非常に高いので実務では使えない Firefox (39) が SIMD に対応してたり (asm.js 関連) 、Chrome が Object.observe（AngularJS 関連）に対応してたりする 16 / 46
- 17. altJS 17 / 46
- 18. altJS alternative JavaScript JavaScript にコンパイルすることができる言語 （注：前回発表が 2013 年末だったため 2013 年までの状況と現在の状況を 対比する構成になっています） 18 / 46
- 19. Co?eeScript 特徴 (?2013) JavaScript の罠を回避するための言語 糖衣構文マシマシ そこそこ綺麗な JavaScript を吐く 常にオワコン化が危惧されている 19 / 46
- 20. 近況 Atom (2014?) の設定は Co?eeScript で書ける 参考：GitHub の ATOM が Co?eeScript で書かれているのはどうなの? - ワザノバ ? wazanova ES6 の機能で割と楽に JavaScript を書けるようになる（なった）のでオワコ ン化が危惧されている Co?eeScript に対応した IDE やエディタは結構多い Gulp や Webpack などの設定を書く分には便利 20 / 46
- 21. 利点（ES6 との比較） オブジェクトリテラルの中括弧 ( { , } ) を省略できる（最重要） this ( this. ) を @ と書ける 存在演算子がある foo? , foo?.bar , foo?() , foo ?= bar , foo ? bar if , for , case ? when などが文ではなく式である セミコロンや関数呼び出しの括弧なども省略できるので DSL 的な用途に向く JavaScript でセミコロンを省略すると痛い目を見ることがある 参考：Google JavaScript Style Guide 和訳 - セミコロン インデント言語なのでコールバック関数がネストしたような状況だと読みやす い場合もある 21 / 46
- 22. 利点（Babel との比較） Co?eeScript の吐く JavaScript は基本的に ES3 に準拠している Babel の for ? of は ES6 の機能 ( Symbol.iterator ) に依存してい るため poly?ll が必要になる 22 / 46
- 23. 欠点 新たな言語を 1 つ覚える手間が増える JavaScript と Co?eeScript で演算子?キーワードの意味は大きく異なる ES6 の文法と合わなくなった構文もある for ? in と for ? of の意味が ECMAScript とほぼ逆 yield には対応している（そのまま書き出される）が ES6 の for ? of を使えないので列挙は手動 文字列に式を埋め込む方法 `${x}` (ES6) "#{x}" (Co?eeScript) インデント言語なのでコピペ耐性が低い 23 / 46
- 24. TypeScript 特徴 (?2013) Microsoft 謹製 altJS C# を設計した Anders Hejlsberg が関わっている JavaScript の（ほぼ）上位互換 既存ライブラリとの連携が楽 JavaScript の欠点も若干引き継いでいる Haxe と比較するとコンパイルが遅い まともな開発環境が現状 Visual Studio しかない 将来的に伸びる可能性はある 24 / 46
- 25. 近況 伸びた ES6 への対応も進んでいる 型定義ファイル（既存 JS ライブラリに型を付けるためのファイル）も多い borisyankov/De?nitelyTyped De?nitelyTyped/tsd か vvakame/dtsm を使うとよい Microsoft が Visual Studio Code (2015/04/30-) を投げつけてきた コンパイル速度はだいぶ改善された 総コード量が 30 KB を超えたあたりからだんだん VS Code の入力補完が効 かなくなってくる 25 / 46
- 26. 利点 基本的に型のある JavaScript として書ける 新言語を覚える手間が省ける 便利な文法の追加がある constructor (public hoge: Hoge) と書くと引数がそのままメンバ変数 になる enum が存在する 26 / 46
- 27. 欠点 ECMAScript の欠点は大体 TypeScript の欠点でもある JavaScript の罠についてある程度知っている必要がある 将来的に本当に ECMAScript TypeScript になるのかは不明 ES6 の機能を本格的に使いたい場合 tsc でコンパイルした結果を更に babel にかける必要がある let ループ変数、 class の set / get 、 export / import など コンパイル時間増 ES6 対応が甘いところが結構ある generator 周りはほぼ使えない（tsc v1.5.0-beta 時点） ES6 形式の export に対応していない *.d.ts もある 27 / 46
- 28. Haxe 特徴 (?2013) 型推論が超強力 処理系は OCaml 製 代数的データ型がある altJS の中では歴史が長く実績がある ActionScript, Java, PHP, C#, C++ などにも変換できる 既存ライブラリとの連携が難しい 28 / 46
- 29. 近況 TypeScript 流行の割を食った 型定義ファイルも TypeScript の方が充実している Haxe の型定義ファイルは lib.haxe.org にある 最近（5月12日）3.2 にバージョンアップした Haxe3.2の新機能まとめ - Qiita 10周年らしい 29 / 46
- 30. 利点（TypeScript との比較） コンパイルが高速 入力補完の速度も優秀 代数的データ型とパターンマッチがある mixin がある Ruby, Scala の mixin よりも C# の拡張メソッドに近い macro がある メンバ変数／関数を使う際に this. を書く必要がない ゲーム製作に関しては OpenFL という割と実績のあるクロスプラットフォー ムのライブラリが存在する 30 / 46
- 31. 欠点 ユーザが少ない 既存の JavaScript 資産を使い辛い CommonJS require との相性が悪かった Haxe 3.2.0で型付きのrequireをする - Qiita 型定義ファイルが少ない alert 1 つ呼ぶのにも js.Lib.alert みたいな書き方をする必要があ る 変数名に $ を使えない 吐かれた JavaScript を人間が読むのは難しい SourceMap 必須 31 / 46
- 32. Flow Flow ? A static type checker for JavaScript 2014年11月に公開された新しい処理系（静的型チェッカー） Facebook 製 処理系は OCaml 製 ただの JavaScript も型検査できる Babel はデフォルトで Flow 用の型注釈を外してくれる 個人的にはあんまり試してないのでノーコメントで null チェックとかあるっぽい？ React JSX のサポートもあるようだ 参考：Facebook Flowの初見の感想 - Qiita 32 / 46
- 33. React 33 / 46
- 34. React A JavaScript library for building user interfaces ? React Facebook 製 "Just the UI" いわゆる「MVC の V (View) を作るやつ」 "Virtual DOM" Virtual DOM をスクラップ & ビルド → Real DOM は差分更新される サーバサイド (Node.js 上) でも動作する ( React.renderToString ) "one-way reactive data ?ow" 双方向データバインディング (AngularJS, Backbone) との対比 34 / 46
- 35. ここを読みましょう 一人React.js Advent Calendar 2014 - Qiita VirtualDom - なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita あなたがReactを使うべき理由 - mizchi's blog Flux: Facebook が提唱した MVC の再発明 ReactとFluxのこと // Speaker Deck 10分で実装するFlux 実装は乱立している Dispatcher を無くした spoike/re?uxjs というものもあるらしい 35 / 46
- 36. JSX JSX ? XML-like syntax extension to ECMAScript XML を JavaScript に埋め込んだような記法 Babel はデフォルトで JSX を React のオブジェクトに変換してくれる https://babeljs.io/repl 36 / 46
- 37. JSX を使った場合 var HelloMessage = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); React.render(<HelloMessage name="John" />, mountNode); 37 / 46
- 38. JSX を使わない場合 var HelloMessage = React.createClass({ render: function() { return React.createElement("div", null, "Hello ", this.props.name); } }); React.render(React.createElement(HelloMessage, { name: "John" }), mountNode); 38 / 46
- 39. JSX 記法の利点 簡潔 JSX 記法の欠点 JSX に対応した altJS が少ない JSX に対応したエディタが少ない シンタックスハイライトやインデントが崩壊する 39 / 46
- 40. React + ES6 ES6 の class で React.Component を継承できる (v0.13?) ES6 Classes ? Reusable Components ? React class HelloMessage extends React.Component { render() { return <div>Hello {this.props.name}</div>; } } 40 / 46
- 41. React + Bootstrap React-Bootstrap まだベータ版 以下のような感じで Bootstrap のコンポーネントを配置できる <ButtonToolbar> <Button>Default</Button> </ButtonToolbar> 41 / 46
- 42. まとめ 42 / 46
- 43. （その前に）気になるもの Web Components W3C で策定中 Web Components Current Status - W3C 参考：Web Componentsの基本的な使い方?まとめ Polymer Google 製 最近（5月29日）1.0 になった 参考：Polymer と Web Components の違い9選（もとい Polymer の 便利機能） ::ハブろぐ 43 / 46
- 44. ビルドについて ビルド周りの話を全くしていなかった 個人的には gulp.js と webpack を使っている gulp も webpack もプラグインで万能になるのでどっちに比重を置くかとい う問題がある Babel の場合、gulp には gulp-babel、webpack には babel-loader が ある 大抵の用途なら webpack で完結する気がする 日本語の情報が少なめ import ( require ) を解決したい場合 webpack か Browserify のどち らかが必要 44 / 46
- 45. まとめ ECMAScript 6 に備えよう JavaScript 界の進化は著しい 落ち着いてほしい 登場から 20 年間落ち着いたことがなさそう 未来永劫落ち着くことはないだろう…… 頑張って付いて行きましょう…… 45 / 46