最近いろいろな環境でES6まわりの環境が整いはじめたので、使っていくために下調べしておこうと思う。

ES6の実装状況であるが、ECMAScript 6 compatibility tableにまとめが載っている。

例えば、io.js (nodeのfork)のES6実装状況。stableなES6 featuresが元から有効になってる。

現在有効なのは、文字列テンプレート、for of、generators, Promise, Map, WeakMap, Setなど。

最新版をターゲットにするのであれば、上の機能は何も考えずにそのまま使うことができる。 このうち、テンプレート、for of, WeakMap以外はpolyfillが手に入るので、それらを使わなければPromise, Mapなどはfeature detectして実装されていない場合はmoduleを読み込むことで幅広いバージョンをサポートできる。

node.jsは--harmonyを有効にしなければジェネレータが使えないなど、node.jsはio.jsとはES6まわりの実装事情が違う。

io.jsでサポートされていない(classes)などの機能を使いたい、あるいは自分で書いているコードでサポートするバージョンのio.js / nodeでネイティブに実装されていない機能を使いたい場合は、トランスパイラを使う。 今一番勢いがあって機能が整ってるのはBabel.js (つい最近まで6to5という名前だった)で、クラスなどのES6の機能はもちろんsource mapsのサポートもあり、React、JSX、Flowなども使用することができる。

一般的なトランスパイラと同様で、

$ npm install --global babel
$ babel script.js

とするだけで使うことができるので、gulpなどでコンパイルするといい。

この場合、

dist/*.js
src/*.es6.js

のように、ES6のコードは.es6.jsとしておくとわかりやすくて、 npm publishするときは、 dist/側はhookでインストール時に生成されるようにしておくとgit logが汚れない。

source mapsについては、io.js / node側で有効にするには

require('source-map-support').install()

とすれば良い (参考: ES6 at PayPal )。

ReactとJSXを使いたい場合は、もともとreact-toolsはharmonyオプションがあるので、一部機能だけを使えればいい場合は

<script type="text/jsx;harmony=true">

などとして書くかreact-toolsでharmonyオプションを有効にすればいいのだが、Babel (6to5) もJSXをサポートしているので、より完全なES6実装が欲しい場合はBabelを使うとよい。

そんな感じで、タイトルと比べて内容がスカスカではあるが、ここ最近、トランスパイラが急に進化してきてES6が使える環境がいきなり整ってきたような雰囲気があるので、そろそろ使い始めてもいい頃だと思う。いつのまにかブログの更新が数ヶ月空いてしまったけど生きてるので、今年も頑張ってブログを書いていきたい。