HTML 版: http://alprosys.com/es6/js_tips_2015.html 主に ECMAScript 6 と altJS の話

1. JavaScript Tips 2015
ES6 リリース記念号
主に ECMAScript 6 と altJS の話
2015/06/06
2015/06/30 改訂
taskie
1 / 46

2. 目次
ECMAScript 6 (+ Babel)
altJS (CoffeeScript, 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 Specification ‒ 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 の全機能に対応しているわけではない
また、ブラウザ（処理系）側のサポートが必要な機能も多々ある
一部の機能を使う場合には polyfill が必要になる
IE, Safari には Symbol.iterator （ for ‒ of に必要）が無い
Caveats · Babel
Polyfill · 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. CoffeeScript
特徴 (‒2013)
JavaScript の罠を回避するための言語
糖衣構文マシマシ
そこそこ綺麗な JavaScript を吐く
常にオワコン化が危惧されている
19 / 46

20. 近況
Atom (2014‒) の設定は CoffeeScript で書ける
参考：GitHub の ATOM が CoffeeScript で書かれているのはどうなの?
- ワザノバ ¦ wazanova
ES6 の機能で割と楽に JavaScript を書けるようになる（なった）のでオワコ
ン化が危惧されている
CoffeeScript に対応した 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 との比較）
CoffeeScript の吐く JavaScript は基本的に ES3 に準拠している
Babel の for ‒ of は ES6 の機能 ( Symbol.iterator ) に依存してい
るため polyfill が必要になる
22 / 46

23. 欠点
新たな言語を 1 つ覚える手間が増える
JavaScript と CoffeeScript で演算子・キーワードの意味は大きく異なる
ES6 の文法と合わなくなった構文もある
for ‒ in と for ‒ of の意味が ECMAScript とほぼ逆
yield には対応している（そのまま書き出される）が ES6 の for
‒ of を使えないので列挙は手動
文字列に式を埋め込む方法
`${x}` (ES6)
"#{x}" (CoffeeScript)
インデント言語なのでコピペ耐性が低い
23 / 46

24. TypeScript
特徴 (‒2013)
Microsoft 謹製 altJS
C# を設計した Anders Hejlsberg が関わっている
JavaScript の（ほぼ）上位互換
既存ライブラリとの連携が楽
JavaScript の欠点も若干引き継いでいる
Haxe と比較するとコンパイルが遅い
まともな開発環境が現状 Visual Studio しかない
将来的に伸びる可能性はある
24 / 46

25. 近況
伸びた
ES6 への対応も進んでいる
型定義ファイル（既存 JS ライブラリに型を付けるためのファイル）も多い
borisyankov/DefinitelyTyped
DefinitelyTyped/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 flow"
双方向データバインディング (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/refluxjs というものもあるらしい
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

46. END
We are hiring!
http://unipro.co.jp/
46 / 46