CoffeeScriptとはなんぞや？

#CoffeeScriptとはなんぞや？

→JavaScriptのコードを生成するためのコンパクトなrubyライクなスクリプト言語
→安全で、高性能なJavaScriptのコードを自動的に作成できる！
→Javascriptと比べて2分の1から3分の1の量で記述可
→自動でコンパイルする手段は幾つもあるので手間は増えない
→jQueyとの組み合わせ可能

※慣れないうちは、本家サイトでの簡易インタプリタで実際にJavaScriptの対応関係を確認しながらコーディングするのがオススメ。
CoffeeScript

###・直感的な演算子

CoffeeScript	Javascript
is	===/==
isnt	!==/!=
not	!
and	&&
or
yes	true
no	false
@	this

※ A is yes → A === true

###・基本的な文法

*.js.coffee

if i is 0
 window.alert'正解'

↓

*.js

if(i===0){
 window.alert('正解');
}

######・ブロックはインデントで表現

######・メソッド等の引数を表すカッコが不要

・; が不要

---

*.js

var name = '森山';
 window.alert("こんにちは"+name+"です");
}

↓

*.js.coffee

name = '森山'
 window.alert"こんにちは！#{name}です"

・変数宣言が不要

---

・ダブルクウォート("")のなかでは#{変数名}の形式で呼び出せる！

---

*.js

if(name != 'undifined' && name != null){
 window.alert("こんにちは"+name+"です");
}

↓

*.js.coffee

 window.alert"こんにちは！#{name}です" if name?

・便利な ？演算子の使用が可能に！

---

・倒置法での記述も可能

---

*.js

var name;
introduction = function(name){
   if(name==null){name == "名無し"}
   alert("こんにちは"+name+"です！");
}

introduction('森山');

↓

*.js.coffee

introduction = (name='森山') ->
   alert "こんにちは#{name}です！"

introduction '森山'

・関数は基本 (引数) ->式で記述

---

・デフォルト値も設定可能

---

###CoffeeScriptでjQuery使う

*.js

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

↓

*.js.coffee

  $ ->
      //jQueryスクリプト

######クリックイベントを使う

*.js

  $('#btn').click(function(){
     alert ("こんにちは");    
   });

↓

*.js.coffee

  $('#btn').click ->
     alert "こんにちは#{name}です！"

######イベントの引数の設定

*.js

  $('#btn').click(function(e) {
     e.preventDefault();
     alert ("こんにちは");
   });

↓

*.js.coffee

  $('#btn').click (e) ->
     alert "こんにちは"

######liveの使い方

*.js

  $('#btn').live('click',(function(e) {
     e.preventDefault();
     alert ("こんにちは");
   });

↓

*.js.coffee

  $('#btn').live 'click', (e) ->
     e.preventDefault()     
     alert "こんにちは"

######thisの使い方

*.js

  $('#btn').click(function(e) {
     e.preventDefault();
     alert ($(this));
   });

↓

*.js.coffee

  $('#btn').live 'click', (e) ->
     e.preventDefault();
      alert @

###使ってみての感想

■思っていたより簡単だった
→1日ぐらいあればキャッチアップ可能
■少し読みづらい点がある...がその分短くなったのでトレードオフかな...と思っている。
■ちなみにjavascriptファイルを書き換えた所449行が360行に短くなった