CoffeeScriptってなんね?
読み方
サイト
CoffeeScriptとは
CoffeeScript はプログラミング言語のひとつである。コードはJavaScript のコードに変換される。
Ruby や Python、Haskell [1] から影響を受けたシンタックスシュガーの導入により、JavaScript に比べ簡潔さと可読性を向上させたほか、配列内包 (Array comprehensions) やパターンマッチといった機能を追加している…
wikipediaより
要するに
- JavaScriptにコンパイルできる小さな言語
- DocumentCloudのJeremy Ashkeans氏によって開発された
- 構文がRubyやPythonに似ている
- コンパイル後はJavaScriptとして動作するため実行速度面ではほぼ変わらない
- ブラウザ用の開発にもサーバサイドの開発にも使える
- Rails3.1以降ではデフォルトの開発言語として採用(自動的にコンパイル)
なぜCoffeeScript?
背景
javascriptが比較的自由な言語なので、運用管理がたいへん。。。
自作機能などの衝突が怖い。。。
長所
大きなところでは
* タイプ数が少ない
* ソースの可読性が高まる
* クラスやクロージャーの作成が簡単
少しだけテクニカルなところだと
* グローバル汚染を防げる
* 細かいタイプミスが減る
* 比較が曖昧でなくなる
* 他にもいろいろ、ええ感じにしてくれる
短所
- コンパイルが必要
- ランタイムエラーの発生箇所がわかりずらい
- そもそもjavascriptの知識がないときつい
実践
代入
varを使わなくてもok
コンパイル前
say = 'hello'
関数呼び出し
コンパイル前
alert 'hello'
分岐
コンパイル前
weather = '晴れ'
if weather is '晴れ'
alert '晴れだよ'
else
alert '違うよ'
演算子(and, or, not など)
CoffeeScript | JavaScript |
---|---|
is | === |
isnt | !== |
not | ! |
and | && |
or | |
true, yes, on | true |
false, no, off | false |
@, this | this |
of | in |
in | 無し |
ループ
コンパイル前
for i in [0..3]
alert i
関数
コンパイル前
hello = ->
alert "Hello!"
コンパイル前
hello = (name) ->
alert "Hello, #{name}!"
hello("じげんぶ")
暗黙的なreturn
コンパイル前
$(function() {
return $('#btn').on('click', function() {
return console.log('クリック');
});
});
コンパイル後
$(function() {
$('#btn').on('click', function() {
console.log('クリック');
});
});
明示的にreturnする
コンパイル前
$ ->
$('#btn').on 'click', ->
console.log 'クリック'
return
return
コンパイル後
$(function() {
$('#btn').on('click', function() {
console.log('クリック');
});
});
jQueryとcoffeescript
DOM生成後にhtmlを操作できるようにするおまじない
コンパイル前
$ ->
# jQueryスクリプト
コンパイル後
$(function() {
// jQueryスクリプト
});
pタグのテキストカラーを赤にする
コンパイル前
$ ->
$('p').css('color', 'red')
コンパイル後
$(function() {
return $('p').css('color', 'red');
});
@はthisに変換される
コンパイル前
$ ->
$('#btn').on 'click', ->
console.log @
return
return
コンパイル後
$(function() {
$('#btn').on('click', function() {
console.log(this);
});
});
jqueryオブジェクトを取得したい場合
コンパイル前
$ ->
$('#btn').on 'click', ->
console.log $ @
return
return
コンパイル後
$(function() {
$('#btn').on('click', function() {
console.log($(this));
});
});