初心者のボクがCoffeeScriptを練習します。ということまずはJavaScriptと比較することかなと思いました。

変数

変数に文字列を代入します。

JavaScript

var val_string = "hoge";
var val_float = 1.23;
var val_boolean = true;

CoffeeScript

val_string = "hoge"
val_float = 1.23
val_boolean = true

セミコロンが消えます。

複数行コメントと1行コメントの書き方

JavaScriptのコメント

/*
 複数行のコメントだよ
*/

// コメントだよもん

CoffeeScriptのコメント

###
 複数行のコメントだよ
###

# コメントだよもん

配列

配列です。

JavaScript

var items = ["aaa", "bbb", "ccc"];

CoffeeScript

items = [
  "aaa"
  "bbb"
  "ccc"
]

改行してカンマが消えるのですかね。

配列の中にハッシュを入れました。

JavaScript

var items = [
  {title: "コーラ",  price: 150},
  {title: "トマトジュース", price: 120},
  {title: "ビール", price: 300}
];

CoffeeScript

items = [
  {
    title: "コーラ"
    price: 150
  }
  {
    title: "トマトジュース"
    price: 120
  }
  {
    title: "ビール"
    price: 300
  }
]

hogeというメソッドでalertを表示します。

JavaScript

function hoge() {
    alert("aaa");
}

CoffeeScript

hoge = ->
  alert "aaa"
  return

hogeメソッドにpiyoという引数をワタシます。

JavaScript

function hoge(piyo) {
    alert("aaa" + piyo);
}

CoffeeScript

hoge = (piyo)->
  alert "huga" + piyo
  return

JavaScript

var huga = function() {
  alert("aaa");
}

CoffeeScript

huga = ->
  alert "aaa"
  return

JavaScriptでみると異なりますが、CoffeeScriptだとhugaと関数を定義した書き方と同じになるのですね。

メソッドはそのまま使うことができます。

JavaScript

setTimeout(console.log(3), 3000);

CoffeeScript

setTimeout console.log(3), 3000

カッコがなくなるだけです。

if文を書くと{}が無くなります。

JavaScript

if (true === true) {
  console.log('true');
} else {
  console.log('false');
}

CoffeeScript

if true == true
  console.log 'true'
else
  console.log 'false'

CoffeeScriptのif文の==と書くとJavaScript側で===になっています。