CoffeeScript入門メモ

ドットインストールの CoffeeScript 入門より  
http://dotinstall.com/lessons/basic_coffeescript


## CoffeeScript とは？
* JavaScript に変換可能な言語
* JavaScript に比べて…
	* 使いやすい
	* 書きやすい
	* 高機能
	* 最近人気
* hello.coffee -> hello.js といった感じでコンパイル


## 基本
* 行末までのコメントには `#` を使う
* 複数行のコメントは `###` で挟む
* varは不要
* 行末のセミコロンは不要
* ブロックはインデントで表現
* 丸括弧は曖昧性がない場合は省略可能

CoffeeScript:
	
	message = "Hello, world!"
	
	if message.length > 1
		alert message

JavaScript:

	var message;
	
	message = "Hello, world!";
	
	if (message.length > 1) alert(message);


## 文字列
* ダブルクオーテーション `"` で囲む
* 複数行文字列もOK
* ヒアドキュメントは `"""` で囲む

CoffeeScript:
	
	s = "Hello, world!"
	
	s = "Hello, 
	world!"
	
	s = """Hello,
	world!"""

JavaScript:

	var s;

	s = "Hello, world!";

	s = "Hello, world!";

	s = "Hello,\nworld!";

`#{var}` のように書くことで文字列中の変数展開ができる.

CoffeeScript:
	
	name = "questbeat"
	
	alert "Hello, #{name}!"

JavaScript:

	var name;

	name = "questbeat";

	alert("Hello, " + name + "!");


## 配列
CoffeeScript ではカンマではなく改行で区切ることができる.

CoffeeScript:

	m = [
		1, 5, 8
		2, 4, 2
	]

JavaScript:

	var m;

	m = [
		1, 5, 8,
		2, 4, 2,
	];

`[a..b]` のように書くと, 範囲 `a` から `b` の配列を作成できる.  
 また, `[a…b]` のように書くと `b` を含まなくなる.

CoffeeScript:

	m = [1..5]
	
	m = [1...5]

JavaScript:

	var m;

	m = [1, 2, 3, 4, 5];

	m = [1, 2, 3, 4];


## 連想配列
ブロック(波括弧)がインデントで表現できるので, 複雑な連想配列が簡単に書ける.

CoffeeScript:

	h =
		"questbeat":
			"sales": 200
			"cost": 80
		"kuebi":
			"sales": 250
			"cost": 40
			
JavaScript:

	var h;

	h = {
		"questbeat": {
			"sales": 200,
			"cost": 80
		},
		"kuebi": {
			"sales": 250,
			"cost": 40
		}
	};


## 条件分岐

### if
インデントでスッキリ書ける.

CoffeeScript:

	signal = "red"
	
	if signal == "red"
		alert "Stop!"
	else if signal == "green"
		alert "Go!"
	else
		alert "Caution!"

JavaScript:

	var signal;

	signal = "red";

	if (signal === "red") {
		alert("Stop!");
	} else if (signal === "green") {
		alert("Go!");
	} else {
		alert("Caution!");
	}

後置の `if` も可能.

CoffeeScript:

	x = 20
	
	alert "OK!" if x is 20

JavaScript:
	
	var x;

	x = 20;

	if (x === 20) {
		alert("OK!");
	}	

また, 比較演算子がいくつか追加されている.

* is (===)
* isnt (!==)
* not (!)
* and (&&)
* or (||)
* ? (存在チェック)

連結比較式も書ける.

CoffeeScript:
	
	x = 20
	
	if 10 < x < 30
		alert "OK!"

JavaScript:

	var x;

	x = 20;

	if ((10 < x && x < 30)) {
		alert("OK!");
	}


### switch
`case` ではなく `when`, `default` ではなく `else`.

CoffeeScript:

	signal = "red"
	
	switch signal
		when "red"
			alert "Stop!"
		when "green"
			alert "Go!"
		else
			alert "Caution!"
			
JavaScript:

	var signal;

	signal = "red";

	switch (signal) {
		case "red":
			alert("Stop!");
			break;
		case "green":
			alert("Go!");
			break;
		default:
 			alert("Caution!");
	}
	
	
## ループ

### for
CoffeeScript:
	
	for i in [0..3]
		alert i

JavaScript:

	var i, _i;

	for (i = _i = 0; _i <= 3; i = ++_i) {
		alert(i);
	}

### 配列のループ
`for-in` を使って列挙. 要素のインデックスも取得できる.

CoffeeScript:
	
	names = ["questbeat", "kuebi", "qb"]
	
	for name, index in names
		alert "Hello, #{name} (#{index})!"

JavaScript:

	var index, name, names, _i, _len;

	names = ["questbeat", "kuebi", "qb"];

	for (index = _i = 0, _len = names.length; _i < _len; index = ++_i) {
		name = names[index];
		alert("Hello, " + name + " (" + index + ")!");	}

### 連想配列のループ
`for-of` を使う. キーと値を取り出せる.

CoffeeScript:
	
	sales =
		"questbeat": 100
		"kuebi": 200
		"qb": 300
	
	for key, value of sales
		alert "#{key}: #{value}"

JavaScript:

	var key, sales, value;

	sales = {
		"questbeat": 100,
		"kuebi": 200,
		"qb": 300
	};

	for (key in sales) {
		value = sales[key];
		alert("" + key + ": " + value);
	}


## 関数

### 基本形
関数には `->` を使う.

CoffeeScript:

	hello = ->
		alert "Hello!"

JavaScript:

	function hello() {
		alert("Hello!");
	};

### 引数
引数アリの関数は `(args, …) ->` と書く.

CoffeeScript:

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

JavaScript:

	var hello;
	
	hello = function(name) {
		return alert("Hello, " + name + "!");
	};
	
	hello("questbeat");

### 引数のデフォルト値
`label = default` のように書く.

CoffeeScript:

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

JavaScript:

	var hello;
	
	hello = function(name) {
		if (name == null) name = "questbeat";
		return alert("Hello, " + name + "!");
	};
	
	hello());
	
### 返り値のある関数
明示的に `return` する必要はなく, 最後に計算された値が自動的に返り値になる.

CoffeeScript:

	sum = (a, b) ->
		a + b
		
JavaScript:

	var sum;
	
	sum = function(a, b) {
		return a + b;
	};
	

## CoffeeScript の導入
* Web上で試せるインタラクティブツール  
  http://coffeescript.org/
  
* node.jsの管理をhomebrewからnodebrewに変えて, npmをインストール  
  http://qiita.com/somtd@github/items/bd413e89d2db22ab795e
  
* 正しいcoffee-scriptの環境づくり vim  
  http://qiita.com/alpaca_taichou/items/fb442cfa78f91634cfaa