SlideShare a Scribd company logo
1 of 23
Download to read offline
CoffeeScript


                2012/01/18
       h13i32maru@Twitter
         maruyama-r@KLab
自己紹介
• 丸山 亮(h13i32maru) 最近はJSを触ってます
• KLab株式会社所属
32   http://blog.h13i32maru.jp

     http://twitter.com/h13i32maru

     https://www.facebook.com/ryo.maruyama

     https://github.com/h13i32maru
JavaScript
JavaScriptって結構大変

• ファイルのinclude機構が無い
• プロトタイプ指向
• 動的スコープ
• 不思議なthis
• などなど
そこで、
CoffeeScript
CoffeeScriptとは

• JavaScriptにコンパイル可能な小さな言語
• RubyやPythonから色々取り込んでる
• @jashkenasが作ってる
 - 他にもruby-processingなど
• http://coffeescript.org/
Language Reference
        翻訳してみた
http://d.hatena.ne.jp/h13i32maru/
      20120119/1326955300
関数
func = (arg1, arg2) -> arg1 * arg2




func = (arg1, arg2) ->
 x = arg1 * arg2
 x * x
レキシカルスコープ
outer = 1
changeNumbers = ->
  inner = -1
  outer = 10

inner = 20

changeNumbers()

alert [outer, inner]
内包表記
eat food for food in ['toast', 'cheese', 'wine']




countdown = (num * num for num in [10..1])




yearsOld = max: 10, ida: 9, tim: 11
ages = for child, age of yearsOld
   "#{child} is #{age}"
配列のスライスとレンジ
numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
middle = numbers[3..6]




numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
numbers[3..6] = [-3, -4, -5, -6]
比較
if x is 0

if y isnt 100



cholesterol = 127

healthy = 200 > cholesterol > 60
存在演算子
solipsism = true if mind? and not world?




zip = lottery.drawWinner?().address?.zipcode
クラスと継承
class Animal
  constructor: (@name) ->

  move: (meters) ->
    alert @name + " moved #{meters}m."

class Snake extends Animal
  move: ->
    alert "Slithering..."
    super 5
展開代入
theBait   = 1000
theSwitch = 0

[theBait, theSwitch] = [theSwitch, theBait]
関数束縛
Account = (customer, cart) ->
  @customer = customer
  @cart = cart

  $('.shopping_cart').bind 'click', (event) =>
    @customer.purchase @cart
文字列内変数展開
author = "Wittgenstein"
quote = "A picture is a fact. -- #{ author }"
全てが式
i = 0
res = while i isnt 10
  i++
  i * i

#1,4,9,16,25,36,49,64,81,100
alert res
ビルドシステム

• Cake : CoffeeScript付属のビルドシステム
• MakeやRakeみたいなもの
• ファイルの結合もできるよ!
他にも

• YAML的なオブジェクトの書き方
• if/unlessの後置記法
• JavaScriptの埋め込み
• ヒアドキュメント
• 可変引数
• デフォルト引数 などなど
翻訳をしてみて

• コードのおかげでなんとなく翻訳できる
• 7600文字の翻訳で10時間くらい
• ジョークっぽいのがあったけど上手く訳せず
• 実は既に翻訳があったりするwww
おわり

More Related Content

Similar to CoffeeScript

⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2Nishida Kansuke
 
Favtile ~never write JS again~
Favtile ~never write JS again~Favtile ~never write JS again~
Favtile ~never write JS again~hanachin
 
Ember.js Tokyo event 2014/09/22 (Japanese)
Ember.js Tokyo event  2014/09/22 (Japanese)Ember.js Tokyo event  2014/09/22 (Japanese)
Ember.js Tokyo event 2014/09/22 (Japanese)Yuki Shimada
 
すごいHaskell読書会#1 in 大阪
すごいHaskell読書会#1 in 大阪すごいHaskell読書会#1 in 大阪
すごいHaskell読書会#1 in 大阪yashigani
 
フロント作業の効率化
フロント作業の効率化フロント作業の効率化
フロント作業の効率化Yuto Yoshinari
 
「スピード」と「品質」を実現するPHP開発チームの取り組み~AngularJS+FuelPHP+AspectMock~
「スピード」と「品質」を実現するPHP開発チームの取り組み~AngularJS+FuelPHP+AspectMock~「スピード」と「品質」を実現するPHP開発チームの取り組み~AngularJS+FuelPHP+AspectMock~
「スピード」と「品質」を実現するPHP開発チームの取り組み~AngularJS+FuelPHP+AspectMock~leverages_event
 
Pythonで始めるDropboxAPI
Pythonで始めるDropboxAPIPythonで始めるDropboxAPI
Pythonで始めるDropboxAPIDaisuke Igarashi
 
JavaScript/CSS 2015 Autumn
JavaScript/CSS 2015 AutumnJavaScript/CSS 2015 Autumn
JavaScript/CSS 2015 AutumnKoji Ishimoto
 
第3回 JavaScriptから始めるプログラミング2016
第3回 JavaScriptから始めるプログラミング2016第3回 JavaScriptから始めるプログラミング2016
第3回 JavaScriptから始めるプログラミング2016kyoto university
 
PHPerのためのSwift入門
PHPerのためのSwift入門PHPerのためのSwift入門
PHPerのためのSwift入門Tomoki Hasegawa
 
プログラムの読み方
プログラムの読み方プログラムの読み方
プログラムの読み方Takuya Otani
 
㉘HTML5+CSS3でアニメーション!
㉘HTML5+CSS3でアニメーション!㉘HTML5+CSS3でアニメーション!
㉘HTML5+CSS3でアニメーション!Nishida Kansuke
 
EucalyptusのHadoopクラスタとJaqlでBasket解析をしてHiveとの違いを味わってみました
EucalyptusのHadoopクラスタとJaqlでBasket解析をしてHiveとの違いを味わってみましたEucalyptusのHadoopクラスタとJaqlでBasket解析をしてHiveとの違いを味わってみました
EucalyptusのHadoopクラスタとJaqlでBasket解析をしてHiveとの違いを味わってみましたEtsuji Nakai
 
Ruby を用いた超絶技巧プログラミング(夏のプログラミングシンポジウム 2012)
Ruby を用いた超絶技巧プログラミング(夏のプログラミングシンポジウム 2012)Ruby を用いた超絶技巧プログラミング(夏のプログラミングシンポジウム 2012)
Ruby を用いた超絶技巧プログラミング(夏のプログラミングシンポジウム 2012)mametter
 
Functional JavaScript with Lo-Dash.js
Functional JavaScript with Lo-Dash.jsFunctional JavaScript with Lo-Dash.js
Functional JavaScript with Lo-Dash.jsShogo Sensui
 
第3回BDD勉強会
第3回BDD勉強会第3回BDD勉強会
第3回BDD勉強会zakihaya
 

Similar to CoffeeScript (20)

⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
 
Haikara
HaikaraHaikara
Haikara
 
Favtile ~never write JS again~
Favtile ~never write JS again~Favtile ~never write JS again~
Favtile ~never write JS again~
 
Aaなゲームをjsで
AaなゲームをjsでAaなゲームをjsで
Aaなゲームをjsで
 
Aaなゲームをjsで
AaなゲームをjsでAaなゲームをjsで
Aaなゲームをjsで
 
Ember.js Tokyo event 2014/09/22 (Japanese)
Ember.js Tokyo event  2014/09/22 (Japanese)Ember.js Tokyo event  2014/09/22 (Japanese)
Ember.js Tokyo event 2014/09/22 (Japanese)
 
すごいHaskell読書会#1 in 大阪
すごいHaskell読書会#1 in 大阪すごいHaskell読書会#1 in 大阪
すごいHaskell読書会#1 in 大阪
 
フロント作業の効率化
フロント作業の効率化フロント作業の効率化
フロント作業の効率化
 
Arctic.js
Arctic.jsArctic.js
Arctic.js
 
「スピード」と「品質」を実現するPHP開発チームの取り組み~AngularJS+FuelPHP+AspectMock~
「スピード」と「品質」を実現するPHP開発チームの取り組み~AngularJS+FuelPHP+AspectMock~「スピード」と「品質」を実現するPHP開発チームの取り組み~AngularJS+FuelPHP+AspectMock~
「スピード」と「品質」を実現するPHP開発チームの取り組み~AngularJS+FuelPHP+AspectMock~
 
Pythonで始めるDropboxAPI
Pythonで始めるDropboxAPIPythonで始めるDropboxAPI
Pythonで始めるDropboxAPI
 
JavaScript/CSS 2015 Autumn
JavaScript/CSS 2015 AutumnJavaScript/CSS 2015 Autumn
JavaScript/CSS 2015 Autumn
 
第3回 JavaScriptから始めるプログラミング2016
第3回 JavaScriptから始めるプログラミング2016第3回 JavaScriptから始めるプログラミング2016
第3回 JavaScriptから始めるプログラミング2016
 
PHPerのためのSwift入門
PHPerのためのSwift入門PHPerのためのSwift入門
PHPerのためのSwift入門
 
プログラムの読み方
プログラムの読み方プログラムの読み方
プログラムの読み方
 
㉘HTML5+CSS3でアニメーション!
㉘HTML5+CSS3でアニメーション!㉘HTML5+CSS3でアニメーション!
㉘HTML5+CSS3でアニメーション!
 
EucalyptusのHadoopクラスタとJaqlでBasket解析をしてHiveとの違いを味わってみました
EucalyptusのHadoopクラスタとJaqlでBasket解析をしてHiveとの違いを味わってみましたEucalyptusのHadoopクラスタとJaqlでBasket解析をしてHiveとの違いを味わってみました
EucalyptusのHadoopクラスタとJaqlでBasket解析をしてHiveとの違いを味わってみました
 
Ruby を用いた超絶技巧プログラミング(夏のプログラミングシンポジウム 2012)
Ruby を用いた超絶技巧プログラミング(夏のプログラミングシンポジウム 2012)Ruby を用いた超絶技巧プログラミング(夏のプログラミングシンポジウム 2012)
Ruby を用いた超絶技巧プログラミング(夏のプログラミングシンポジウム 2012)
 
Functional JavaScript with Lo-Dash.js
Functional JavaScript with Lo-Dash.jsFunctional JavaScript with Lo-Dash.js
Functional JavaScript with Lo-Dash.js
 
第3回BDD勉強会
第3回BDD勉強会第3回BDD勉強会
第3回BDD勉強会
 

More from Ryo Maruyama

Prototypeベース in JavaScript
Prototypeベース in JavaScriptPrototypeベース in JavaScript
Prototypeベース in JavaScriptRyo Maruyama
 
Webサーバの性能測定
Webサーバの性能測定Webサーバの性能測定
Webサーバの性能測定Ryo Maruyama
 
画像を使わずにデザイン
画像を使わずにデザイン画像を使わずにデザイン
画像を使わずにデザインRyo Maruyama
 
勝手に改造 Chrome to Phone
勝手に改造 Chrome to Phone勝手に改造 Chrome to Phone
勝手に改造 Chrome to PhoneRyo Maruyama
 
レインボーテーブルを使ったハッシュの復号とSalt
レインボーテーブルを使ったハッシュの復号とSaltレインボーテーブルを使ったハッシュの復号とSalt
レインボーテーブルを使ったハッシュの復号とSaltRyo Maruyama
 
プログラミング言語Ruby 1章 イントロダクション
プログラミング言語Ruby 1章 イントロダクションプログラミング言語Ruby 1章 イントロダクション
プログラミング言語Ruby 1章 イントロダクションRyo Maruyama
 

More from Ryo Maruyama (15)

jQuery勉強会#4
jQuery勉強会#4jQuery勉強会#4
jQuery勉強会#4
 
jQuery勉強会#3
jQuery勉強会#3jQuery勉強会#3
jQuery勉強会#3
 
Prototypeベース in JavaScript
Prototypeベース in JavaScriptPrototypeベース in JavaScript
Prototypeベース in JavaScript
 
jQuery勉強会#2
jQuery勉強会#2jQuery勉強会#2
jQuery勉強会#2
 
Webサーバの性能測定
Webサーバの性能測定Webサーバの性能測定
Webサーバの性能測定
 
Sphinx/reST
Sphinx/reSTSphinx/reST
Sphinx/reST
 
JSDoc ToolKit
JSDoc ToolKitJSDoc ToolKit
JSDoc ToolKit
 
JavaScript入門
JavaScript入門JavaScript入門
JavaScript入門
 
画像を使わずにデザイン
画像を使わずにデザイン画像を使わずにデザイン
画像を使わずにデザイン
 
AWS Vol.1
AWS Vol.1AWS Vol.1
AWS Vol.1
 
HTML Launcher
HTML LauncherHTML Launcher
HTML Launcher
 
C2DM
C2DMC2DM
C2DM
 
勝手に改造 Chrome to Phone
勝手に改造 Chrome to Phone勝手に改造 Chrome to Phone
勝手に改造 Chrome to Phone
 
レインボーテーブルを使ったハッシュの復号とSalt
レインボーテーブルを使ったハッシュの復号とSaltレインボーテーブルを使ったハッシュの復号とSalt
レインボーテーブルを使ったハッシュの復号とSalt
 
プログラミング言語Ruby 1章 イントロダクション
プログラミング言語Ruby 1章 イントロダクションプログラミング言語Ruby 1章 イントロダクション
プログラミング言語Ruby 1章 イントロダクション
 

CoffeeScript