favtile ~never write js again~
DESCRIPTION
XHago 3で使用したスライドです。TRANSCRIPT
- never write JS again -@hanachin_
今日話すこと
•自己紹介
•なぜCoffeeScript?
•次の一歩
今日話すこと
•自己紹介
•なぜCoffeeScript?
•次の一歩
@hanachin_Higa SeieiCoffeeScript♥GeeOki住人
100%CoffeeScript
100%CoffeeScript
100%OpenSource
DEMO
https://github.com/hanachin/favtile/
SOURCE
Favtileを作るうちこんな心境に
æ ææææ ææ œœœ]ææææææ ‹ ›ææ‹›æ ïリç,æææææ‹æÁŸË æÁŸË›ææææ‹ææ ⌒Á]]人]]Ë⌒ ›もうJS書かないおææææzææ æææzp┬+zææææzæææææææ ›ææææ ^Ÿ%´ææ ‹æææææææノææææææææææææ›æ ‹´ææææææææææææ ææ–
CoffeeScript最高だお«æ æ ææ朜œ]æ æææ‹⌒ææ⌒›æææ‹Á ●Ë æÁ●Ë›æ ‹888888⌒Á]]人]]Ë⌒88888 ›æ zæææææzp┬+zæææææzæ › ææ æ ^Ÿ%´ æ æ ‹
CoffeeScript信者による
JavaScripterを
CoffeeScript信者にするプレゼン
今日話すこと
•自己紹介
•なぜCoffeeScript?
•次の一歩
Why CoffeeScript?
Why CoffeeScript?
早く実装出来るから
JavaScriptでこんな
経験ないですか?
JavaScript4大やなとこ
CoffeeScript4大いいとこ
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"
Favtileでの例
TwitterのAPIのURLを組み立てる関数
function twapi_url(path, options) { // inside. // inside. // inside. }
JavaScript
関数
function twapi_url(path, options) { // inside. // inside. // inside. }
JavaScript
functionは長ーーーーーい {}が必要
←インデント自由
関数
æ æ ææ朜œ]æ æææ‹ææ æ æ›æææ‹æ ]ノ æ–Ç]æ ›æædslargml面倒だおæ ‹ æm゚⌒æææ⌒゚mæ › もっと楽に書きたいおæ zææææ Á]]人]]Ëææææzæ ›ææ æ À ⌒´ æ æ ‹
twapi_url = (path, options) -> # do something...
CoffeeScript
関数
twapi_url = (path, options) -> # do something...
functionは長い。->で書ける。
λ
関数
twapi_url = (path, options) -> # do something...
引数は()でくくって、,で区切る
引数 λ
関数
twapi_url = (path, options) -> # do something...
関数に名前を付ける
関数の名前 引数 λ
関数
twapi_url = (path, options) -> # inside. # inside.# outside.
インデントで処理の単位を分ける
関数の名前 引数 λ
関数
関数が美しい
•関数の書き方が美しい
•JSより簡潔に書ける
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を組み立てる関数
defaults = { include_entities: true, suppress_response_codes: true }
JavaScript
オブジェクトリテラル
defaults = { include_entities: true, suppress_response_codes: true }
JavaScript
オブジェクトリテラル
defaults = include_entities: true suppress_response_codes: true
CoffeeScript
オブジェクトリテラル
defaults = include_entities: true suppress_response_codes: true
CoffeeScript
オブジェクトリテラル
•さっぱり書ける
•インデントすてき!
•カンマの付け忘れ無い
可読性の高いオブジェクトリテラル
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を組み立てる関数
"https://api.twitter.com/1” + path + ”.json?” + options + “&callback=?"
JavaScript
変数展開
"https://api.twitter.com/1#{path}.json?#{options}&callback=?"
CoffeeScript
変数展開
"https://api.twitter.com/1#{path}.json?#{options}&callback=?"
CoffeeScript
変数の値を文字列中で展開
変数展開
•読みやすい
•“”の閉じを気にせずに切り貼り出来る
変数展開で可読性UP
配列の操作
検索結果の配列から表示するTweet作成
var i, max, results = search.results;for (i = 0, max = results.length; i < max; i++) { Tweet.create(results[i]);}
Tweet.create t for t in search.results
配列の操作
検索結果の配列から表示するTweet作成
•i++にさよなら!
•varにさよなら!
よく使うパターンが文法にある
Why CoffeeScript?
•美しい
•可読性
•パターン
Why CoffeeScript?
•美しい
•可読性
•パターン}早く実装
CoffeeScriptを使えばFavtileやイイネ!を早く実装出来る
今日話すこと
•自己紹介
•なぜCoffeeScript?
•次の一歩
CoffeeScript使ってみたくない?
一番効率の良い学習方法
作りたいものをCoffeeScriptで作ってみよう!
Come on!GeekHouseOkinawa!
毎週水曜19:00~ギークハウスで!
Come on!Okinawa.rb