jQueryCoffeeScriptでjQuery使おうと思ったらいろいろと戸惑ってしまったのでメモです。LinkCoffeeScriptの基本的なことは「JavaScriptをシンプルに書けるCoffeeScript使ってみた」をご覧ください。CoffeeScriptでjQuery使えるようにするJSでjQueryのコードを書き始めるとき「$(document).ready」を省略した形で下記のように書くことが多いと思います。jQueryスクリプト});これをCoffeeScriptにするとこうなります。jQueryスクリプトこれでjQueryがいつものように使用できますので、あとはさくさく書けると思います。試しに「p」のテキストカラーを赤にしてみます。'red')ほとんど変わりませんね。移行のコードは「jQueryスクリプト」という部分に記述するものとします。クリックイベントある要素をクリックしたときほにゃららというのはよく使用しますね。{console.log('クリック');});CoffeeScriptでは「function」は「->」になるので下記のようになります。'クリック'これでも問題ないとは思うのですが「$(‘#btn’).click」の部分が「return」されて気持ちわるい場合は最後に「@」を入れるといいかもです。'クリック'@ちなみに「@」は「this」に変換されます。マウスオーバー&アウトマウスオーバーすると半透明になり、マウスアウトすると戻るという簡単なスクリプトです。'1'むしろ「animate」のプロパティには「()」とか「{}」で囲んだ方がわかりやすいよねといった場合には囲んでも問題ないです。イベント引数イベントを開始した要素を取得したいときは引数を入れますよね。(e)」かと思いますが逆です。e.targetliveでイベント定義JSのDOM操作で追加された要素にはliveなどでイベント定義します。offでイベント定義イベントの定義は「live」の他に「bind」とか「delegate」とかあったりしますが、jQuery1.7からは「on」「off」で統一しましょうということになっているらしいです。'クリック'イベントハンドラ内のthisを変更するイベントハンドラ内のthisはイベントが起った要素になるため、外側のスコープのthisを参照するため下記のようにあらかじめ「_this」などの変数に入れておく場合があります。@一見今までと何が違うのか気づきにくいですが「->」が「=>」になっています。クラスを使う最後にざっくりですがクラスを使用した例です。$(@)以上、最初はCoffeeScript使わない予定でしたが、それほど覚えることも多くないし、結構スマートに書けるのでやっぱり良い感じな気がしてきました。REPLYNAMEE-MAILURLコードを書く場合は<pre>で囲んでください。WixこのブログではjQueryやWordPressを中心としたWeb制作関係のことを書いております。ご意見ご感想などお気軽にコンタクトフォームよりお問い合わせください。Web関係のお仕事も募集しております。