Favtile ~never write JS again~

- 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を知る

http://coffeescript.org/

CoffeeScriptを知る

http://bit.ly/zPaBZo

CoffeeScriptを知る

http://bit.ly/AqW9FG

一番効率の良い学習方法

作りたいものをCoffeeScriptで作ってみよう!

Come on!GeekHouseOkinawa!

毎週水曜19:00~ギークハウスで!

Come on!Okinawa.rb

THANKYOU!

@hanachin_