CoffeeScriptとはなんぞや?

  • 61
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

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