Posted at

CoffeeScript入門メモ

More than 5 years have passed since last update.

ドットインストールの 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 の導入