ES6とBabel
ES6ではclass構文が使えるようになり、素直なオブジェクト指向プログラミングが可能になったが、ES6は現状サポートしていないブラウザもある。そのためES6で書いたスクリプトはBabelを使ってES5にトランスコンパイルして使用する。
CodePenとBabel
CodePenではBabelをプリプロセッサーとして用いることができ、これによってES6記法のJSをES5記法に変換することができる。
ES6のfunction記法抜粋
ES6はarrow functionが使える。これとjQueryを組み合わせた記法を以下に示す。
特に、arrow functionとjQueryのhoverメソッドを用いる場合にthisの扱いに注意することがポイントである。
See the Pen NbNaXY by nakanishi (@nakanishi) on CodePen.
CoffeeScriptとの違い
CofeeScriptの開発はほぼ停止しているらしく、かつ一番必要とされていたクラス構文がES6で実装されたことから、基本的にはES6を中心に書いていけばよいものと思われる。
- {}も()も;も基本的に必要で、通常のJSと同じ。
- インデントは内容には関係しない (CoffeeScriptはインデントによって内容が変わる)
- import,export,require関係は微妙に異なるようなので注意
- クラス構文が使えるのはどちらも共通しているが、書き方が少し異なるようだ