Express アプリケーションを CoffeeScript で書く

実行環境
OS : 10.8.2
node : v0.8.6
express : v3.0.4
coffee-script : 1.4.0

以前の記事で、クライアントサイドの JavaScript を CoffeeScript 化しましたが、今回はサーバサイドの　JavaScript を CoffeeScript で書けるようにします。

CoffeeScript をインストール

CoffeeScript は npm で、-g オプション を付けてインストールします。

$sudo npm install -g coffee-script

これで、コンソールから coffee コマンドが使えるようになります。

$ coffee -v
CoffeeScript version 1.4.0

Express が生成する JavaScript を CoffeeScript に変換する

既存の JavaScriptファイル(以下 jsファイル)を CoffeeScriptファイル(以下 coffeeファイル)に変換するには、js2coffee を使います。

$ npm install -g js2coffee

これで、コンソールから js2coffeeコマンドが使えるのようになるので、Expressが自動生成した jsファイルを、coffeeファイルに変換します。

$ express coffeeTest && cd coffeeTest && npm install

$ js2coffee app.js > app.coffee
$ js2coffee routes/index.js > routes/index.coffee

アプリケーションを起動

後は、app.coffee を　

$ coffee app.coffee

で実行すれば、Expressアプリケーションが起動します。
もちろん、app.coffee 以外のファイルもすべて CoffeeScript で記述できます。

コンパイル済み jsファイルを保存したい場合

上記の方法だと、コンパイル済みの jsファイルはファイルシステムに保存されません。今回は、単純に coffeeファイルと同じ場所に jsファイルを生成してもよいのですが、管理しやすいように、ファイルの配置を工夫してみます。

例えば、 『src ディレクトリに coffee ファイルを、app ディレクトリにコンパイル済み jsファイルを保存する』 場合は、ディレクトリ構成は下記のようになると思います。(app.coffee を移動すると、view と static のパスを書き換える必要があるので注意してください。)

ディレクトリ構成例

coffeeTest/
  |_ app/ <= コンパイル済みの js ファイルはすべてここに生成される
  |
  |_ src/ <= coffeeScript はすべてここに保存する
  |  |_ app.coffee
  |  |_ routes/
  |    |_ index.coffee 
  |
  |_ node_modules/
  |_ public/
  |_ views/
  |_ package.json

src ディレクトリ以下の coffeeファイルを appディレクトリ以下にコンパイルするには、下記コマンドを実行します。 ( -b は関数のラッパーをはずす、-o はコンパイル先ディレクトリを指定するオプションです。)

$ coffee -bco ./app ./src

後は app.js をターゲットにしてアプリケーション起動します。

$ node ./app/app.js

もしくは、アプリケーションのルートに server.js などのファイルを作成し、そこで require('./app/app') してしまっても良いかもしれません。

CoffeeScriptの変更を監視する

coffeeファイルを変更するたびにいちいち coffeeコマンドを実行するのは面倒なので、 coffee コマンドを -w オプションつきで実行して、src ディレクトリに変更があるたびに自動でコンパイルを実行するようにします。

$ coffee -wbco ./app ./src

さらに、このコマンドをCakefileにtask登録しておけば、一発で監視を開始できるのでおすすめです。

Cakefile

spawn = require('child_process').spawn
task 'watch', ->
  watch = spawn('coffee', ['-wbco', './app', './src'])

  watch.stdout.on 'data', (buffer)->
    if(buffer)
      console.log buffer.toString().trim() 

  watch.stderr.on 'data', (buffer)->
    if(buffer)
      console.log buffer.toString().trim() 

実行

$ cake watch

テンプレートモジュールを使う

以上、手動で CoffeeScript の設定を行ってきましたが、 express-coffeeモジュールを使うと、CoffeeScript で記述する前提でExpressアプリケーションのひな形を生成してくれます。testスクリプトもCoffeeScriptでかけるようになっているので、是非チェックしてみてください。