223 Software

Rails勉強会@東京第63回のあまりのCoffeeScript人気に便乗して。

インストール

CoffeeScriptを動かす、あるいはJavaScriptにコンパイルする方法も色々あるようですが、Node入れてやるのがいいと思うのでその方法で。
Node使う予定の無い人も、きっとそのうち一度はExpressやらSocket.ioやら使うときが来ます。

まずはNode(Node.js)を入れます。MacでHomebrewな人はおめでとうございます。簡単です。

$ brew install node

rubyでいうrvmみたいなものもあるのですが、僕はbrewで十分だと思っています。

引き続き、Node用のライブラリを管理するnpmを入れます。rubyでいうRubyGemsのようなものです。

$ curl http://npmjs.org/install.sh | sh

多分/usr/local/bin/以下にnpmが入ります。そのままcoffee-scriptを入れます。

$ npm install -g coffee-script

オプションの-gをお忘れなく。npmは、デフォルトではカレントディレクトリ以下にnode_modules/というディレクトリを作って、その中にライブラリを入れます。
今回はカレントではなくglobalにインストールするので、-gを付けます。これで/usr/local/bin/coffeeが入ったことと思います。

Hello World

hello_world.coffeeというファイル名で以下のようなスクリプトを作ってください。

console.log 'Hello, world'

jsにコンパイルし、nodeで動かしてみます。

$ coffee -c hello_world.coffee
$ node hello_world.js    # => Hello, world!

また、jsにコンパイルせずに直接動かすこともできます。

$ coffee hello_world.coffee    # => Hello, world!

.coffeeを更新したら自動的にjsにコンパイルする方法

その1 coffeeコマンドの-wオプションを使う。

$ coffee -wc hello_world.coffee  # これでファイルを監視開始

その2 watchrを使う。

参考：Haml+SCSS+CoffeeScriptでモダンな静的ページ制作を

その3 shadow.vimを使う。

参考：Vim-users.jp - Hack #192: 任意の言語で任意のマクロを使う

効率よくCoffeeScriptを勉強する方法

公式サイトを写経するといいと思います。
JavaScriptと違う書き方やキーワードも多くて、なかなか覚えられないですが一度写経してあとはひたすら書くといいのだと思います。

正直なところ、まだCoffeeScriptよりもJavaScriptを直接書く方が楽です。いちいち頭の中にあるjsのコードをCoffeeScriptに翻訳しながら書いている感じです。

CoffeeScript、流行っていますね。

あとはモダンなRubyistならそろそろ静的ページでさえもHTMLやCSSではなくHaml, SCSSで書きたいと思っていることと思います。

実現方法はあまり難しくありません。要はhaml, scss, coffeeファイルを更新したときに自動的にコマンドを実行してhtml, css, jsにコンパイルしてやればいいだけなので、watchrを使ってちゃちゃっとひな形を作ってみました。

なお、ついでにhttp://www.cdnjs.com/を使ってunderscore.jsとbackbone.jsを読み込んでいます。あとGoogle Libraries APIを使用してjQueryも読み込んでいます。

https://github.com/satococoa/modern_html5_lab

watchr？

watchrとは、ファイルの更新を監視し、任意の処理を実行するためのライブラリです。
例えばautotestのようにファイルの修正時に自動的にテストを実行したり、今回のようにソースファイルの更新時に自動的にコンパイルしたり、という用途で使えます。

$ gem install watchr # インストール
$ vim watchr.rb # 監視対象、処理を書く。ファイル名は別になんでもOK。

watchr.rb

watch('src/(.*)\.haml')   {|md| system("haml -f html5 #{md[0]} prod/#{md[1]}.html") }
watch('src/(.*)\.scss')   {|md| system("sass --scss #{md[0]} prod/#{md[1]}.css")    }
watch('src/(.*)\.coffee') {|md| system("coffee -o prod -c #{md[0]}")                }

$ watchr watchr.rb # 監視開始

もちろんhaml, sass, coffee-scriptが入っていないと動きません。

jsdo.it

先日初めて使ったjsdo.itが面白かったので週末にHTML5の練習も兼ねて遊んでみようかなぁと思ったのですが、久しぶりにHTML+CSS+JavaScriptを書いたら（ちなみにこんな気持ち悪いものができてしまった。http://jsdo.it/satococoa/faces）Haml+SCSS+CoffeeScriptのモダンな環境の簡潔さを実感してしまいました。
そのためローカルでHaml+SCSS+CoffeeScriptで書いたものをjsdo.itに貼り付ける方がいいかなぁと思い、こんなものを作ったのでした。

そういう目的なので、コンテンツのディレクトリ分けなどはしていません。