初心者のボクがCoffeeScriptを練習します。ということまずはJavaScriptと比較することかなと思いました。
変数
変数に文字列を代入します。
JavaScript
var val_string = "hoge";
var val_float = 1.23;
var val_boolean = true;
CoffeeScript
val_string = "hoge"
val_float = 1.23
val_boolean = true
セミコロンが消えます。
コメント
複数行コメントと1行コメントの書き方
JavaScriptのコメント
/*
複数行のコメントだよ
*/
// コメントだよもん
CoffeeScriptのコメント
###
複数行のコメントだよ
###
# コメントだよもん
配列
配列です。
JavaScript
var items = ["aaa", "bbb", "ccc"];
CoffeeScript
items = [
"aaa"
"bbb"
"ccc"
]
改行してカンマが消えるのですかね。
配列の中にハッシュを入れました。
JavaScript
var items = [
{title: "コーラ", price: 150},
{title: "トマトジュース", price: 120},
{title: "ビール", price: 300}
];
CoffeeScript
items = [
{
title: "コーラ"
price: 150
}
{
title: "トマトジュース"
price: 120
}
{
title: "ビール"
price: 300
}
]
メソッド
hogeというメソッドでalertを表示します。
JavaScript
function hoge() {
alert("aaa");
}
CoffeeScript
hoge = ->
alert "aaa"
return
メソッドで引数を受け取る
hogeメソッドにpiyoという引数をワタシます。
JavaScript
function hoge(piyo) {
alert("aaa" + piyo);
}
CoffeeScript
hoge = (piyo)->
alert "huga" + piyo
return
無名関数
JavaScript
var huga = function() {
alert("aaa");
}
CoffeeScript
huga = ->
alert "aaa"
return
JavaScriptでみると異なりますが、CoffeeScriptだとhugaと関数を定義した書き方と同じになるのですね。
メソッド
メソッドはそのまま使うことができます。
JavaScript
setTimeout(console.log(3), 3000);
CoffeeScript
setTimeout console.log(3), 3000
カッコがなくなるだけです。
if文
if文を書くと{}が無くなります。
JavaScript
if (true === true) {
console.log('true');
} else {
console.log('false');
}
CoffeeScript
if true == true
console.log 'true'
else
console.log 'false'
CoffeeScriptのif文の==と書くとJavaScript側で===になっています。