ES2015で書いてBabel使うならCoffeeScript2も使っとけばいいんじゃね?説

CoffeeScript2

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に対応していることです。早速書いてみます。

【変換前】
CoffeeScriptコンパイル前

【変換後】
CoffeeScript変換後

しっかり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で従来の表記に再びコンパイルする必要があります。

こういう手順です。
CoffeeScriptJavaScript (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を書く)となります。

私はその日はただ待つのみ。

(Visited 247 times, 1 visits today)