ES6を試すために

2015.10.29.木
JavaScript

溝畑です。
最近、JavaScriptのサンプルソースを見ていると、ES6の構文が使われていることが増えてきました。

React.jsもv0.13からES6のclass構文で書けるようになっていますし、
Cycle.jsのサンプルを見ると、ES6の構文を使用して書かれています。

すぐに実践導入できるかと言われると...対応状況のことや、
古いブラウザへの対応などのこともあり、導入し辛いのが現状だと思います。

ですが、試しておきたいし、慣れておきたい。
そこで、ES6→ES5のトランスパイラである、babelを使うと良いです。

今回はgulpを使用して、browserify + babelifyの例。


aureliaを試したときにBrowserSyncが便利だったので、そのまま引き継いでみました。

ファイルを変更してbuildを実行、bundle.jsが更新されたら自動でブラウザリロードという流れです。
もっと良いやり方があると思いますが、このような感じで書いてみました。

こうすることで、↑の例であれば、src以下のソースはES6の構文を使って書き、
読み込むのはES5に変換されたbundle.jsということが可能です。

実際にはIE8への対応などで、これだけで解決というわけにはいかないと思いますが、
今後のためにも、ES6構文を試し、少しずつ学んでおくと良いと思います。