2013年12月13日

CoffeeScriptの基本

はじめての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);


タグ:CoffeeScript
posted by ねこまんま at 20:16 | Comment(0) | TrackBack(0) | Tool | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/382616200
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック