読者です 読者をやめる 読者になる 読者になる

【CoffeeScript】書き方いろいろメモ

最近はRubyよりもCoffeeScript使う時間のほうが長いwaterlowです。
触りつついろんなソースを読みつつしてるうちに書き方がなんとなくわかってきたので書き留めておきます。

極力かっこは省略したい!

理由:インデントで文が解析されるのをフル活用したい。
   ハッシュが非常にすっきりする。
   jQueryセレクタ使ってvalue変更…なんてときにたくさん括弧を書きたくない。

@sample = (id) ->
  $(document).on 'click', id, ->
    $.ajax
      url: @dataset.data
      data:
        prefecture_id: @value
      dataType: 'json'
      success: (data, status, xhr) ->
        $($(elememt).attr "data-data").html("add")

内容は適当ですが、ページで何かがクリックされた時にタグに持たせておいたurlに対してajaxリクエストを送るように、onメソッドで処理を登録しています。
まず、はじめのonメソッドの括弧省略はonメソッドの引数が(イベントハンドラ, セレクタ, 処理)とほぼ固まっているため括弧は省くべきかなと(railsのlink_toで括弧使わないのと同じイメージ?)
次に、ajaxメソッドにはハッシュを引数に渡すのですがメソッド呼び出しの括弧とハッシュの括弧の両方を省略しています。つまりこうも書ける。

$.ajax({
  url: @dataset.data
  data: { prefecture_id: @value }
  # ...
})

でも閉じ括弧のインデント位置を考えないといけなかったり、ハッシュにハッシュを渡すならインデントしたほうが見やすいかなと考えた末括弧を取っ払いました!

括弧の考え方はスタイルガイドによると「"readability" can be subjective」ということなので、一般解がないのが難しいですが…。

とりあえずthisが何かわかっておく

理由:分からないと要素にアクセスするのに周りくどい方法をとってしまうため
先ほどの例で行くと

url: @dataset.data

CoffeeScriptは@でメソッドの呼び出し元(jsでいうthis)にアクセスできるので、コードがスッキリかつthisへのアクセスが目印っぽくなってよいです。success以下の処理はthisが変わってしまうため同じ呼び出し方は出来なかった(気がする)。

data-*属性にはjQueryならdata()でアクセスできる

js全般ですが、先ほどのサンプルの最後の例は以下のようにも書けます。

$($(elememt).data "data").html("add")

短く書けるのでこちらを使ったほうがいい気がしますがHTML5 カスタムデータ属性「data-*」にJavaScript、jQueryからアクセスする方法 | Dress Cordingによると、dataを使うとデータの型変換が行われるとのこと、001などのidを使っいる場合は注意が必要ですね。