favtile ~never write js again~

58
- never write JS again - @hanachin_

Upload: hanachin

Post on 25-May-2015

1.169 views

Category:

Technology


0 download

DESCRIPTION

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

TRANSCRIPT

Page 2: Favtile ~never write JS again~

今日話すこと

•自己紹介

•なぜCoffeeScript?

•次の一歩

Page 3: Favtile ~never write JS again~

今日話すこと

•自己紹介

•なぜCoffeeScript?

•次の一歩

Page 4: Favtile ~never write JS again~

@hanachin_Higa SeieiCoffeeScript♥GeeOki住人

Page 5: Favtile ~never write JS again~
Page 6: Favtile ~never write JS again~
Page 7: Favtile ~never write JS again~
Page 8: Favtile ~never write JS again~

100%CoffeeScript

Page 9: Favtile ~never write JS again~

100%CoffeeScript

100%OpenSource

Page 10: Favtile ~never write JS again~

DEMO

Page 11: Favtile ~never write JS again~

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

SOURCE

Page 12: Favtile ~never write JS again~

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

Page 13: Favtile ~never write JS again~

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

Page 14: Favtile ~never write JS again~

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

Page 15: Favtile ~never write JS again~

CoffeeScript信者による

JavaScripterを

CoffeeScript信者にするプレゼン

Page 16: Favtile ~never write JS again~

今日話すこと

•自己紹介

•なぜCoffeeScript?

•次の一歩

Page 17: Favtile ~never write JS again~

Why CoffeeScript?

Page 18: Favtile ~never write JS again~

Why CoffeeScript?

早く実装出来るから

Page 19: Favtile ~never write JS again~

JavaScriptでこんな

経験ないですか?

Page 20: Favtile ~never write JS again~

JavaScript4大やなとこ

Page 21: Favtile ~never write JS again~

CoffeeScript4大いいとこ

Page 22: Favtile ~never write JS again~

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を組み立てる関数

Page 23: Favtile ~never write JS again~

function twapi_url(path, options) {   // inside. // inside. // inside. }

JavaScript

関数

Page 24: Favtile ~never write JS again~

function twapi_url(path, options) {   // inside. // inside. // inside. }

JavaScript

functionは長ーーーーーい {}が必要

←インデント自由

関数

Page 25: Favtile ~never write JS again~

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

Page 26: Favtile ~never write JS again~

twapi_url = (path, options) -> # do something...

CoffeeScript

関数

Page 27: Favtile ~never write JS again~

twapi_url = (path, options) -> # do something...

functionは長い。->で書ける。

λ

関数

Page 28: Favtile ~never write JS again~

twapi_url = (path, options) -> # do something...

引数は()でくくって、,で区切る

引数 λ

関数

Page 29: Favtile ~never write JS again~

twapi_url = (path, options) -> # do something...

関数に名前を付ける

関数の名前 引数 λ

関数

Page 30: Favtile ~never write JS again~

twapi_url = (path, options) -> # inside. # inside.# outside.

インデントで処理の単位を分ける

関数の名前 引数 λ

関数

Page 31: Favtile ~never write JS again~

関数が美しい

•関数の書き方が美しい

•JSより簡潔に書ける

Page 32: Favtile ~never write JS again~

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を組み立てる関数

Page 33: Favtile ~never write JS again~

  defaults = {    include_entities: true,    suppress_response_codes: true }

JavaScript

オブジェクトリテラル

Page 34: Favtile ~never write JS again~

  defaults = {    include_entities: true,    suppress_response_codes: true }

JavaScript

オブジェクトリテラル

Page 35: Favtile ~never write JS again~

  defaults =    include_entities: true    suppress_response_codes: true

CoffeeScript

オブジェクトリテラル

Page 36: Favtile ~never write JS again~

  defaults =    include_entities: true    suppress_response_codes: true

CoffeeScript

オブジェクトリテラル

Page 37: Favtile ~never write JS again~

•さっぱり書ける

•インデントすてき!

•カンマの付け忘れ無い

可読性の高いオブジェクトリテラル

Page 38: Favtile ~never write JS again~

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を組み立てる関数

Page 39: Favtile ~never write JS again~

"https://api.twitter.com/1” + path + ”.json?” + options + “&callback=?"

JavaScript

変数展開

Page 40: Favtile ~never write JS again~

"https://api.twitter.com/1#{path}.json?#{options}&callback=?"

CoffeeScript

変数展開

Page 41: Favtile ~never write JS again~

"https://api.twitter.com/1#{path}.json?#{options}&callback=?"

CoffeeScript

変数の値を文字列中で展開

変数展開

Page 42: Favtile ~never write JS again~

•読みやすい

•“”の閉じを気にせずに切り貼り出来る

変数展開で可読性UP

Page 43: Favtile ~never write JS again~

配列の操作

検索結果の配列から表示するTweet作成

var i, max, results = search.results;for (i = 0, max = results.length; i < max; i++) {  Tweet.create(results[i]);}

Page 44: Favtile ~never write JS again~

Tweet.create t for t in search.results

配列の操作

検索結果の配列から表示するTweet作成

Page 45: Favtile ~never write JS again~

•i++にさよなら!

•varにさよなら!

よく使うパターンが文法にある

Page 46: Favtile ~never write JS again~

Why CoffeeScript?

•美しい

•可読性

•パターン

Page 47: Favtile ~never write JS again~

Why CoffeeScript?

•美しい

•可読性

•パターン}早く実装

Page 48: Favtile ~never write JS again~

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

Page 49: Favtile ~never write JS again~

今日話すこと

•自己紹介

•なぜCoffeeScript?

•次の一歩

Page 50: Favtile ~never write JS again~

CoffeeScript使ってみたくない?

Page 51: Favtile ~never write JS again~

CoffeeScriptを知る

http://coffeescript.org/

Page 52: Favtile ~never write JS again~

CoffeeScriptを知る

http://bit.ly/zPaBZo

Page 53: Favtile ~never write JS again~

CoffeeScriptを知る

http://bit.ly/AqW9FG

Page 54: Favtile ~never write JS again~

一番効率の良い学習方法

Page 55: Favtile ~never write JS again~

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

Page 56: Favtile ~never write JS again~

Come on!GeekHouseOkinawa!

Page 57: Favtile ~never write JS again~

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

Come on!Okinawa.rb