CoffeeScript
jQuery
Laravel

CoffeeScriptでjQueryを使う時「あれ、どう書くの?」パターン

More than 3 years have passed since last update.

仕事でlaravelを使うことになり、

それならばとJavascriptについても基本のElixirでサポートしているCoffeeScriptで記述することになりました。

その際CoffeeScriptからjQueryを使用する際記述方法に躓いた箇所がいくつかあったので、参考にまとめておきます :relaxed:

(随時増やすかも)


on()メソッド

「CoffeeScript jQuery」などでググると、たいていサンプルとして出てくるのは$(element).click()の書き方です。

しかし、最近のjQueryではイベントのバインドについてはon()メソッドの使用を勧められていますので、こちらの書き方を使いましょう。


普通のjQuery

// example-a

$('#hoge').on('click', function() {
something();
});

// example-b
$('#hoge').on('click', function(ev) {
ev.preventDefault();
something();
});

// example-c
$(document).on('click', '.fuga', function() {
something(this);
});



Coffee

# example-a

$('#hoge').on 'click', ->
something()

# example-b
$('#hoge').on 'click', (ev) ->
ev.preventDefault()
something()

# example-c
$(document).on 'click', '.fuga', ->
something @



animateメソッド


普通のjQuery

// ありがちなアニメーション

$('.hoge').animate({ width: '100px'}, 'fast');

// ページトップへスクロールする奴
$('body, html').animate({ scrollTop: 0}, 'slow');



Coffee

# ありがちなアニメーション

$('.hoge').animate { width: '100px' }, 'fast'

# ページトップへスクロールするよ
$('body, html').animate { scrollTop: 0 }, 'slow'



メソッドチェーンや、CSSプロパティ指定


Coffee

$ 'fuga'

.addClass 'active'
.css
'top': '20px'
'left': '300px'
'width': '320px'
'height': '120px'
.html '適当なhtml'

他に何かしら思いついたら、追加していくかもしれません。