Favtile ~never write JS again~

0 views

Published on

XHago 3で使用したスライドです。

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

  • Be the first to like this

No Downloads
Views
Total views
0
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Favtile ~never write JS again~

  1. 1. - never write JS again - @hanachin_
  2. 2. 今日話すこと•自己紹介• なぜCoffeeScript?• 次の一歩
  3. 3. 今日話すこと•自己紹介• なぜCoffeeScript?• 次の一歩
  4. 4. @hanachin_Higa SeieiCoffeeScript♥GeeOki住人
  5. 5. fe eS cr ipt10 0 % Cof
  6. 6. fe eS cr ipt10 0 % Cof nSource10 0 % Ope
  7. 7. DEMO
  8. 8. SOURCEhttps://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. JavaScript4大やなとこ
  18. 18. CoffeeScript4大いいとこ
  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!GeekHouseOkinawa!
  54. 54. Come on!Okinawa.rb毎週水曜19:00ギークハウスで!
  55. 55. THANKYOU! @hanachin_

×