CoffeeScriptが帰ってきた! 2.0.0-alphaリリースでES2015(ES6)に対応 ｜ SiTest (サイテスト) ブログ

みなさん、CoffeeScriptは好きですか？

それまで(ES3,ES5)のJavaScriptに比べて圧倒的にシンプルで分かりやすい記法により大人気となったAltJSですが、ES2015以降の「標準」JavaScriptにその記法の多くが取り入れられ、優位性が薄れました。

また、静的型付けが可能なTypeScriptの台頭などがあり、最近あまり名前を聞かなくなってしまいました。

しかし、{}を使わず、インデントでブロックを定義するシンプルな記法など、ES2015以降に取りこまれていないCoffeeScriptの利点はまだまだあります。

インデントでのブロック定義は実装が難しく、処理系の乱立するJavaScriptの標準にはなりそうにありません。なので、私はCoffeeScriptが大好きです!

ですから、ES2015以降に対応した新しいCoffeeScriptの登場を待っていたのですが、先日、ついにGitHub上に次のようなリリースがありました。

Progress as of February 2017: 2.0.0-alpha1!
https://github.com/coffeescript6/discuss/issues/71

CoffeeScript2.0.0!
この時を待っていた！

早速インストールです!

インストールコマンドは上記記事ではオプションなしで

$ npm install coffeescript@next

紹介されていましたが、どのみち

npm WARN prefer global coffeescript@2.0.0-alpha1 should be installed with -g

と警告がでるので、グローバルでインストールすることにします。(coffeeコマンドが新バージョンに上書きされるので、あまりおすすめはしませんが…)

$ npm install coffeescript@next -g
(中略)
/Users/xxx/.nodebrew/node/v5.10.1/lib
└── coffeescript@2.0.0-alpha1

インストールできました!(他の開発用に古いnodeを使っています…直後に書きますが、これが原因でエラーがおこりました。)

公式サイトから旧バージョンのサンプルソース(Classes, Inheritance, and Superの説明のところです。)
を拝借して test.coffeeという名前で保存します。(alertはconcole.logに変更しました)

class Animal
  constructor: (@name) ->

  move: (meters) ->
    console.log @name + " moved #{meters}m."

class Snake extends Animal
  move: ->
    console.log "Slithering..."
    super 5

class Horse extends Animal
  move: ->
    console.log "Galloping..."
    super 45

sam = new Snake "Sammy the Python"
tom = new Horse "Tommy the Palomino"

sam.move()
tom.move()

喜び勇んでコンパイル!

$ coffee -c test.coffee

しかし、動かない。
Nodeのバージョンが古く、デフォルト引数が使えないので怒られてしまいました

SyntaxError: Unexpected token =
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:387:25)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Module.require (module.js:367:17)
    at require (internal/module.js:16:19)
    at Object. (/Users/xxx/.nodebrew/node/v5.10.1/lib/node_modules/coffeescript/bin/coffee:7:1)
    at Module._compile (module.js:413:34)
    at Object.Module._extensions..js (module.js:422:10)

おとなしくNodeの最新バージョンを使います…

$ nodebrew use latest
use v7.6.0

気を取り直してもう一度!

$ coffee -c test.coffee
$

コンパイルできました！結果はこちら

// Generated by CoffeeScript 2.0.0-alpha1
(function() {
  var Animal, Horse, Snake, sam, tom;

  Animal = class Animal {
    constructor(name) {
      this.name = name;
    }

    move(meters) {
      return console.log(this.name + ` moved ${meters}m.`);
    }

  };

  Snake = class Snake extends Animal {
    move() {
      console.log("Slithering...");
      return super.move(5);
    }

  };

  Horse = class Horse extends Animal {
    move() {
      console.log("Galloping...");
      return super.move(45);
    }

  };

  sam = new Snake("Sammy the Python");

  tom = new Horse("Tommy the Palomino");

  sam.move();

  tom.move();

}).call(this);

　これまでだったら、class は prototypeを使って表現したり、extendは専用の関数を用いたりと、コンパイル後のソースは必ずしも可読性がよくはなく、デバッグが難しかったのですが

　今回からES2015以降の class 記法を用いて、コンパイル後のソースも分かりやすいものになっています。これは嬉しい。あと、テンプレートリテラルも、そのままES2015のものが出力されています。

コンパイル後のES2015以降の記述スタイルになるので、残念ながら、旧CoffeeScriptとの併用はできなくなりそうですが、「ES2015+」「CoffeeScript」のいいところ取りができています。

functionはfunctionのままで、アロー演算子(=>)には置き換わられないようです。全部置き換えればいいというものでも無いのでいいのですが…難しいところです。

比較用に、旧CoffeeScriptで生成されたソースも掲載いたします。やっぱり読みづらい…

var Animal, Horse, Snake, sam, tom,
  extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
  hasProp = {}.hasOwnProperty;

Animal = (function() {
  function Animal(name) {
    this.name = name;
  }

  Animal.prototype.move = function(meters) {
    return console.log(this.name + (" moved " + meters + "m."));
  };

  return Animal;

})();

Snake = (function(superClass) {
  extend(Snake, superClass);

  function Snake() {
    return Snake.__super__.constructor.apply(this, arguments);
  }

  Snake.prototype.move = function() {
    console.log("Slithering...");
    return Snake.__super__.move.call(this, 5);
  };

  return Snake;

})(Animal);

Horse = (function(superClass) {
  extend(Horse, superClass);

  function Horse() {
    return Horse.__super__.constructor.apply(this, arguments);
  }

  Horse.prototype.move = function() {
    console.log("Galloping...");
    return Horse.__super__.move.call(this, 45);
  };

  return Horse;

})(Animal);

sam = new Snake("Sammy the Python");

tom = new Horse("Tommy the Palomino");

sam.move();

tom.move();

ES2015以降の痒いところに手が届くCoffeeScript 2.0。 α版なので、プロダクトには使えませんが早速プライベートで使ってみることにします。それでは！