ページ目次
ES2015、もしくはES6とは
この辺、私が説明するまでもないと思うのでざっくり言っとくと、JavaScriptの新しい表記方法なんだってさ！
functionの書き方が簡素化されたり、classを作れるようになったりと、今までのJavaScriptで物足りなかった部分が拡張されました。
ちなみにES2015とかES6とありますが、言い方が違うだけでどちらも同じです。ちなみに正式なのはECMAScript2015（ES2015）だそうです。
IEが未対応
ChromeやSafari、Firefoxなどのブラウザでは、この新仕様JavaScriptの機能のおおよそをサポートしていますが、IEは完全に非対応です。
最新のWindows標準ブラウザであるEdgeでは他のブラウザ同様とくに問題はありませんが、IE11は国内で第2位のシェアを持っているそうなので、これを無視する訳にはできないのが現状です。
【参考】WebブラウザシェアランキングTOP10(日本国内・世界)
ここでBabelが登場
上述の理由から、ES2015で書かれたJavaScriptを全ブラウザに対応させる必要があります。そしてそこで登場するのがBabelです。
【参考】Babel公式
Babelは、ES2015表記のJavaScriptを、今まで使用されたきた表記（ES5）に変換してくれるコンパイラーです。
近頃のフロントエンド界隈では、ES2015でJavaScriptのコードを書いてBabelでコンパイルしてサーバーにプッシュが主流です。なるほど。
CoffeeScriptを愛用している理由
CoffeeScriptは、公式サイトによると「JavaScriptにコンパイルされるプログラミング言語」とのことです。まあコンパイラーです。そういう認識です私の中では。
可読性が大事
私はこいつ（CoffeeScript）を愛用してきました。
理由は、書きやすい！
そしてなによりもコードが見やすい！
# CofeeScript
func = ->
console.log "Hi, there!"
// このように変換される
var func;
func = function(){
return console.log("Hi, there!");
}
これぐらいのシンプルさだと全然問題ないのですが、これがコールバック関数などが入り乱れてくると、「このブラケット（波括弧）はどこの部分を閉じてるんだっけ？」など、コードの可読性がガン下がりしてきます。（お前の書き方が悪いとか言っちゃダメ）
CoffeeScriptはブラケットをインデントで代替できます。Pythonと同じですね。そのおかげですっげー読みやすい。
インデント、神。
ES2015の登場で別れを考えたことも
そこに現れたES2015さん。新しい関数の書き方、変数のスコープや定数（constやlet）、そして何よりJavaScriptに欠けていたclass構文が導入されました。
// ES2015での記述例
// functionはこう書く
const func = () => {
console.log("ES2015");
}
// class構文
class Sample {
constructor(msg){
this.hi = msg;
}
sayHi(){
console.log(this.hi);
}
}
const klass = new Sample("hi, there");
klass.sayHi(); // hi,there
ブラケット地獄再び…orz
正直CoffeeScript慣れしていた私にとっては非常に面倒くさい。しかしCoffeeScriptはES2015には変換してくれない。
例えば、CoffeeScriptでclassを使ったら仕様上prototype関数を作っちゃいます。
ここでお別れなのねCoffeeScript（泣）
満を持してCoffeeScript2がやってくる
いや決別するのはまだ早い。と、いうことで、CoffeeScript2なるものがやってきました。
やってきた？いや、まだbetaバージョンなのでやってくるが正しいのか。
【参考】CoffeeScript2公式
以前のバージョンとの違いは、ES2015に対応していることです。早速書いてみます。
【変換前】
【変換後】
しっかりES2015表記で変換されています。ただし、「const」と「let」はサポートされていないようです。
ちなみに、「【->】と書くと、【function(){}】」に変換され、「【=>】、【() => {}】」に変換されます。
func = ->
console.log "ES5"
// 変換される
func = function() {
console.log("ES5");
};
func2 = =>
console.log "ES2015"
// 変換される
func2 = () => {
console.log("ES2015");
};
CoffeeからES2015に変換、最後にBabel
繰り返しになりますが、ES2015はすべてのブラウザでサポートされている訳ではありません。なので、CoffeeScriptからES2015にコンパイルしても万全を期すためBabelで従来の表記に再びコンパイルする必要があります。
こういう手順です。
「CoffeeScript → JavaScript (ES2015) → JavaScript (ES5)」
ここはWebpackを利用して上記手順を実行したいと思います。
【過去記事】webpack？なにそれ？よく分からん！ってなったのでこう考えてみた
npm install --save-dev webpack babel-core babel-loader babel-preset-env coffee-loader coffeescript@next
「coffeescript@next」と指定することでCoffeeScript2がインストールされます。
// webpack.config.coffee
// loader定義部分
module:
rules: [
{ test: /\.coffee?/,
use: [
{
loader: "babel-loader",
options: { preset: ['env'] }
},
"coffee-loader"
]
}
]
ゆくゆくはBabelいらずに
ES2015のブラウザ対応状況はどんどん改善されています。というかIE11が駆逐されていくのを見守るのみです。
そうなればBabelをかます必要がなくなり、現在と同じ状況（CoffeeSciprtを使ってJavaScriptを書く）となります。
私はその日はただ待つのみ。
