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