SlideShare ist ein Scribd-Unternehmen logo
1 von 23
Downloaden Sie, um offline zu lesen
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
おわり

Weitere ähnliche Inhalte

Ähnlich wie CoffeeScript

すごいHaskell読書会#1 in 大阪
すごいHaskell読書会#1 in 大阪すごいHaskell読書会#1 in 大阪
すごいHaskell読書会#1 in 大阪
yashigani
 
EucalyptusのHadoopクラスタとJaqlでBasket解析をしてHiveとの違いを味わってみました
EucalyptusのHadoopクラスタとJaqlでBasket解析をしてHiveとの違いを味わってみましたEucalyptusのHadoopクラスタとJaqlでBasket解析をしてHiveとの違いを味わってみました
EucalyptusのHadoopクラスタとJaqlでBasket解析をしてHiveとの違いを味わってみました
Etsuji Nakai
 
第3回BDD勉強会
第3回BDD勉強会第3回BDD勉強会
第3回BDD勉強会
zakihaya
 

Ähnlich wie 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勉強会
 

Mehr von Ryo Maruyama

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

Mehr von 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章 イントロダクション
 

Kürzlich hochgeladen

Kürzlich hochgeladen (11)

論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
 
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
 
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsUtilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
 
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
 
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
 
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
 
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
 

CoffeeScript