このすみノート

Webエンジニアが技術や趣味を書くブログです。

CoffeeScriptとCoffeeScript2を試してみた - AltJS(代替JavaScirpt言語)

技術書典7に向けて「Node.js中級者を目指す」という本を書いてます。 その過程でAltJSについて勉強していたのですが、「CoffeeScript 2」の存在を知りました。

本記事はその備忘録にあたり、実行したインストールおよびサンプルプログラムと所感を共有します。

CoffeeScript 1系のインストールと実行

「npm install coffee-script」とすると、CoffeeScriptの1系が入ります。 今回はKAYACエンジニアブログ様のサンプルコードを参考に試してみました。

techblog.kayac.com

hello.coffee (CoffeeScript1)

# hello.coffee
hello = ->
    console.log("Hello World!")

hello()

npm install coffee-script

$ npm install coffee-script
$ npx coffee --version
> CoffeeScript version 1.12.7

$ npx coffee -c hello.coffee
# 「./node_modules/.bin/coffee -c hello.coffee」でも可
# コンパイルされたhello.jsが出来上がります。

$ cat hello.js
// Generated by CoffeeScript 1.12.7
(function() {
  var hello;

  hello = function() {
    return console.log("Hello World!");
  };

  hello();

}).call(this);

$ node hello.js
> Hello World!

CoffeeScript 2系のインストールと実行

「npm install coffeescript」とすると、CoffeeScriptの2系が入ります。 1系とのインストールの違いはハイフンの有無だけです。

coffeescriptとすると2系がインストールされ、coffee-scriptとすると1系がインストールされるので注意してください。 なお1.x系(coffee-script)は、すでに非推奨となってました。

f:id:konosumi:20190818171713p:plain

hello.coffee (CoffeeScript 2)

ちなみにCoffeeScript1系とまったく同じコードで試しました。 CoffeeScriptからCoffeeScript2へは、破壊的変更がありつつも互換性は一定レベルで保たれているみたいです。

# hello.coffee
hello = ->
    console.log("Hello World!")

hello()

npm install coffeescript

$ npm install coffeescript
$ npx coffee --version
> CoffeeScript version 2.4.1

# ここより先の手順はCoffeeScriptの1系と同じ手順でもできました
$ npx coffee -c hello.coffee
# 「./node_modules/.bin/coffee -c hello.coffee」でも可
# コンパイルされたhello.jsが出来上がります。

$ cat hello.js
// Generated by CoffeeScript 2.4.1
(function() {
  // hello.coffee
  var hello;

  hello = function() {
    return console.log("Hello World!");
  };

  hello();

}).call(this);

$ node hello.js
> Hello World!

CoffeScriptの衰退と進化

私はRubyエンジニアではないため詳しくないのですが、CoffeeScriptといえばRuby on Railsが採用したことで、知名度やユーザー数が増えたと認識してます。 ただCoffeeScriptは2009年に開発を始めたAltJSのため、ES2015や後発のAltJSがリリースされた今では、採用する恩恵が少なくなってしまいました。

ES2015がリリースされる前の当時であれば、たとえば「->」を使った関数の記述はコンパクトに書けてメリットが多かったと思います。

# 関数の記述
hello = ->
    console.log("Hello World!")

hello()

CoffeeScript 2の誕生

そこで登場したのがCoffeeScript2で、ES2015以降のJavaScriptやJSXに対応するといったさまざまな変更が行われました。

f:id:konosumi:20190818170908p:plain

さいごに

coffeescriptでは後置if「number = -42 if opposite」が気になってます。 perlでは好きな書き方だったので、それが使えるのは嬉しいです。

私が実戦投入でCoffeeScriptおよびCoffeeScript2を使ったことがないため、完全に個人の感想になってしまうのですが。 CoffeeScript2については、coffeeの書き方が好きな人向けのAltJSという印象を受けました。

CoffeeScript2に詳しい方がいらっしゃいましたら、ぜひお話を色々と聞いてみたいです。