鳩舎

レースしない

CoffeeScript + Sinatra + Sprockets で(ある程度)快適にJSを開発する話

先日、NicoFiveというHTML5ニコニコ動画プレーヤーをリリースしました。

これの開発にあたり利用した要素技術は

の3点です。SinatraとSproketsはあわせて表記してもいいかもしれない。とにかくこの3点でリリースしました。んで今回なんでこんな構成にしたかという話です。

その昔、JavaScriptはmakeするものだった。

詳細はこのスライドを見て欲しいのですが、巨大なJSアプリケーションを記述する際、僕はそれらの結合順序を記述したMakefileを用意してつなげることをやっていました。これは結構最近までかわりなく(Node.jsでファイル監視して自動でmakeが走るくらいの改造はいれた)そこそこ快適だった。

んでも依存関係を別ファイルに書きだすのはあほらしいなーとはずっと思っていました。

Sprockets

SprocketsはRailsのassetsとかをうまいことしてくれるわけですが、requireをCSSとJSに書けるようになります。ついでにCoffeeにも書けるようになります。

んでこれ使えば楽にいけるんじゃねーか!と思ってやってみたということです。ただ、たかがJSを書くのにRailsを使うのはばかばかしいので、SprocketsをSinatraにマウントしています。

実際にNicofiveで使われている処理

  1. Sprocketsがrequireとかを解決してCoffeeをJSに変換する
  2. (productionだと)それをSprocketsがGoogleClosureCompilerに通して小さくする
  3. 結果をRedisにキャッシュして、変更がなければそちらを使う

となっています。楽。

まとめ

便利なのでこのスタイルオススメです!