CoffeeScriptってなんぞ?

27,814 views

Published on

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

Published in: Technology
7 Comments
87 Likes
Statistics
Notes
No Downloads
Views
Total views
27,814
On SlideShare
0
From Embeds
0
Number of Embeds
8,308
Actions
Shares
0
Downloads
9
Comments
7
Likes
87
Embeds 0
No embeds

No notes for slide

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

×