はじめてのCoffeeScriptに続いて
CoffeeScriptの文法を読みながらCoffeeScriptの勉強
コメントアウトコメントアウトは# 複数行コメントは###で包む
#コメント1
###
コメント2
###
これをコンパイルすると以下のようなコードが書きだされる。コメントアウトは出力されないが複数行コメントアウトは出力される。ライセンス以外はコンパイル後にコメント書き出さないイメージかな。
// Generated by CoffeeScript 1.6.3
/*
コメント2
*/
(function() {
}).call(this);
変数myVariable = "test"
以下のように書きだされる。基本無名空間で包まれてvar なんかも自動で付けてくれる。
// Generated by CoffeeScript 1.6.3
(function() {
var myVariable;
myVariable = "test";
}).call(this);
グローバル変数スコープをグローバルに出したい場合は以下のようにグローバルオブジェクトのプロパティとして定義する。
exports = this
exports.MyVariable = "foo-bar"
コンパイル後はグローバルに入れていくれる。
// Generated by CoffeeScript 1.6.3
(function() {
var exports;
exports = this;
exports.MyVariable = "foo-bar";
}).call(this);
関数関数は次のように定義
func = -> "bar"
関数名 = -> 返り値みたいな感じ
// Generated by CoffeeScript 1.6.3
(function() {
var func;
func = function() {
return "bar";
};
}).call(this);
関数の引数は次のように定義
times = (a, b) -> a * b
引数aとbが利用できる
// Generated by CoffeeScript 1.6.3
(function() {
var times;
times = function(a, b) {
return a * b;
};
}).call(this);
引数のデフォルト値を指定できる。
times = (a = 1, b = 2) -> a * b
手動で書くとめんどくさいけどCoffeeなら簡単
// Generated by CoffeeScript 1.6.3
(function() {
var times;
times = function(a, b) {
if (a == null) {
a = 1;
}
if (b == null) {
b = 2;
}
return a * b;
};
}).call(this);
可変長引数にも対応
sum = (nums...) ->
result = 0
nums.forEach (n) -> result += n
result
コンパイル後のスクリプトは以下のような感じ。可変長引数は
argumentsオブジェクトではなく配列に変換されているので
forEachといった簡単に利用できる
// Generated by CoffeeScript 1.6.3
(function() {
var sum,
__slice = [].slice;
sum = function() {
var nums, result;
nums = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
result = 0;
nums.forEach(function(n) {
return result += n;
});
return result;
};
}).call(this);
関数の実行は直接実行出来る
func = ->
alert("ok")
false
func()
// Generated by CoffeeScript 1.6.3
(function() {
var func;
func = function() {
alert("ok");
return false;
};
func();
}).call(this);
引数がある場合は以下のようにも実行出来る
func = (a)->
alert(a)
false
func "hoge"
// Generated by CoffeeScript 1.6.3
(function() {
var func;
func = function(a) {
alert(a);
return false;
};
func("hoge");
}).call(this);
2個以上の引数がある場合は,カンマ区切りで実行出来る
func = (a,b)->
alert(b)
false
func "hoge","fuga"
// Generated by CoffeeScript 1.6.3
(function() {
var func;
func = function(a, b) {
alert(b);
return false;
};
func("hoge", "fuga");
}).call(this);
スコープの生成スコープの管理も簡単にできる
this.clickHandler = -> alert "clicked"
element.addEventListener "click", (e) => this.clickHandler(e)
このように指定をするとthisの値を継承して利用できるようにコンパイルされる
// Generated by CoffeeScript 1.6.3
(function() {
var _this = this;
this.clickHandler = function() {
return alert("clicked");
};
element.addEventListener("click", function(e) {
return _this.clickHandler(e);
});
}).call(this);
オブジェクトの生成オブジェクトの生成も様々な書式が利用できる
object1 = {one: 1, two: 2}
# 中括弧無しで
object2 = one: 1, two: 2
# 改行をカンマの変わりにする
object3 =
one: 1
two: 2
User.create(name: "John Smith")
// Generated by CoffeeScript 1.6.3
(function() {
var object1, object2, object3;
object1 = {
one: 1,
two: 2
};
object2 = {
one: 1,
two: 2
};
object3 = {
one: 1,
two: 2
};
User.create({
name: "John Smith"
});
}).call(this);
配列配列の生成もいかのような書式が利用できる
array1 = [1, 2, 3]
array2 = [
1
2
3
]
array3 = [1,2,3,]
// Generated by CoffeeScript 1.6.3
(function() {
var array1, array2, array3;
array1 = [1, 2, 3];
array2 = [1, 2, 3];
array3 = [1, 2, 3];
}).call(this);
if文if文は
rubyに近い文法が利用できる
if true == true
"We're ok"
if true != true then "Panic"
# 以下と同じ意味
# (1 > 0) ? "Ok" : "Y2K!"
if 1 > 0 then "Ok" else "Y2K!"
// Generated by CoffeeScript 1.6.3
(function() {
if (true === true) {
"We're ok";
}
if (true !== true) {
"Panic";
}
if (1 > 0) {
"Ok";
} else {
"Y2K!";
}
}).call(this);
式修飾子(後置if文)なんかも利用できる
alert "It's cold!" if heat < 5
// Generated by CoffeeScript 1.6.3
(function() {
if (heat < 5) {
alert("It's cold!");
}
}).call(this);
!ではなくてnot構文を利用することもできる
if not true then "Panic"
// Generated by CoffeeScript 1.6.3
(function() {
if (!true) {
"Panic";
}
}).call(this);
unless文もサポート地味にうれしい
unless true
"Panic"
// Generated by CoffeeScript 1.6.3
(function() {
if (!true) {
"Panic";
}
}).call(this);
trueと書くと===に変換されます。
if true is 1
"Type coercion fail!"
// Generated by CoffeeScript 1.6.3
(function() {
if (true === 1) {
"Type coercion fail!";
}
}).call(this);
true isntで!==に変換される
if true isnt true
alert "Opposite day!"
// Generated by CoffeeScript 1.6.3
(function() {
if (true !== true) {
alert("Opposite day!");
}
}).call(this);
文字列の挿入ダブルクオーテーションで包んだら改行しても大丈夫。#{変数名}での挿入もサポート
favourite_color = "Blue. No, yel..."
question = "Bridgekeeper: What... is your favourite color?
Galahad: #{favourite_color}
Bridgekeeper: Wrong!
"
// Generated by CoffeeScript 1.6.3
(function() {
var favourite_color, question;
favourite_color = "Blue. No, yel...";
question = "Bridgekeeper: What... is your favourite color? Galahad: " + favourite_color + " Bridgekeeper: Wrong! ";
}).call(this);
Scotch
