1.
- never write JS again -
@hanachin_

2.
今日話すこと
•自己紹介
• なぜCoffeeScript?
• 次の一歩

3.
今日話すこと
•自己紹介
• なぜCoffeeScript?
• 次の一歩

4.
@hanachin_
Higa Seiei
CoffeeScript♥
GeeOki住人

5.
fe eS cr ipt
10 0 % Cof

6.
fe eS cr ipt
10 0 % Cof
nSource
10 0 % Ope

7.
DEMO

8.
SOURCE
https://github.com/hanachin/favtile/

9.
Favtileを作るうち
こんな心境に

10.
æ ææææ ææ œœœ]
ææææææ ‹ ›ææ‹›æ ïﾘç
,æææææ‹æÁŸË æÁŸË›
ææææ‹ææ ⌒Á]]人]]Ë⌒ ›もうJS書かないお
ææææzææ æææzp┬+zææææzæææ
ææææ ›ææææ ^Ÿ%´ææ ‹æææ
ææææノææææææææææææ›
æ ‹´ææææææææææææ ææ–

11.
CoffeeScript最高だお«
æ æ ææ朜œ]
æ æææ‹⌒ææ⌒›
æææ‹Á ●Ë æÁ●Ë›
æ ‹888888⌒Á]]人]]Ë⌒88888 ›
æ zæææææzp┬+zæææææz
æ › ææ æ ^Ÿ%´ æ æ ‹

12.
CoffeeScript信者による
JavaScripterを
CoffeeScript信者にするプレゼン

13.
今日話すこと
•自己紹介
• なぜCoffeeScript?
• 次の一歩

14.
Why CoffeeScript?

15.
Why CoffeeScript?
早く実装
出来るから

16.
JavaScriptで
こんな
経験ないですか?

17.
JavaScript
4大やなとこ

18.
CoffeeScript
4大いいとこ

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.
関数
ction twapi_url(path, options) {
// inside.
// inside.
// inside.
}
JavaScript

21.
関数
functionは長ーーーーーい {}が必要
ction twapi_url(path, options) {
// inside.
// inside.
←インデント自由
// inside.
}
JavaScript

22.
æ æ ææ朜œ]
æ æææ‹ææ æ æ›
æææ‹æ ]ノ æ–Ç]æ ›æædslargml面倒だお
æ ‹ æmﾟ⌒æææ⌒ﾟmæ › もっと楽に書きたいお
æ zææææ Á]]人]]Ëææææz
æ ›ææ æ À ⌒´ æ æ ‹

23.
関数
twapi_url = (path, options) ->
# do something...
CoffeeScript

24.
関数
λ
twapi_url = (path, options) ->
# do something...
functionは長い。->で書ける。

25.
関数
引数 λ
twapi_url = (path, options) ->
# do something...
引数は()でくくって、,で区切る

26.
関数
関数の名前 引数 λ
twapi_url = (path, options) ->
# do something...
関数に名前を付ける

27.
関数
関数の名前 引数 λ
twapi_url = (path, options) ->
# inside.
# inside.
# outside.
インデントで処理の単位を分ける

28.
関数が美しい
•関数の書き方が美しい
• JSより簡潔に書ける

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.
オブジェクトリテラル
defaults = {
include_entities: true,
suppress_response_codes: true
}
JavaScript

31.
オブジェクトリテラル
defaults = {
include_entities: true,
suppress_response_codes: true
}
JavaScript

32.
オブジェクトリテラル
defaults =
include_entities: true
suppress_response_codes: true
CoffeeScript

33.
オブジェクトリテラル
defaults =
include_entities: true
suppress_response_codes: true
CoffeeScript

34.
可読性の高い
オブジェクトリテラル
•さっぱり書ける
• インデントすてき!
• カンマの付け忘れ無い

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.
変数展開
"https://api.twitter.com/1”
+ path + ”.json?” + options
+ “&callback=?"
JavaScript

37.
変数展開
"https://api.twitter.com/
1#{path}.json?#{options}
&callback=?"
CoffeeScript

38.
変数展開
"https://api.twitter.com/
1#{path}.json?#{options}
&callback=?"
変数の値を文字列中で展開
CoffeeScript

39.
変数展開で可読性UP
•読みやすい
•の閉じを気にせずに
切り貼り出来る

40.
配列の操作
var i, max, results = search.results;
for (i = 0, max = results.length; i < max; i++) {
Tweet.create(results[i]);
}
検索結果の配列から表示するTweet作成

41.
配列の操作
Tweet.create t for t in search.results
検索結果の配列から表示するTweet作成

42.
よく使う
パターンが文法にある
•i++にさよなら!
• varにさよなら!

43.
Why CoffeeScript?
•美しい
• 可読性
• パターン

44.
Why CoffeeScript?
}
•美しい
早く
• 可読性
• パターン 実装

45.
CoffeeScriptを使えば
Favtileやイイネ!を
早く実装出来る

46.
今日話すこと
•自己紹介
• なぜCoffeeScript?
• 次の一歩

47.
CoffeeScript
使ってみたくない?

48.
CoffeeScriptを知る
http://coffeescript.org/

49.
CoffeeScriptを知る
http://bit.ly/zPaBZo

50.
CoffeeScriptを知る
http://bit.ly/AqW9FG

51.
一番効率の良い
学習方法

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

53.
Come on!
GeekHouse
Okinawa!

54.
Come on!
Okinawa.rb
毎週水曜19:00
ギークハウスで!

55.
THANK
YOU!
@hanachin_