ES2015が登場してすっかりCoffeeScriptがオワコン化(オワコンという言葉自体がオワコンか?)した感があります。
嫌いな言語ランキングでも無事3位にランクインされました(https://fossbytes.com/most-loved-and-most-hated-programming-languages/ )。
CoffeeScriptはもう死んだ言語なのでしょうか?
いえいえ、ES2015登場後もCoffeeScriptを使うメリットはあります。
そこで、すっかり嫌われ者になってしまったCoffeeScriptのいいところを紹介したいと思います。
ちなみに、TypeScriptについては触れません(触ったことがないので)。
CoffeeScriptは;が不要
21世紀にもなって;をつけないといけないのはかなり苦痛なのでこれは結構うれしいです。
CoffeeScriptは比較が厳密
"" == "0" // false
0 == "" // true
0 == "0" // true
false == "false" // false
false == "0" // true
false == undefined // false
false == null // false
null == undefined // true
" \t\r\n" == 0 // true
"" == "0" # false
0 == "" # false
0 == "0" # false
false == "false" # false
false == "0" # false
false == undefined # false
false == null # false
null == undefined # false
" \t\r\n" == 0 # false
引用元: http://qiita.com/mugichan3/items/9462844b049900ffb22c
jsの比較はかなり醜悪です。それはES2015でも(おそらく未来永劫)変わりません。
代わりに===を使えばいいのですが、逆にうっかり==を使ってしまうとバグの元です。
CoffeeScriptでは多くの言語と同じように==を素直に使えばいいので簡素です。
CoffeeScriptはfunctionを->, =>でかける
new Vue({
created: function() {
return this.hoge();
}
});
new Vue
created: ->
@hoge()
jsでは関数を多用しますが、関数を定義するのにfunctionと書くのは長すぎます。
ES2015ではめでたくfunctionを=>とかけるようになりました。
が、それはthisが関数が定義されたスコープにおけるthisを引き継ぐ場合のみです。
引き継ぎたくない場合はあいかわらすfunctionと書かなければなりません。
CoffeeScriptではthisを引き継がない場合は->、'this'を引き継ぐ場合は=>と書くことができます。
簡潔で素晴らしいです。
CoffeeScriptはreturnが不要
new Vue({
el: '#hoge',
data: {
foo: 'FOO',
bar: 'BAR'
}
});
Vue.component('piyo', {
data: function() {
return {
foo: 'FOO',
bar: 'BAR'
};
}
});
new Vue
data:
foo: 'FOO'
bar: 'BAR'
Vue.component 'piyo',
data: ->
foo: 'FOO'
bar: 'BAR'
vue.jsにおいて、dataはVueのインスタンスではオブジェクトなのに対して、componentはオブジェクトを返す関数を定義しなければなりません。
jsではfunctionと書いた上、returnも書かなければなりませんが、CoffeeScriptでは->をつけるだけです。
Vueのインスタンスとcomponentでインデントが統一できてきれいです。
CoffeeScriptはオブジェクトに,が不要
new Vue({
methods: {
sayFoo: function() {
return console.log("FOO");
},
sayBar: function() {
return console.log("BAR");
}
}
});
new Vue
methods:
sayFoo: ->
console.log "FOO"
sayBar: ->
console.log "BAR"
vue.jsではメソッドを上記のように定義します。
ここでメソッドsayPiyoを追加したい時、どうするでしょうか？
私はよく、sayBarをコピペして次のように書いてしまいます。
new Vue({
methods: {
sayFoo: function() {
return console.log("FOO");
},
sayBar: function() {
return console.log("BAR");
} // !!!
sayPiyo: function() {
return console.log("PIYO");
}
}
});
これは怒られます。なぜならsayBarとsayPiyoの間に,がないからです。
キレそうになりますね。
CoffeeScriptではこのようなことはありません。
new Vue
methods:
sayFoo: ->
console.log "FOO"
sayBar: ->
console.log "BAR"
sayPiyo: ->
console.log "PIYO"
ストレスフリー!
以上、思いついたことを書いてみました。
最後までお読み頂きありがとうございます。
よきCoffeeScriptライフを！
追記
きたぜ! CoffeeScript2
我がCoffeeScriptは永久に不滅だ!