JavaScript
CoffeeScript

CoffeeScriptの練習

More than 1 year has passed since last update.

初心者のボクが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側で===になっています。


参考