SlideShare a Scribd company logo
CoffeeScriptってなんぞ?
      kanazawa.js v1.7
水野隼登
Webデザイナー
株式会社DMM.comラボ
twitter: @pocotan001
CoffeeScript?
CoffeeScriptはJavaScriptです。




                CoffeeScript?
CoffeeScriptはJavaScriptです。

  alert "Hello"         .coffee




                  CoffeeScript?
CoffeeScriptはJavaScriptです。

  alert "Hello"         .coffee



 alert("Hello");        .js

                  CoffeeScript?
CoffeeScriptは小さな言語です。




            CoffeeScript?
CoffeeScriptは小さな言語です。


             全60ページ




            CoffeeScript?
CoffeeScriptってなんぞ?
CoffeeScriptってなんぞ?
アジェンダ
・ Less code!
  - 少ないコード
・ Enhancements!
  - 機能の強化

                  CoffeeScript?
Less code!
うわ、私の
JavaScript
  1/3...?
Example 1
$(function() {
  $("body").html("Hello");
});




                   Less code!
; 要らない。
$(function() {
     $("body").html("Hello")
})




                      Less code!
; () 要らない。
$ function() {
    $("body").html "Hello"
}




                     Less code!
; () {} 要らない。
$ function()
  $("body").html "Hello"




                   Less code!
インデントでブロックを表現
$ function()
  $("body").html "Hello"




                   Less code!
function() は ->
$ ->
   $("body").html "Hello"




                    Less code!
Example 2
$("div").click(function(event) {
  $(this).css({
      color: "red",
      fontSize: "14px"
  });
});


                         Less code!
; () {} 要らない。
$("div").click function(event)
  $(this).css
    color: "red",
    fontSize: "14px"




                         Less code!
; () {} , 要らない。
$("div").click function(event)
  $(this).css
    color: "red"
    fontSize: "14px"




                         Less code!
インデントでブロックを表現
$("div").click function(event)
  $(this).css
    color: "red"
    fontSize: "14px"




                         Less code!
function(args) は (args) ->
$("div").click (event) ->
  $(this).css
    color: "red"
    fontSize: "14px"




                            Less code!
this は @
$("div").click (event) ->
  $(@).css
    color: "red"
    fontSize: "14px"




                            Less code!
Enhancements!
変数に var要らない。
version = 1.7




                Enhancements!
グローバル変数は明示的に。
version = 1.7
window.title = "kanazawa.js"




                 Enhancements!
""の中では #{式} が使える。
version = 1.7
window.title = "kanazawa.js
#{version}"




                 Enhancements!
こんな書き方もok
version = 1.7
window.title = "kanazawa.js
#{version + 1}"




                  Enhancements!
あいまいな == と != は使えない。
# 1 === true
1 == true




               Enhancements!
=== は isとも書ける。
# 1 === true
1 is true




               Enhancements!
JavaScript   CoffeeScript
===           is




                   Enhancements!
JavaScript   CoffeeScript
===              is
!==              isnt
!                not
&&               and
||               or
true             true, yes, on
false            false, no, off


                      Enhancements!
すべての文が...
if 1 is true
  "○"
else
  "×"



               Enhancements!
式として扱える。
result = if 1 is true
  "○"
else
  "×"



                 Enhancements!
基本的に最後の値が返る。
result = if 1 is true
  "○"
else
  "×"
  "no!"

                 Enhancements!
関数においても同じ。
sum = (x, y) ->
  ...
  x + y




                  Enhancements!
関数は return 書いてもok
sum = (x, y) ->
  ...
  return x + y




                  Enhancements!
まとめ
短く書ける
 役に立つ機能
コードが一貫性を持つ
短く書ける
 役に立つ機能
コードが一貫性を持つ
短く書ける
 役に立つ機能
コードが一貫性を持つ
"CoffeeScriptはJavaScriptをスタンダード
なデザインパターンで書くための省略形
の集合だ。"
                     Reg Braithwaite
Thank you

More Related Content

CoffeeScriptってなんぞ?