What's CoffeeScript ?

いきなり説明を省いて熱くなっていましたが、CoffeeScript は JavaScript をより簡単に
書くことができつつ、最適な形で JavaScript を出力してくれるものです。
まるで午後のひとときのCoffee break を楽しむかのごとく JavaScript をかけてしまう、
CoffeeScript ちゃんマジ Coffeeです。

見ためとしては Ruby,Python に近く、そのあたりの言語をいじってる人は馴染みやすいでしょうし、
逆に CoffeeScript をいじっていることで、そういった言語にも慣れやすいのではないかと思います。

出力されるものが JavaScript ですので、ある程度そのテクニックが必要だとは思いますが
ストレスなく JavaScript がかけるのは素晴らしいと思います。

で、具体的にどういうもので、どういう事ができるの?
ということをだらだら書こうと思ったのですが
僕なんかが文を書くよりはずっとうまくまとまっているものが既に沢山ありますので、
基礎文法などはそちらを参考にしていただいたほうが話が早いと思います。

僕が勉強する時に、以下のサイトを参考にさせていただきました。

今日から始めるCoffeeScript
ちっちゃいCoffeeScriptの本
CoffeeScript基礎文法最速マスター | 株式会社インフィニットループ技術ブログ

LiveReload でさらに便利

CoffeeScript の --watch オプションをつけておくと .coffee ファイルが変更された際
自動的に実行されるのですが極力コマンドラインは使いたくないという方のために紹介したいのが
LiveReload というツール。

これで黒い画面に抵抗がある人でも、あまり開くことなく CoffeeScript にはげめるかと思います。
コンパイルオプションを通したり、アウトプット先を変える設定などもちゃんとあるのでその辺は安心です。
また、これまたはやりの less や SCSS など似たような簡単に書いて展開してくれる系のものにも対応しているので
プロジェクトにあわせて利用してみると良いと思います。

CoffeeScript の使用例

使用例という程でもないですが、ここ最近習作として書いたものをしょっちゅう gist に貼りつけています。
その中からいくつか適当に。

パララックスっぽいのを Easing 関数使って動き制御

setTimeout をひとまとめに処理する

スクロールバーとマウスホイールを事業仕分け

などなど… CoffeeScript 的なテクニックの話は先ほど挙げた「ちっちゃい CoffeeScript の本」や、
以下の記事にいい感じに暗黒っぽいことが書いてあります。

CoffeeScriptを知らない友人にCoffeeScriptを紹介する10のワンライナーテクニック - mizchi log

また、これらの gist は僕の Facebook ページにしょっちゅう投稿してますので、気になる方はいいねしてもらえればと思います。

CoffeeScript JP !

Facebook 上に意外と CoffeeScript のコミュニティがなかったので CoffeeScript JP が立ち上がったりしました。

CoffeeScript JP

恐れ多くも僕も管理人のひとり、として名前を連ねさせていただいております。
CoffeeScript に関する話題が積極的に交わされたらいいなぁと思っています。

また下北沢オープンソースカフェで、 Smooth CoffeeScript という海外書籍の翻訳会をやったり勉強会が開かれていますので
興味のある方は是非足を運んで Coffee 飲みながら CoffeeScript に興じてみてはどうでしょうか。

まとめ 凄くどうでもいいんですが写真に写ってるグラスは僕のお気に入りで bodum というメーカーの物を東京に出てきてからずっと愛用しております。
ホロウ構造になっていて水滴が付きづらい優れものです。
デザイン的にも素敵ですしこれで焼酎とか飲むとうまいです。