私のCoffeeScriptをコンパイルする方法の変遷

私が本格的にJavaScriptを使いだしたのは今から二年ほど前です。
当時はBackboneでMVCをしよう。という記事が流行っていたと思います。

そんな頃からの変遷です。

CoffeeScriptをコンパイルしよう

CoffeeScriptを使うにはJavaScriptにコンパイルする必要があります。
でもそのやり方は様々です。

そんなカオスなコンパイルの数々を紹介します。

まずは簡単ブラウザコンパイルで試してみよう

ブラウザでコンパイル

<script type="text/javascript" src="https://github.com/jashkenas/coffee-script/blob/master/extras/coffee-script.js"></script>
<script type="text/coffeescript">
  class Person
    echo: () -> "hello"

  person = new Person()
  console.log(person.echo())
</script>

うんうん、動くじゃないか。
本番では使わないようにとかあるけど、パフォーマンスも問題ないぞこれ。

RequireCSを使う

簡単なプログラムを組むならブラウザでコンパイルさせる方法が一番楽だけど
今回のシステムではクライアントはすべてJSのみ。
となるとファイル数が多くなるのでnamespaceを使う必要がある。

当時話題になっていたRequireJSを使ってみよう。

app/models/person.coffee

define [], () ->
  class Person
    constructor: (@name, @age) ->
    
    echo: () ->
      "Hello #{@name}"

main.html

<script type="text/coffeescript">
  require ["cs!app/models/person"], (Person) ->
    person = new Person()
    console.log(person.echo)
</script>

Gruntを使う

RequireCSで特に不満はなかった。
だけどたまにエラーでコンパイルできないことがあるんです。
AMDで読み込んでいる関係でコンパイルに時間がかかった場合、タイムアウトでも起きているのでしょう。

どうやら他にもコンパイルする方法があるのでにGrunt.jsを使ってみることにする。

Grunt.coffee

module.exports = (grunt) ->
  grunt.loadNpmTasks("grunt-contrib-coffee")
  grunt.loadNpmTasks("grunt-contrib-watch")

 coffee:
   compile:
     expand: true
     cwd: "src/coffee"
     src: ['**/*.coffee']
     dest: 'dest/coffee'
     ext: '.js'

  watch:
    coffee:
      files: ["src/coffee/**/*.coffee"]
      tasks: ["coffee"]

うむ、悪くない。
でもwatchの挙動がなんかおかしい。
フォルダを増やしたり、消したりするとwatchから外れるぞ・・・。

FileWatcherを使う

WebStormにFileWatcherという機能があるらしいぞ。

FileWatcherの設定

Argumentsに以下を入力
--compile --map $FileName$

Output paths to refreshに以下を入力
$FileNameWithoutExtension$.js:$FileNameWithoutExtension$.map

同じフォルダに出力してファイル数が大変なことになるが
追加も削除もできるしこれでいこう。

というわけで今回のプロジェクトではこいつを採用しました。

Mincerを使う

こいつはAsset PipelineをNodeで実装したライブラリです。
どうせサーバーに乗っけて開発も行うんだから
サーバーとくっついてた方が楽じゃね？ってことで最近触ってます。
requireも行えるので便利といえば便利かと思います。
フォルダの追加削除の動きはちょっと怪しいです。

Mincerを使う

mincer --include assets/javascripts

以下にアクセス
localhost:3000/assets/javascripts/main.coffee または main.js

結局どれ使えばいいの？

今のところの正解はMincerかと思ってます。
が、違うサーバーで開発したいとなった場合にはFileWatcherなのかな？

まだ答えが出てないので投げやりですが、好きなのでいいです。
どれも改良されていきますので、いずれ不満もなくなると思います。

CoffeeScript使うのがめんどくさくない？

めんどくさいです。ものすごくめんどくさいです。
でも誰がめんどくさいのか。
それは最初に規定部分を作るあなただけです。
他のプログラマはあなたが作成した手順書に従って設定をするだけなのです。

ソースコードを保守するのは？
あなたです。
なので文法が気に食わない場合は使わない選択もありです。

あなたじゃないなら保守する人の意見を大切にしてあげてください。

願望

CoffeeScriptかDartかまあなんでもいいんですけど、AltJS系統がブラウザでそのまま食えるようになればいいですけどねー。

SourceMapがサポートされたのもその一歩だと思うので、各ベンダーには頑張って頂きたいところです。