1. 今さら始めるCoffeeScript
- 社内勉強会 第3回 -
2012/9/5 @mryoshio
Copyright 2012 tachibanakikaku.com. All rights reserved.

2. 目次
■ 自己紹介
■ CoffeeScript
■ 使えるの？
■ インストール
■ sample.coffee
■ sample.js
■ コード例
■ Railsとの組合せ
■ 参考情報

3. 自己紹介
■ 仕事
‣ Alfresco ... カスタマイズやサポート
‣ Liferay ... カスタマイズやサポート
■ それ以外
‣ Alfresco ... https://www.facebook.com/AlfrescoUserJP の管理
‣ Ruby，Python，Heroku，GAE，AWS等で遊ぶ

4. CoffeeScript
■ 概要
‣ JavaScriptのGood Partsを簡単に利用できるように実装された言語。コンパイルして最終的に
JavaScriptに変換される。最新バージョンは1.3.3（2012/9/5時点）
■ メリット
‣ JavaScriptの煩わしい部分を避けられる
➡ } や ) の不整合とか，
➡ (int i = 0; i < list.length; i++)という記述とか，
➡ (function() {})();のようなものとか..
■ http://coffeescript.org/を読んでください
■ 要するに何なの？
‣ The golden rule of CoffeeScript is: It’s just JavaScript .

5. 使えるの？
■ 例えばどこで使われている？
‣ Ruby on Rails ... バージョン3.1から正式にサポートされている
■ 覚えるの面倒くさいんだけど
‣ JavaScriptの方が遥かに面倒
■ コンパイルを噛ませるので手間が増えるのでは？
‣ 自動化する手段なら幾つでもある
‣ 開発チーム内でだけソースコードを触る場合には大丈夫
■ jQuery等と組合せられるの？
‣ できます。
■ 既存のコードを置換できるの？
‣ やめたほうがよいと思う。新規開発を対象とするのがよさげ。

6. インストール
■ Node.jsを入れる
‣ $ brew install nodejs
‣ $ curl http://npmjs.org/install.sh
‣ sh install.sh
■ CoffeeScriptを入れる
‣ $ npm install -g coffee-script
■ 入ったかな
‣ $ coffee
‣ coffee> # => プロンプトに変わればOK
■ コンパイル
‣ $ coffee -o <出力先ディレクトリ> -c <ソースディレクトリ>

7. sample.coffee
# assign
x=3
# array
a = [1, 2, 3, 4, "go"]
# function
ok = ->
alert "ok"
# function with arg
square = (v) ->
return v*v
# call function
alert square(6)
# object
o={
"name": "taro",
"age": 37,
"mail": "taro@aegif.jp"
}

8. sample.js（コンパイル結果）
// Generated by CoffeeScript 1.3.3
(function() {
var a, o, ok, square, x;
x = 3;
a = [1, 2, 3, 4, "go"];
ok = function() {
return alert("ok");
};
square = function(v) {
return v * v;
};
alert(square(6));
o={
"name": "taro",
"age": 37,
"mail": "taro@aegif.jp"
}; http://javascripter.github.com/jsrepl.html で動作確認済み
}).call(this);

9. CoffeeScriptとコンパイル結果

10. 代入
CoffeeScript JavaScript
x=3 var a, b, x, y;
a = b = 21 x = 3;
y = 2*x a = b = 21;
y = 2 * x;

11. 配列
CoffeeScript JavaScript
a = [1, 2, 3, 4, "go"] var a, aa, aaa;
aa = [1, "ni", ["in", "array"]] a = [1, 2, 3, 4, "go"];
aaa = [ aa = [1, "ni", ["in", "array"]];
1, 2, 3
4, 5, 6 aaa = [1, 2, 3, 4, 5, 6, "nana", "hachi",
"nana", "hachi", "ku" "ku"];
]

12. オブジェクト
CoffeeScript JavaScript
o={ var aegif, o;
"name": "taro", o={
"age": 37, "name": "taro",
"age": 37,
}
};
aegif = aegif = {
ac: ac: {
name: "accounting consulting" name: "accounting consulting",
bc: },
name: "bussiness consulting" bc: {
oc: name: "bussiness consulting",
name: "oss consulting" },
oc: {
name: "oss consulting",
}
};

13. 分岐
CoffeeScript JavaScript
if true var a;
alert "ok" if (true) {
alert("ok");
}
a=0
switch a a = 0;
when 0
switch (a) {
alert 0 case 0:
when 1 alert(0);
break;
alert 0 case 1:
when 2 alert(0);
break;
alert 2 case 2:
when 3 alert(2);
break;
alert 3
case 3:
else alert(3);
alert "else" break;
default:
alert("else");
}

14. Function
CoffeeScript JavaScript
ok = -> var ok, square, square2, cube;
alert "ok"
ok = function() {
return alert("ok");
# function with arg };
square = (v) ->
square = function(v) {
return v*v return v * v;
};
square2 = (v) -> return v*v
square2 = function(v) {
return v * v;
cube = (x) -> square(x)*x };
cube = function(x) {
return square(x) * x;
};

15. Rails（+jQuery）との組合せ

16. 前準備
■ サンプルアプリケーションの用意
‣ $ rails new coffeetest && cd coffeetest
‣ $ rm public/index.html
‣ $ rails g controller top index
‣ $ bundle -V install
‣ $ rails g controller top index
‣ app/views/top/index.html.erbを変更
‣ app/assets/javascripts/top/js.coffeeを変更
■ デモ的なもの

17. CoffeeScriptとコンパイル結果
CoffeeScript JavaScript
$ -> (function() {
$("input[type=radio]").click ->
$("div#contents").css("background-color", $(function() {
$(@).val()) return $
("input[type=radio]").click(function() {
return $
("div#contents").css("background-color", $
(this).val());
});
});
}).call(this);
JavaScriptコードは次のパスに存在 => tmp/cache/assets/D84/210/sprockets%2Fabd0103ccec2b428ac62c94e4c40b384

18. jQueryのみで書いた場合との比較
CoffeeScript jQuery
$ -> (function($) {
$("input[type=radio]").click -> $(document).ready(function() {
$("div#contents").css("background-color", $("input[type=radio]").click(function() {
$(@).val()) $("div#contents").css("background-
color", $(this).val())
});
});
})(jQuery);

19. 所感
■ 使いやすい
‣ 思ってたより簡単
‣ これまでjQuery使ってたりRuby触ってた人なら1日もあれば何とかなりそう
‣ 最終的にJavaScriptに変換されるため、これまで通りFirebugでのデバッグも簡単そう
■ 複雑な処理でも大丈夫か？
‣ 軽いロジックのみ必要な仕事で採用してその後徐々に利用対象の仕事を大きくするのが良さげ
■ その他
‣ とりあえずやってみるには敷居が低いのでお薦め
‣ .coffeeという拡張子の長さが欠点
‣ コーヒー好きでない

20. 参考情報
■ 参考URL
‣ http://coffeescript.org/
‣ http://javascripter.github.com/jsrepl.html
‣ http://www.oiax.jp/rails/coffee00.html

21. Copyright 2012 tachibanakikaku.com. All rights reserved.