今さら始めるCoffeeScript- 社内勉強会 第3回 -                                2012/9/5 @mryoshio                Copyright 2012 tachibanaki...
目次■ 自己紹介■ CoffeeScript■ 使えるの?■ インストール■ sample.coffee■ sample.js■ コード例■ Railsとの組合せ■ 参考情報
自己紹介■ 仕事  ‣   Alfresco ... カスタマイズやサポート  ‣   Liferay ... カスタマイズやサポート■ それ以外  ‣   Alfresco ... https://www.facebook.com/Alfre...
CoffeeScript■ 概要  ‣    JavaScriptのGood Partsを簡単に利用できるように実装された言語。コンパイルして最終的に       JavaScriptに変換される。最新バージョンは1.3.3(2012/9/5時点...
使えるの?■ 例えばどこで使われている?  ‣   Ruby on Rails ... バージョン3.1から正式にサポートされている■ 覚えるの面倒くさいんだけど  ‣   JavaScriptの方が遥かに面倒■ コンパイルを噛ませるので手間が...
インストール■ Node.jsを入れる  ‣   $ brew install nodejs  ‣   $ curl http://npmjs.org/install.sh  ‣   sh install.sh■ CoffeeScriptを入れる...
sample.coffee# assignx=3# arraya = [1, 2, 3, 4, "go"]# functionok = ->   alert "ok"# function with argsquare = (v) ->   ret...
sample.js(コンパイル結果)// Generated by CoffeeScript 1.3.3(function() {  var a, o, ok, square, x; x = 3; a = [1, 2, 3, 4, "go"]; ...
CoffeeScriptとコンパイル結果
代入             CoffeeScript                 JavaScriptx=3                        var a, b, x, y;a = b = 21                 ...
配列              CoffeeScript                         JavaScripta = [1, 2, 3, 4, "go"]            var a, aa, aaa;aa = [1, "n...
オブジェクト              CoffeeScript                              JavaScripto={                                   var aegif, o;...
分岐                 CoffeeScript                       JavaScriptif true                        var a;    alert "ok"        ...
Function               CoffeeScript                        JavaScriptok = ->                       var ok, square, square2,...
Rails(+jQuery)との組合せ
前準備■ サンプルアプリケーションの用意 ‣   $ rails new coffeetest && cd coffeetest ‣   $ rm public/index.html ‣   $ rails g controller top ind...
CoffeeScriptとコンパイル結果               CoffeeScript                                        JavaScript $ ->                      ...
jQueryのみで書いた場合との比較              CoffeeScript                                          jQuery$ ->                           ...
所感■ 使いやすい ‣   思ってたより簡単 ‣   これまでjQuery使ってたりRuby触ってた人なら1日もあれば何とかなりそう ‣   最終的にJavaScriptに変換されるため、これまで通りFirebugでのデバッグも簡単そう■ 複雑...
参考情報■ 参考URL  ‣   http://coffeescript.org/  ‣   http://javascripter.github.com/jsrepl.html  ‣   http://www.oiax.jp/rails/cof...
Copyright 2012 tachibanakikaku.com. All rights reserved.
Upcoming SlideShare
Loading in …5
×

今さら始めるCoffeeScript

5,021 views

Published on

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,021
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
17
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 今さら始めるCoffeeScript

    1. 1. 今さら始めるCoffeeScript- 社内勉強会 第3回 - 2012/9/5 @mryoshio Copyright 2012 tachibanakikaku.com. All rights reserved.
    2. 2. 目次■ 自己紹介■ CoffeeScript■ 使えるの?■ インストール■ sample.coffee■ sample.js■ コード例■ Railsとの組合せ■ 参考情報
    3. 3. 自己紹介■ 仕事 ‣ Alfresco ... カスタマイズやサポート ‣ Liferay ... カスタマイズやサポート■ それ以外 ‣ Alfresco ... https://www.facebook.com/AlfrescoUserJP の管理 ‣ Ruby,Python,Heroku,GAE,AWS等で遊ぶ
    4. 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. 5. 使えるの?■ 例えばどこで使われている? ‣ Ruby on Rails ... バージョン3.1から正式にサポートされている■ 覚えるの面倒くさいんだけど ‣ JavaScriptの方が遥かに面倒■ コンパイルを噛ませるので手間が増えるのでは? ‣ 自動化する手段なら幾つでもある ‣ 開発チーム内でだけソースコードを触る場合には大丈夫■ jQuery等と組合せられるの? ‣ できます。■ 既存のコードを置換できるの? ‣ やめたほうがよいと思う。新規開発を対象とするのがよさげ。
    6. 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. 7. sample.coffee# assignx=3# arraya = [1, 2, 3, 4, "go"]# functionok = -> alert "ok"# function with argsquare = (v) -> return v*v# call functionalert square(6)# objecto={ "name": "taro", "age": 37, "mail": "taro@aegif.jp" }
    8. 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. 9. CoffeeScriptとコンパイル結果
    10. 10. 代入 CoffeeScript JavaScriptx=3 var a, b, x, y;a = b = 21 x = 3;y = 2*x a = b = 21; y = 2 * x;
    11. 11. 配列 CoffeeScript JavaScripta = [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. 12. オブジェクト CoffeeScript JavaScripto={ 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. 13. 分岐 CoffeeScript JavaScriptif true var a; alert "ok" if (true) { alert("ok"); }a=0switch 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. 14. Function CoffeeScript JavaScriptok = -> 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. 15. Rails(+jQuery)との組合せ
    16. 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. 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. 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. 19. 所感■ 使いやすい ‣ 思ってたより簡単 ‣ これまでjQuery使ってたりRuby触ってた人なら1日もあれば何とかなりそう ‣ 最終的にJavaScriptに変換されるため、これまで通りFirebugでのデバッグも簡単そう■ 複雑な処理でも大丈夫か? ‣ 軽いロジックのみ必要な仕事で採用してその後徐々に利用対象の仕事を大きくするのが良さげ■ その他 ‣ とりあえずやってみるには敷居が低いのでお薦め ‣ .coffeeという拡張子の長さが欠点 ‣ コーヒー好きでない
    20. 20. 参考情報■ 参考URL ‣ http://coffeescript.org/ ‣ http://javascripter.github.com/jsrepl.html ‣ http://www.oiax.jp/rails/coffee00.html
    21. 21. Copyright 2012 tachibanakikaku.com. All rights reserved.

    ×