CoffeeScript導入に必要なこと

CoffeeScript

導入

会社でCoffeeScript試しに使ってみるべ… 的な流れになったので導入の手順を書いておく。

Macの方は

sudo port sync ; sudo port install nodejs npm ; sudo npm install -g coffee-script

で導入出来ます。port にも coffee-script がありますが、あんまりおすすめ出来ません。…なんでだっけ。

今のところこんな感じです。
coffee-script@1.2.0
nodejs@0.6.6
npm@1.0.106

Windows？(ﾟ⊿ﾟ)ｼﾗﾈ

開発環境

IDE

http://www.jetbrains.com/webstorm/ WebStorm3.0 以上を使うことをおすすめします。
別に IntelliJ とかでもいいです。
CoffeeScriptも対応しているので便利です。ですが、まだサイキョーとは言えなくて、困ったことになるパターンも結構あります。
まぁ大概コードフォーマッタ周りなんですけど。

not とかが正しく扱えない

console.log "hoge" if not flag

に対してコードフォーマットをかけると、

console.log "hoge" if notflag

に変換されて意味が変わってしまいます。if の代わりに unless を使うか、not の代わりに ! を使いましょう。

インスタンス変数のインデントが正しく扱えない

class Hoge
  defaults:
    hoge:1
    hige:2

を

class Hoge
  defaults:hoge:1
  hige:2

に変換してくださいます。やめてぇぇ意味変わっちゃう！！Backbone.js との相性が悪いこと甚だしい…。

IDEまとめ
ソース全体に対してコードフォーマットかけると動かなくなったり壊れたりするのでしちゃいけません。
自分の新しく書いた範囲について適宜コードフォーマットかけるみたいなめんどくさい感じが必要です。
あと他にもなんかネストしたメソッド呼び出しの時意味が変わるような変換されることがあって辛かった気がする。
マジで困るのでIssue登録したいんだけどIssue登録までに色々長い道のりがあって心折れた(ITSへのユーザ登録とか

コンパイルするとか

CoffeeScriptは一回コンパイルしてJavaScriptに変換したほうがブラウザでデバッグしやすくなる気がする(CoffeeScriptのままデバッグしようとしたことがない)ので、コンパイルする環境を整えます。
CoffeeScriptでは、Makefile みたいなノリで cakefile というファイルを作ります。

だいたいこんな感じ
監視するディレクトリが増えると記述が増えたりします。本当はcompileは同期処理にしたいんだけどよくわからないので放置中。既に同期処理？
https://gist.github.com/1516033

task に登録されているものが実行出来るので、 cake compile で普通にJSにコンパイル。cake watch でディレクトリ監視して変更があったら随時JSにコンパイル ていう感じ。コード書いてる時はcake watch を走らせながらコードを描きます。
WebStormが実行してくれる機能とかも探せばありそうなんだけど探してないです…。
あと、文法エラーでコケた時に気が付かなくて、
"あれー？これで動くはずなんだけどなー？動かないなー？"←文法エラーでJSが更新されてないのに気がついてない
とか稀にあるので、コケたらGrowlとかで通知してほしいなー…。WebStormが怒ってくれるのでだいぶ減ったけど。

このあたりはもうちょっと頭良いやり方がある気もしている。

コード規約 または 落とし穴

こういうコード規約はあったほうがええんちゃう…と思ったのを書いていくよ！

  • 関数を定義するときは -> ではなくて => を使う

例えば以下のような場合

class Hoge
  value : false
  constructor: ->
    func = ->
      @value = true
    func()
    console.log @value

期待するのは、new Hoge() した時に "true" が出力されることです。ですが、-> を使っているため @value に true をセットしている箇所での this は 無名のfunction 自身です。ここでは => と書かないといけません。

  • >の方が嬉しい場合っていうのは少ないので、class 中で関数を作る時は常に => にしましょうっていうルールにしたほうがいい気がする。

次に、関数の呼び出し方法について

hoge(fuga)
hoge fuga
# ---
hoge fuga piyo
hoge(fuga(piyo))
# ---
hoge fuga, piyo
hoge(fuga, piyo)

それぞれ上下で同じ意味になります。括弧が省略出来るのです。これは好みの問題だと思うのですが、プロジェクト内で統一はされていたほうがいいと思います。今のところ、僕は上側のスタイルにしています。(入力が楽だから)
メソッドチェーンとかの場合は下で書くしかないので下で書くんですけどね！

プロジェクト運用

コンパイル後のjsもコミットしたほうがいいやよ。すぐ試せるのと、Herokuにdeployした時に向こうでコンパイルしてからnode.js立ち上げるのが今のところ出来てなかったりするので。

併せて使いたい

jQuery, Underscore.js あたりは入れておいたほうが！

サンプル

https://github.com/vvakame/google-checkout-archiver
こんなんこさえた