CoffeeScript超入門

CoffeeScriptってなんね？

読み方

サイト

CoffeeScriptとは

CoffeeScript はプログラミング言語のひとつである。コードはJavaScript のコードに変換される。
Ruby や Python、Haskell [1] から影響を受けたシンタックスシュガーの導入により、JavaScript に比べ簡潔さと可読性を向上させたほか、配列内包 (Array comprehensions) やパターンマッチといった機能を追加している…

wikipediaより

要するに

• JavaScriptにコンパイルできる小さな言語
• DocumentCloudのJeremy Ashkeans氏によって開発された
• 構文がRubyやPythonに似ている
• コンパイル後はJavaScriptとして動作するため実行速度面ではほぼ変わらない
• ブラウザ用の開発にもサーバサイドの開発にも使える
• Rails3.1以降ではデフォルトの開発言語として採用(自動的にコンパイル)

なぜCoffeeScript？

背景

javascriptが比較的自由な言語なので、運用管理がたいへん。。。
自作機能などの衝突が怖い。。。

長所

大きなところでは

• タイプ数が少ない
• ソースの可読性が高まる
• クラスやクロージャーの作成が簡単

少しだけテクニカルなところだと

• グローバル汚染を防げる
• 細かいタイプミスが減る
• 比較が曖昧でなくなる
• 他にもいろいろ、ええ感じにしてくれる

短所

• コンパイルが必要
• ランタイムエラーの発生箇所がわかりずらい
• そもそもjavascriptの知識がないときつい

実践

代入

varを使わなくてもok

コンパイル前

say = 'hello'

関数呼び出し

コンパイル前

alert 'hello'

分岐

コンパイル前

weather = '晴れ'
if weather is '晴れ'
  alert '晴れだよ'
else
  alert '違うよ'

演算子（and, or, not など）

CoffeeScript	JavaScript
is	===
isnt	!==
not	!
and	&&
or
true, yes, on	true
false, no, off	false
@, this	this
of	in
in	無し

ループ

コンパイル前

for i in [0..3]
    alert i

関数

コンパイル前

hello = ->
    alert "Hello!"

コンパイル前

hello = (name) ->
    alert "Hello, #{name}!"

hello("じげんぶ")

暗黙的なreturn

コンパイル前

$(function() {
  return $('#btn').on('click', function() {
    return console.log('クリック');
  });
});

コンパイル後

$(function() {
  $('#btn').on('click', function() {
    console.log('クリック');
  });
});

明示的にreturnする

コンパイル前

$ ->
  $('#btn').on 'click', ->
    console.log 'クリック'
    return
  return

コンパイル後

$(function() {
  $('#btn').on('click', function() {
    console.log('クリック');
  });
});

jQueryとcoffeescript

DOM生成後にhtmlを操作できるようにするおまじない

コンパイル前

$ ->
  # jQueryスクリプト

コンパイル後

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

pタグのテキストカラーを赤にする

コンパイル前

$ ->
  $('p').css('color', 'red')

コンパイル後

$(function() {
  return $('p').css('color', 'red');
});

@はthisに変換される

コンパイル前

$ ->
  $('#btn').on 'click', ->
    console.log @
    return
  return

コンパイル後

$(function() {
  $('#btn').on('click', function() {
    console.log(this);
  });
});

jqueryオブジェクトを取得したい場合

コンパイル前

$ ->
  $('#btn').on 'click', ->
    console.log $ @
    return
  return

コンパイル後

$(function() {
  $('#btn').on('click', function() {
    console.log($(this));
  });
});