Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CoffeeScriptってなんぞ?

28,602 views

Published on

kanazawa.js v1.7 - Back to Basics -(2012年3月31日開催)で使用したスライドです。

Published in: Technology

CoffeeScriptってなんぞ?

  1. 1. CoffeeScriptってなんぞ? kanazawa.js v1.7
  2. 2. 水野隼登Webデザイナー株式会社DMM.comラボtwitter: @pocotan001
  3. 3. CoffeeScript?
  4. 4. CoffeeScriptはJavaScriptです。 CoffeeScript?
  5. 5. CoffeeScriptはJavaScriptです。 alert "Hello" .coffee CoffeeScript?
  6. 6. CoffeeScriptはJavaScriptです。 alert "Hello" .coffee alert("Hello"); .js CoffeeScript?
  7. 7. CoffeeScriptは小さな言語です。 CoffeeScript?
  8. 8. CoffeeScriptは小さな言語です。 全60ページ CoffeeScript?
  9. 9. アジェンダ・ Less code! - 少ないコード・ Enhancements! - 機能の強化 CoffeeScript?
  10. 10. Less code!
  11. 11. うわ、私のJavaScript 1/3...?
  12. 12. Example 1$(function() { $("body").html("Hello");}); Less code!
  13. 13. ; 要らない。$(function() { $("body").html("Hello")}) Less code!
  14. 14. ; () 要らない。$ function() { $("body").html "Hello"} Less code!
  15. 15. ; () {} 要らない。$ function() $("body").html "Hello" Less code!
  16. 16. インデントでブロックを表現$ function() $("body").html "Hello" Less code!
  17. 17. function() は ->$ -> $("body").html "Hello" Less code!
  18. 18. Example 2$("div").click(function(event) { $(this).css({ color: "red", fontSize: "14px" });}); Less code!
  19. 19. ; () {} 要らない。$("div").click function(event) $(this).css color: "red", fontSize: "14px" Less code!
  20. 20. ; () {} , 要らない。$("div").click function(event) $(this).css color: "red" fontSize: "14px" Less code!
  21. 21. インデントでブロックを表現$("div").click function(event) $(this).css color: "red" fontSize: "14px" Less code!
  22. 22. function(args) は (args) ->$("div").click (event) -> $(this).css color: "red" fontSize: "14px" Less code!
  23. 23. this は @$("div").click (event) -> $(@).css color: "red" fontSize: "14px" Less code!
  24. 24. Enhancements!
  25. 25. 変数に var要らない。version = 1.7 Enhancements!
  26. 26. グローバル変数は明示的に。version = 1.7window.title = "kanazawa.js" Enhancements!
  27. 27. ""の中では #{式} が使える。version = 1.7window.title = "kanazawa.js#{version}" Enhancements!
  28. 28. こんな書き方もokversion = 1.7window.title = "kanazawa.js#{version + 1}" Enhancements!
  29. 29. あいまいな == と != は使えない。# 1 === true1 == true Enhancements!
  30. 30. === は isとも書ける。# 1 === true1 is true Enhancements!
  31. 31. JavaScript CoffeeScript=== is Enhancements!
  32. 32. JavaScript CoffeeScript=== is!== isnt! not&& and|| ortrue true, yes, onfalse false, no, off Enhancements!
  33. 33. すべての文が...if 1 is true "○"else "×" Enhancements!
  34. 34. 式として扱える。result = if 1 is true "○"else "×" Enhancements!
  35. 35. 基本的に最後の値が返る。result = if 1 is true "○"else "×" "no!" Enhancements!
  36. 36. 関数においても同じ。sum = (x, y) -> ... x + y Enhancements!
  37. 37. 関数は return 書いてもoksum = (x, y) -> ... return x + y Enhancements!
  38. 38. まとめ
  39. 39. 短く書ける 役に立つ機能コードが一貫性を持つ
  40. 40. 短く書ける 役に立つ機能コードが一貫性を持つ
  41. 41. 短く書ける 役に立つ機能コードが一貫性を持つ
  42. 42. "CoffeeScriptはJavaScriptをスタンダードなデザインパターンで書くための省略形の集合だ。" Reg Braithwaite
  43. 43. Thank you

×