CoffeeScript

daisuke fuchiwaki

about me

me = {
  name: "daisuke fuchiwaki",
  company: "株式会社ナレッジデータベース",
  recent: "4月に東京から京都へ転職、38歳で初一人暮らし",
  ruby: "2年",
  facebook: "daisuke.fuchiwaki"
}

こんな経験ありませんか?

カンマ気づかずに数時間

var MyClass = function(){  };

MyClass.prototype = {
 doFoo : function() {} ,
 doBar : function() {} ,
 doBuz : function() {} 
 doNow : function() {} ,
};

こんな経験ありませんか?

セミコロン気づかずに数時間

var MyClass = function(){  }

MyClass.prototype = {
 doFoo : function() {} ,
 doBar : function() {} ,
 doBuz : function() {} ,
 doNow : function() {}
}

CoffeeScript

CoffeeScript?

wikipedia

CoffeeScript はプログラミング言語のひとつである。コードはJavaScript のコードに変換される。
Ruby や Python、Haskell から影響を受けたシンタックスシュガーの導入により、JavaScript に比べ簡潔さと可読性を向上させたほか、配列内包 (Array comprehensions) やパターンマッチといった機能を追加している。
CoffeeScript により、パフォーマンスを下げることなく、より短いコードでプログラムを記述することができる (JavaScript に比べ 1/3 程度の行数が削減できる)。

CoffeeScript?

こう書きます

Agenda

Js2Coffee

Example

Account = function(customer, cart) {
  var _this = this;
  this.customer = customer;
  this.cart;
  this.values = {
    foo: "foo",
    bar: "bar",
    buz: "buz"      
  };
  return $('.shopping_cart').bind('click', function(event) {
    return _this.customer.purchase(_this.cart);
  });
};

Js2Coffee

セミコロン を削除

Account = function(customer, cart) {
  var _this = this
  this.customer = customer
  this.cart
  this.values = {
    foo: "foo",
    bar: "bar",
    buz: "buz"      
  }
  return $('.shopping_cart').bind('click', function(event) {
    return _this.customer.purchase(_this.cart)
  })
}

Js2Coffee

インデントでブロックを表現し、括弧 ( ) { } を削除

Account = function(customer, cart) 
  var _this = this
  this.customer = customer
  this.cart
  this.values = 
    foo: "foo",
    bar: "bar",
    buz: "buz"      

  return $('.shopping_cart').bind 'click', function(event)
    return _this.customer.purchase _this.cart

Js2Coffee

return を削除

Account = function(customer, cart) 
  var _this = this
  this.customer = customer
  this.cart
  this.values = 
    foo: "foo",
    bar: "bar",
    buz: "buz"      

  $('.shopping_cart').bind 'click', function(event)
    _this.customer.purchase _this.cart

Js2Coffee

カンマ を削除

Account = function(customer, cart) 
  var _this = this
  this.customer = customer
  this.cart
  this.values = 
    foo: "foo"
    bar: "bar"
    buz: "buz"      

  $('.shopping_cart').bind 'click', function(event)
    _this.customer.purchase _this.cart

Js2Coffee

function を ->, =>に変更

Account = (customer, cart) ->
  var _this = this
  this.customer = customer
  this.cart
  this.values = 
    foo: "foo"
    bar: "bar"
    buz: "buz"      

  $('.shopping_cart').bind 'click', (event) =>
    _this.customer.purchase _this.cart

Js2Coffee

var を削除

Account =(customer, cart) ->
  this.customer = customer
  this.cart
  this.values = 
    foo: "foo"
    bar: "bar"
    buz: "buz"      

  $('.shopping_cart').bind 'click', (event) =>
    _this.customer.purchase _this.cart

Js2Coffee

this を @ に変更

Account = (customer, cart) ->
  @customer = customer
  @cart
  @values = 
    foo: "foo"
    bar: "bar"
    buz: "buz"      
  $('.shopping_cart').bind 'click', (event) =>
    @customer.purchase @cart

Js2Coffee

これが

Account = function(customer, cart) {
  var _this = this;
  this.customer = customer;
  this.cart;
  this.values = {
    foo: "foo",
    bar: "bar",
    buz: "buz"      
  };
  return $('.shopping_cart').bind('click', function(event) {
    return _this.customer.purchase(_this.cart);
  });
};

Js2Coffee

これに

Account = (customer, cart) ->
  @customer = customer
  @cart
  @values = 
    foo: "foo"
    bar: "bar"
    buz: "buz"      
  $('.shopping_cart').bind 'click', (event) =>
    @customer.purchase @cart

Js2Coffee

比較演算子

        // js                  # coffee      
        ===              |     is
        !==              |     isnt
        !                |     not
        &&               |     and
        ||               |     or
        true             |     true, yes, on
        false            |     false, no, off

Js2Coffee

削除

変更

DEMO

Js2Coffee

Js2coffee

メンドイ場合はこれでOK

Enhancements

Enhancements (each)

ループが読みやすく完結に

# coffee
myFunction(item) for item in array
// js
for (var i=0; i < array.length; i++)
  myFunction(array[i]);

array.forEach(function(item, i){
  myFunction(item)
});

Enhancements (map)

mapもいける

# coffee
result = (item.name for item in array)
// js
for (var i=0; i < array.length; i++)
  result.push(array[i].name)

var result = array.map(function(item, i){
  return item.name;
});

Enhancements (select)

select もこんな感じに

# coffee
result = (item for item in array when item.name is "test")
// js
var result = []
for (var i=0; i < array.length; i++)
  if (array[i].name == "test")
    result.push(array[i])

Enhancements (比較演算子)

比較演算子

        // js                  # coffee      
        ===              |     is
        !==              |     isnt
        !                |     not
        &&               |     and
        ||               |     or
        true             |     true, yes, on
        false            |     false, no, off

Enhancements (比較演算子)

曖昧な比較演算子

// js
""           ==   "0"           // false
0            ==   ""            // true
0            ==   "0"           // true
false        ==   "false"       // false
false        ==   "0"           // true
false        ==   undefined     // false
false        ==   null          // false
null         ==   undefined     // true
" \t\r\n"    ==   0             // true

Enhancements (その他)

nilガードぽい事も

hash or= {} # false、0、""、null
hash ?= {}  # undefined、null

#{式}も使える

kyotorb = "今でしょ!"
alert ("いつやるか?! #{kyotorb}") 

まとめ

・シンプルに書ける
・一貫性を保つ
・便利な拡張がたくさん
・Javascriptの罠を回避 

DHH

2011/04/14 - 6:44

Real Men Write JavaScript Directly. I recall that being said about the JavaScript frameworks when they emerged. #argumentrecyclebin

https://twitter.com/dhh/status/58284482976944128

ありがとうございました!