Successfully reported this slideshow.
Your SlideShare is downloading. ×

Favtile ~never write JS again~

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
- never write JS again -
                   @hanachin_
今日話すこと

•自己紹介

• なぜCoffeeScript?

• 次の一歩
今日話すこと

•自己紹介

• なぜCoffeeScript?

• 次の一歩

YouTube videos are no longer supported on SlideShare

View original on YouTube

Upcoming SlideShare
Ojag naha vol13
Ojag naha vol13
Loading in …3
×

Check these out next

1 of 59 Ad

More Related Content

Slideshows for you (12)

Advertisement

Similar to Favtile ~never write JS again~ (20)

Recently uploaded (20)

Advertisement

Favtile ~never write JS again~

  1. 1. - never write JS again - @hanachin_
  2. 2. 今日話すこと •自己紹介 • なぜCoffeeScript? • 次の一歩
  3. 3. 今日話すこと •自己紹介 • なぜCoffeeScript? • 次の一歩
  4. 4. @hanachin_ Higa Seiei CoffeeScript♥ GeeOki住人
  5. 5. fe eS cr ipt 10 0 % Cof
  6. 6. fe eS cr ipt 10 0 % Cof nSource 10 0 % Ope
  7. 7. DEMO
  8. 8. SOURCE https://github.com/hanachin/favtile/
  9. 9. Favtileを作るうち こんな心境に
  10. 10. æ ææææ ææ œœœ] ææææææ ‹ ›ææ‹›æ ïリç ,æææææ‹æÁŸË æÁŸË› ææææ‹ææ ⌒Á]]人]]Ë⌒ ›もうJS書かないお ææææzææ æææzp┬+zææææzæææ ææææ ›ææææ ^Ÿ%´ææ ‹æææ ææææノææææææææææææ› æ ‹´ææææææææææææ ææ–
  11. 11. CoffeeScript最高だお« æ æ ææ朜œ] æ æææ‹⌒ææ⌒› æææ‹Á ●Ë æÁ●Ë› æ ‹888888⌒Á]]人]]Ë⌒88888 › æ zæææææzp┬+zæææææz æ › ææ æ ^Ÿ%´ æ æ ‹
  12. 12. CoffeeScript信者による JavaScripterを CoffeeScript信者にするプレゼン
  13. 13. 今日話すこと •自己紹介 • なぜCoffeeScript? • 次の一歩
  14. 14. Why CoffeeScript?
  15. 15. Why CoffeeScript? 早く実装 出来るから
  16. 16. JavaScriptで こんな 経験ないですか?
  17. 17. JavaScript 4大やなとこ
  18. 18. CoffeeScript 4大いいとこ
  19. 19. Favtileでの例 twapi_url = (path, options) ->   defaults =     include_entities: true     suppress_response_codes: true   options[k] = v for own k, v of defaults when not options[k]?   options = ("#{k}=#{encodeURIComponent v}" for own k, v of options).join("&")   "https://api.twitter.com/1#{path}.json?#{options}&callback=?" console.log twapi_url "/search", q:"CoffeeScript" TwitterのAPIのURLを組み立てる関数
  20. 20. 関数 ction twapi_url(path, options) { // inside. // inside. // inside. } JavaScript
  21. 21. 関数 functionは長ーーーーーい {}が必要 ction twapi_url(path, options) { // inside. // inside. ←インデント自由 // inside. } JavaScript
  22. 22. æ æ ææ朜œ] æ æææ‹ææ æ æ› æææ‹æ ]ノ æ–Ç]æ ›æædslargml面倒だお æ ‹ æm゚⌒æææ⌒゚mæ › もっと楽に書きたいお æ zææææ Á]]人]]Ëææææz æ ›ææ æ À ⌒´ æ æ ‹
  23. 23. 関数 twapi_url = (path, options) -> # do something... CoffeeScript
  24. 24. 関数 λ twapi_url = (path, options) -> # do something... functionは長い。->で書ける。
  25. 25. 関数 引数 λ twapi_url = (path, options) -> # do something... 引数は()でくくって、,で区切る
  26. 26. 関数 関数の名前 引数 λ twapi_url = (path, options) -> # do something... 関数に名前を付ける
  27. 27. 関数 関数の名前 引数 λ twapi_url = (path, options) -> # inside. # inside. # outside. インデントで処理の単位を分ける
  28. 28. 関数が美しい •関数の書き方が美しい • JSより簡潔に書ける
  29. 29. オブジェクトリテラル twapi_url = (path, options) ->   defaults =     include_entities: true     suppress_response_codes: true   options[k] = v for own k, v of defaults when not options[k]?   options = ("#{k}=#{encodeURIComponent v}" for own k, v of options).join("&")   "https://api.twitter.com/1#{path}.json?#{options}&callback=?" console.log twapi_url "/search", q:"CoffeeScript" TwitterのAPIのURLを組み立てる関数
  30. 30. オブジェクトリテラル   defaults = {     include_entities: true,     suppress_response_codes: true } JavaScript
  31. 31. オブジェクトリテラル   defaults = {     include_entities: true,     suppress_response_codes: true } JavaScript
  32. 32. オブジェクトリテラル   defaults =     include_entities: true     suppress_response_codes: true CoffeeScript
  33. 33. オブジェクトリテラル   defaults =     include_entities: true     suppress_response_codes: true CoffeeScript
  34. 34. 可読性の高い オブジェクトリテラル •さっぱり書ける • インデントすてき! • カンマの付け忘れ無い
  35. 35. 変数展開 twapi_url = (path, options) ->   defaults =     include_entities: true     suppress_response_codes: true   options[k] = v for own k, v of defaults when not options[k]?   options = ("#{k}=#{encodeURIComponent v}" for own k, v of options).join("&")   "https://api.twitter.com/1#{path}.json?#{options}&callback=?" console.log twapi_url "/search", q:"CoffeeScript" TwitterのAPIのURLを組み立てる関数
  36. 36. 変数展開 "https://api.twitter.com/1” + path + ”.json?” + options + “&callback=?" JavaScript
  37. 37. 変数展開 "https://api.twitter.com/ 1#{path}.json?#{options} &callback=?" CoffeeScript
  38. 38. 変数展開 "https://api.twitter.com/ 1#{path}.json?#{options} &callback=?" 変数の値を文字列中で展開 CoffeeScript
  39. 39. 変数展開で可読性UP •読みやすい •の閉じを気にせずに 切り貼り出来る
  40. 40. 配列の操作 var i, max, results = search.results; for (i = 0, max = results.length; i < max; i++) {   Tweet.create(results[i]); } 検索結果の配列から表示するTweet作成
  41. 41. 配列の操作 Tweet.create t for t in search.results 検索結果の配列から表示するTweet作成
  42. 42. よく使う パターンが文法にある •i++にさよなら! • varにさよなら!
  43. 43. Why CoffeeScript? •美しい • 可読性 • パターン
  44. 44. Why CoffeeScript? } •美しい 早く • 可読性 • パターン 実装
  45. 45. CoffeeScriptを使えば Favtileやイイネ!を 早く実装出来る
  46. 46. 今日話すこと •自己紹介 • なぜCoffeeScript? • 次の一歩
  47. 47. CoffeeScript 使ってみたくない?
  48. 48. CoffeeScriptを知る http://coffeescript.org/
  49. 49. CoffeeScriptを知る http://bit.ly/zPaBZo
  50. 50. CoffeeScriptを知る http://bit.ly/AqW9FG
  51. 51. 一番効率の良い 学習方法
  52. 52. 作りたいものを CoffeeScriptで 作ってみよう!
  53. 53. Come on! GeekHouse Okinawa!
  54. 54. Come on! Okinawa.rb 毎週水曜19:00 ギークハウスで!
  55. 55. THANK YOU! @hanachin_

×