CoffeeScriptとはなんぞや?

More than 5 years have passed since last update.


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行に短くなった