CoffeeScriptの基本的なことは「JavaScriptをシンプルに書けるCoffeeScript使ってみた」をご覧ください。

とりあえずCoffeeScriptでjQuery使えるようにする

JSでjQueryのコードを書き始めるとき「$(document).ready」を省略した形で下記のように書くことが多いと思います。

JavaScript

	$(function() {
		// jQueryスクリプト
	});
	

これをCoffeeScriptにするとこうなります。

CoffeeScript

	$ ->
		# jQueryスクリプト
	

これでjQueryがいつものように使用できますので、あとはさくさく書けると思います。
試しに「p」のテキストカラーを赤にしてみます。

CoffeeScript

	$ ->
		$('p').css('color', 'red')
	

ほとんど変わりませんね。
移行のコードは「jQueryスクリプト」という部分に記述するものとします。

クリックイベント

ある要素をクリックしたときほにゃららというのはよく使用しますね。

JavaScript

	$('#btn').click(function() {
		console.log('クリック');
	});
	

CoffeeScriptでは「function」は「->」になるので下記のようになります。

CoffeeScript

	$('#btn').click ->
		console.log 'クリック'
	

これでも問題ないとは思うのですが「$(‘#btn’).click」の部分が「return」されて気持ちわるい場合は最後に「@」を入れるといいかもです。

CoffeeScript

	$('#btn').click ->
		console.log 'クリック'
	@
	

ちなみに「@」は「this」に変換されます。

マウスオーバー＆アウト

マウスオーバーすると半透明になり、マウスアウトすると戻るという簡単なスクリプトです。

JavaScript

	$('#btn').hover(function() {
		$(this).stop().animate({'opacity': '0.5'});
	}, function() {
		$(this).stop().animate({'opacity': '1'});
	});
	

CoffeeScript

	$('#btn').hover ->
		$(@).stop().animate 'opacity' : '0.5'
	,->
		$(@).stop().animate 'opacity' : '1'
	

むしろ「animate」のプロパティには「()」とか「{}」で囲んだ方がわかりやすいよねといった場合には囲んでも問題ないです。

イベント引数

イベントを開始した要素を取得したいときは引数を入れますよね。

JavaScript

	$('#btn').click(function(e) {
		console.log(e.target);
	});
	

「->」がfunctionなので「-> (e)」かと思いますが逆です。

CoffeeScript

	$('#btn').click (e) ->
		console.log e.target
	

liveでイベント定義

JSのDOM操作で追加された要素にはliveなどでイベント定義します。

JavaScript

	$('#btn').live('click', function() {
		console.log('クリック');
	});
	

CoffeeScript

	$('#btn').live 'click', ->
		console.log 'hogehoge'
	

on / offでイベント定義

イベントの定義は「live」の他に「bind」とか「delegate」とかあったりしますが、jQuery1.7からは「on」「off」で統一しましょうということになっているらしいです。

CoffeeScript

	$(document).on 'click', '#btn', ->
		console.log 'クリック'
	

イベントハンドラ内のthisを変更する

イベントハンドラ内のthisはイベントが起った要素になるため、外側のスコープのthisを参照するため下記のようにあらかじめ「_this」などの変数に入れておく場合があります。

JavaScript

	var _this = this;
	$('#btn').click(function() {
		console.log(_this);
	});
	

CoffeeScript

	$('#btn').click => 
		console.log @
	

一見今までと何が違うのか気づきにくいですが「->」が「=>」になっています。

クラスを使う

最後にざっくりですがクラスを使用した例です。

CoffeeScript

	class Hoge
		constructor: ($ele) ->
			console.log $ele
	$ ->
		$('.fuga').each ->
			new Hoge $(@)
	

以上、最初はCoffeeScript使わない予定でしたが、それほど覚えることも多くないし、結構スマートに書けるのでやっぱり良い感じな気がしてきました。