SlideShare a Scribd company logo
1 of 40
Lightning Introduction to
CoffeeScript
2013-10-05
後藤
WHAT
3
WHAT is CoffeeScript?
4
WHAT is CoffeeScript?
- 2011 年 GitHub で公開
- スクリプト言語
拡張子は .coffee
- ひとことで言うと
(文法が)「イケてる JavaScript 」
- 原則 JavaScript に変換して使う
- 洗練された文法
Ruby や Python にならった各種文法
5
WHAT is CoffeeScript?
JavaScript の課題
- ブラウザごとの方言
-> jQuery などのライブラリが解決
- 読みやすい?
-> CoffeeScript が解決
WHY
7
Why CoffeeScript?
- シンプルに書ける / 読める
Ruby と Python のいいとこどり
- Ruby を使える人なら学習コストが低い
- 数年で廃れるかもしれないけど ...
Ruby とはちがう文法の考え方が身につく
HOW
HOW - インストール
10
HOW - インストール
Node.js を使いましょう
1. Node.js をインストール
http://nodejs.org/
2. CoffeeScript をインストール
$ npm install coffee-script
3. 確認
$ coffee -v
... CoffeeScript version 1.6.3
node.js.png
HOW - 実行(基本)
12
HOW - 実行(基本)
Ruby と同じ 2 つの実行方法
1. 対話型
$ coffee
coffee> 1 + 2
coffee> a = 10
* irb と同じ
2. スクリプト
$ coffee hello.coffee
* coffee コマンドにファイル名を渡す
HOW - Hello, World!
14
HOW - Hello, World!
# file: hello.coffee
console.log(“Hello, World”)
# 標準出力は console.log で
console.log “Hello, World”
# Ruby と同じく () は省略可
# コメントは # 始まり
# 複数行コメントは ### ~ ###
HOW - 基本文法
16
HOW - 基本文法
# リテラル
# 数値型
5
3.14
# 文字列型
‘one’
“hello”
# 論理値型
true && yes && on
false || no || off
# 正規表現型
/regexp/
# 配列
[1, 3, 5, ‘last’]
# オブジェクト
p = {
name: ‘goto’,
favorite: ‘apple’
}
17
HOW - 基本文法
# コレクション型その 1
# 配列
a = [1, 3, 5, ‘last’]
a2 = [
1
3
]
# この書き方も可
a[1] # => 3
# インデックスアクセス可
a[0..2] # => [1, 3, 5]
a[0...2] # => [1, 3]
# Ruby と同じく
# スライスも可
18
HOW - 基本文法
# コレクション型その 2
# オブジェクト
p = {
name: ‘goto’,
favorite: ‘apple’
}
p =
name: ‘goto’
favorite: ‘apple’
# インデントだけの
# この書き方も可
p.name # => ‘goto’
p[‘name’] # => ‘goto’
# どちらでもアクセス可
19
HOW - 基本文法
# 変数
x = 10
name = ‘goto’
# 英数字が使用可
snake_case = ‘snake’
CamelCase = ‘camel’
# アンダースコアや
# 大文字も使用可能
$abc = 10
$O$ = 100
# $ も使用可能
20
HOW - 基本文法
# 条件分岐 if
if a = ‘apple’
3
else if a = ‘orange’
1
else
0
if 0 < a < 5
‘a is between 0 and 5’
# この書き方も可
a = [1, 3, 5]
x = 3
if x in a
‘x is in a’
# この書き方も可
if x isnt ‘good’
‘unhappy’
# 等価チェックは
# == != ではなく
# is isnt を使おう
21
HOW - 基本文法
# 条件分岐 switch when
flag = "K"
switch flag
when 'M'
then console.log " 明
治 "
when 'T'
then console.log " 大
正 "
else
console.log “ 慶応?”
# switch when then else
# を使う
# then を省略して
# インデントにすることも可
switch flag
when 'M'
console.log “ 明治”
# 各 when の最後に
# break は不要
22
HOW - 基本文法
# ループ for
a = [1, 3, 5]
for ele in a
console.log ele
# 配列には in で
for ele in [0..10]
console.log ele
# 範囲は [first..last]
で
p = {
name: ‘goto’,
favorite: ‘apple’
}
for k, v of p
console.log [k, v]
# オブジェクトには of で
23
HOW - 基本文法
# ループ while
i = 0
while on
console.log i
i++
if i > 3
break
# こちらもインデントで
# 後置書式
a = 1 if true
b = 0.5
b++ while 12 / b < 3
# if for while が使用可
HOW - 関数
25
HOW - 基本文法
# 関数
# 1 行で書く場合
sum = (x, y) -> x + y
sum(3,5) # => 8
# = () -> で関数定義
# () の中が引数
# -> の後が関数の本体
# 複数行で書く場合
average = (x, y, z) ->
total = x + y + z
total / 3
# 本体はインデントする
# return が省略されたら
# 最後の式の値が
# 返り値となる
26
HOW - 基本文法
# 関数
sum 3, 5 # => 8
# () は省略が可能
average = (x, y, z) ->
sum = (p, q, r) ->
p + q + r
(sum x, y, z) / 3
# 関数内関数も可
HOW - クラス
28
HOW - クラス
# クラス定義
class Dog
constructor: (name) ->
this.name = name
# class キーワードで定義
# もちろんインデント
# constructor は
# コンストラクタ
# インスタンス生成
d1 = new Dog(‘Pochi’)
# new クラス名 で
# インスタンス生成
# new 時に constroctor
の
# メソッドが呼ばれる
console.log d1.name
# そのまま
# プロパティアクセス可
29
HOW - クラス
# this. の別の書き方
class Dog
constructor: (name) ->
@name = name
# 現在のオブジェクトの
# プロパティ指定は
# this. 以外に
# @... が使用可
# constructor の省略書式
class Dog
constructor: (@name) ->
# constructor の引数に
# @ 始まりにすると
# @... = ...
# が自動的に実行される
30
HOW - クラス
# クラスメソッド
class Dog
@clsmethod: () -> 1
# クラスメソッドは
# @... で定義する
p = console.log
p Dog.clsmethod # => 1
# 継承
class Dog extends Wolf
# 継承は extends で
HOW - その他もろもろ
32
HOW - その他もろもろ
# 変数の存在チェック
a = 1
if a?
console.log ‘OK’
# 変数名のあとに ?
# メソッドの () 省略
hello = ->
return ‘hello’
hello # => [Function]
hello() # => ‘hello’
# 引数を渡さない場合は
# () は省略不可
33
HOW - その他もろもろ
# nil っぽい値
# 1 null
# 2 undefined
# 3 NaN
null
# 空である
undefined
# 未定義 / 未代入である
NaN
# 変な数字( 0 除算結果な
ど)
34
HOW - その他もろもろ
# true と false の
# バリエーション
# 1 yes no
# 2 on off
# yes on
# ともに true と同じ
# no off
# ともに false と同じ
# 文字列への式の組み込み
“3 + 4 = #{3 + 4}”
# Ruby と同じく
# “” の中の #{} の中は
# 評価される
35
HOW - その他もろもろ
# 内包表記
a = [1, 2, 3]
a_squared =
(x * x for x in a)
# => [1, 4, 9]
# Ruby の map 的なことも
# 1 行で書ける!
a = [0..20]
a7 =
(x for x in a
when x % 7 is 0)
# => [0, 7, 14]
# ( when の前は改行な
し)
# Ruby の select 的なこ
と
# も 1 行で書ける!!
36
HOW - その他もろもろ
# 内包表記つづき
s =
java: 1
ruby: 2
coffee: 3
pair =
([k, v] for k, v of s)
# オブジェクトも
# もちろん回せる
a = [1, 2, 3]
a_squared = for x in a
x * x
# => [1, 4, 9]
# もっと
# 気持ち悪い書き方もできる
HOW - 実行(応用)
38
HOW - 実行(応用)
1. コンパイル
$ coffee -c hello.coffee (単一のスクリプト)
$ coffee -c . (カレントディレクトリ全体)
2. 常駐自動コンパイル
$ coffee -c -w .
指定されたファイルやディレクトリを監視し続け
coffee のソースが更新されたら都度 js にコンパイル
3. ディレクトリ指定
$ coffee -o dest src
src 内の coffee ソースをコンパイルして dest ディレクトリに
格納
node.js.png
NEXT
40
NEXT
インストールしましょう
http://coffeescript.org/
npm
https://npmjs.org/
入門リソース
- ドットインストール
- 「つくって覚える CoffeeScript 入門」

More Related Content

What's hot

lazy var の特徴を知る #cocoa_kansai #cswift
lazy var の特徴を知る #cocoa_kansai #cswiftlazy var の特徴を知る #cocoa_kansai #cswift
lazy var の特徴を知る #cocoa_kansai #cswiftTomohiro Kumagai
 
Debug Hacks at Security and Programming camp 2011
Debug Hacks at Security and Programming camp 2011 Debug Hacks at Security and Programming camp 2011
Debug Hacks at Security and Programming camp 2011 Hiro Yoshioka
 
仕事でも Groovy を使おう!
仕事でも Groovy を使おう!仕事でも Groovy を使おう!
仕事でも Groovy を使おう!Oda Shinsuke
 
ac-mozc (kansai-emacs #x09)
ac-mozc (kansai-emacs #x09)ac-mozc (kansai-emacs #x09)
ac-mozc (kansai-emacs #x09)igjit
 
Javascript1-1
Javascript1-1Javascript1-1
Javascript1-1Jun Chiba
 
Programming camp 2010 debug hacks
Programming camp 2010 debug hacksProgramming camp 2010 debug hacks
Programming camp 2010 debug hacksHiro Yoshioka
 
From Java To Clojure
From Java To ClojureFrom Java To Clojure
From Java To ClojureKent Ohashi
 
Clustering -Elbow Chart-
Clustering -Elbow Chart-Clustering -Elbow Chart-
Clustering -Elbow Chart-Yuu Kimy
 
シェル芸で使いたくてLINQが使えるコマンドを作ったらawkでよかった話
シェル芸で使いたくてLINQが使えるコマンドを作ったらawkでよかった話シェル芸で使いたくてLINQが使えるコマンドを作ったらawkでよかった話
シェル芸で使いたくてLINQが使えるコマンドを作ったらawkでよかった話xztaityozx
 
ライブコーディング(?)で学ぶPerlオブジェクト指向
ライブコーディング(?)で学ぶPerlオブジェクト指向ライブコーディング(?)で学ぶPerlオブジェクト指向
ライブコーディング(?)で学ぶPerlオブジェクト指向azuma satoshi
 
PerlのOOPにおいて、コンストラクタ 内でメンバ関数を呼ぶ方法は?(Perl Beginners #15)
PerlのOOPにおいて、コンストラクタ 内でメンバ関数を呼ぶ方法は?(Perl Beginners #15)PerlのOOPにおいて、コンストラクタ 内でメンバ関数を呼ぶ方法は?(Perl Beginners #15)
PerlのOOPにおいて、コンストラクタ 内でメンバ関数を呼ぶ方法は?(Perl Beginners #15)CL0CL
 
Let's reading OSS's source
Let's reading OSS's sourceLet's reading OSS's source
Let's reading OSS's sourcetemama
 

What's hot (14)

lazy var の特徴を知る #cocoa_kansai #cswift
lazy var の特徴を知る #cocoa_kansai #cswiftlazy var の特徴を知る #cocoa_kansai #cswift
lazy var の特徴を知る #cocoa_kansai #cswift
 
TextMate
TextMateTextMate
TextMate
 
Debug Hacks at Security and Programming camp 2011
Debug Hacks at Security and Programming camp 2011 Debug Hacks at Security and Programming camp 2011
Debug Hacks at Security and Programming camp 2011
 
仕事でも Groovy を使おう!
仕事でも Groovy を使おう!仕事でも Groovy を使おう!
仕事でも Groovy を使おう!
 
ac-mozc (kansai-emacs #x09)
ac-mozc (kansai-emacs #x09)ac-mozc (kansai-emacs #x09)
ac-mozc (kansai-emacs #x09)
 
Hachioji.pm15
Hachioji.pm15Hachioji.pm15
Hachioji.pm15
 
Javascript1-1
Javascript1-1Javascript1-1
Javascript1-1
 
Programming camp 2010 debug hacks
Programming camp 2010 debug hacksProgramming camp 2010 debug hacks
Programming camp 2010 debug hacks
 
From Java To Clojure
From Java To ClojureFrom Java To Clojure
From Java To Clojure
 
Clustering -Elbow Chart-
Clustering -Elbow Chart-Clustering -Elbow Chart-
Clustering -Elbow Chart-
 
シェル芸で使いたくてLINQが使えるコマンドを作ったらawkでよかった話
シェル芸で使いたくてLINQが使えるコマンドを作ったらawkでよかった話シェル芸で使いたくてLINQが使えるコマンドを作ったらawkでよかった話
シェル芸で使いたくてLINQが使えるコマンドを作ったらawkでよかった話
 
ライブコーディング(?)で学ぶPerlオブジェクト指向
ライブコーディング(?)で学ぶPerlオブジェクト指向ライブコーディング(?)で学ぶPerlオブジェクト指向
ライブコーディング(?)で学ぶPerlオブジェクト指向
 
PerlのOOPにおいて、コンストラクタ 内でメンバ関数を呼ぶ方法は?(Perl Beginners #15)
PerlのOOPにおいて、コンストラクタ 内でメンバ関数を呼ぶ方法は?(Perl Beginners #15)PerlのOOPにおいて、コンストラクタ 内でメンバ関数を呼ぶ方法は?(Perl Beginners #15)
PerlのOOPにおいて、コンストラクタ 内でメンバ関数を呼ぶ方法は?(Perl Beginners #15)
 
Let's reading OSS's source
Let's reading OSS's sourceLet's reading OSS's source
Let's reading OSS's source
 

Viewers also liked

Fashion Marketing Project: "Flash Your Style"
Fashion Marketing Project: "Flash Your Style"Fashion Marketing Project: "Flash Your Style"
Fashion Marketing Project: "Flash Your Style"Camilla Rizzo
 
Photography Extension Task
Photography Extension TaskPhotography Extension Task
Photography Extension Taskcloestead
 
Design Pro Forma (with improvements)
Design Pro Forma (with improvements)Design Pro Forma (with improvements)
Design Pro Forma (with improvements)cloestead
 
Digital graphics pro forma
Digital graphics pro formaDigital graphics pro forma
Digital graphics pro formacloestead
 
Pre-Production Techniques Pro-Forma
Pre-Production Techniques Pro-FormaPre-Production Techniques Pro-Forma
Pre-Production Techniques Pro-Formacloestead
 
дифференциация учащихся
дифференциация учащихсядифференциация учащихся
дифференциация учащихсяAV_Smirnova
 
On Going Evaluations (unfinished)
On Going Evaluations (unfinished)On Going Evaluations (unfinished)
On Going Evaluations (unfinished)cloestead
 
Madariaga dorretxea xeritxu
Madariaga dorretxea xeritxuMadariaga dorretxea xeritxu
Madariaga dorretxea xeritxuxeritxu
 
Lo4 Pro Forma
Lo4 Pro Forma Lo4 Pro Forma
Lo4 Pro Forma cloestead
 
Orlando Economy Update - 2015 Q2
Orlando Economy Update - 2015 Q2Orlando Economy Update - 2015 Q2
Orlando Economy Update - 2015 Q2Bobby Palta
 
LO2 Workbook
LO2 WorkbookLO2 Workbook
LO2 Workbookcloestead
 
Explanations easy cut II
Explanations easy cut IIExplanations easy cut II
Explanations easy cut IImyeasycut
 
Idea development pro forma
Idea development pro formaIdea development pro forma
Idea development pro formacloestead
 
ReklamAction Performans Retargeting
ReklamAction Performans RetargetingReklamAction Performans Retargeting
ReklamAction Performans RetargetingReklamAction
 
Iraitz paratua power point xerach
Iraitz paratua power point xerachIraitz paratua power point xerach
Iraitz paratua power point xerachxeritxu
 
Google glasses
Google glassesGoogle glasses
Google glassesxme17
 
National Union of Journalists Presentation Part 1 (improved)
National Union of Journalists Presentation Part 1 (improved)National Union of Journalists Presentation Part 1 (improved)
National Union of Journalists Presentation Part 1 (improved)cloestead
 

Viewers also liked (20)

Fashion Marketing Project: "Flash Your Style"
Fashion Marketing Project: "Flash Your Style"Fashion Marketing Project: "Flash Your Style"
Fashion Marketing Project: "Flash Your Style"
 
Photography Extension Task
Photography Extension TaskPhotography Extension Task
Photography Extension Task
 
Design Pro Forma (with improvements)
Design Pro Forma (with improvements)Design Pro Forma (with improvements)
Design Pro Forma (with improvements)
 
Digital graphics pro forma
Digital graphics pro formaDigital graphics pro forma
Digital graphics pro forma
 
Pre-Production Techniques Pro-Forma
Pre-Production Techniques Pro-FormaPre-Production Techniques Pro-Forma
Pre-Production Techniques Pro-Forma
 
дифференциация учащихся
дифференциация учащихсядифференциация учащихся
дифференциация учащихся
 
On Going Evaluations (unfinished)
On Going Evaluations (unfinished)On Going Evaluations (unfinished)
On Going Evaluations (unfinished)
 
Madariaga dorretxea xeritxu
Madariaga dorretxea xeritxuMadariaga dorretxea xeritxu
Madariaga dorretxea xeritxu
 
Lo4 Pro Forma
Lo4 Pro Forma Lo4 Pro Forma
Lo4 Pro Forma
 
Orlando Economy Update - 2015 Q2
Orlando Economy Update - 2015 Q2Orlando Economy Update - 2015 Q2
Orlando Economy Update - 2015 Q2
 
LO2 Workbook
LO2 WorkbookLO2 Workbook
LO2 Workbook
 
Explanations easy cut II
Explanations easy cut IIExplanations easy cut II
Explanations easy cut II
 
Asif jamal
Asif jamalAsif jamal
Asif jamal
 
Idea development pro forma
Idea development pro formaIdea development pro forma
Idea development pro forma
 
ReklamAction Performans Retargeting
ReklamAction Performans RetargetingReklamAction Performans Retargeting
ReklamAction Performans Retargeting
 
The Role of Songs in Commercials
The Role of Songs in CommercialsThe Role of Songs in Commercials
The Role of Songs in Commercials
 
8
88
8
 
Iraitz paratua power point xerach
Iraitz paratua power point xerachIraitz paratua power point xerach
Iraitz paratua power point xerach
 
Google glasses
Google glassesGoogle glasses
Google glasses
 
National Union of Journalists Presentation Part 1 (improved)
National Union of Journalists Presentation Part 1 (improved)National Union of Journalists Presentation Part 1 (improved)
National Union of Journalists Presentation Part 1 (improved)
 

Similar to Lightning introduction to CoffeeScript 20131005

第1回勉強会スライド
第1回勉強会スライド第1回勉強会スライド
第1回勉強会スライドkoturn 0;
 
Start!! Ruby
Start!! RubyStart!! Ruby
Start!! Rubymitim
 
Cli mini Hack!#1 ~Terminalとの親睦を深めよう~
Cli mini Hack!#1 ~Terminalとの親睦を深めよう~Cli mini Hack!#1 ~Terminalとの親睦を深めよう~
Cli mini Hack!#1 ~Terminalとの親睦を深めよう~Kei IWASAKI
 
普通のプログラミング言語R
普通のプログラミング言語R普通のプログラミング言語R
普通のプログラミング言語RShuyo Nakatani
 
C・C++用のコードカバレッジツールを自作してみた話
C・C++用のコードカバレッジツールを自作してみた話C・C++用のコードカバレッジツールを自作してみた話
C・C++用のコードカバレッジツールを自作してみた話simotin13 Miyazaki
 
プログラミング言語 Ruby 2章 Rubyプログラムの構造と実行
プログラミング言語 Ruby 2章 Rubyプログラムの構造と実行プログラミング言語 Ruby 2章 Rubyプログラムの構造と実行
プログラミング言語 Ruby 2章 Rubyプログラムの構造と実行monglee
 
Pythonista による Pythonista のための Scala 紹介 in BPStudy #49
Pythonista による Pythonista のための Scala 紹介 in BPStudy #49Pythonista による Pythonista のための Scala 紹介 in BPStudy #49
Pythonista による Pythonista のための Scala 紹介 in BPStudy #49shoma h
 
Swiftによる関数型プログラミング超入門
Swiftによる関数型プログラミング超入門Swiftによる関数型プログラミング超入門
Swiftによる関数型プログラミング超入門Hisakuni Fujimoto
 
入門 超絶技巧プログラミング !
入門 超絶技巧プログラミング !入門 超絶技巧プログラミング !
入門 超絶技巧プログラミング !Nobutada Matsubara
 
Ruby紹介(pdf)
Ruby紹介(pdf)Ruby紹介(pdf)
Ruby紹介(pdf)Gohryuh
 
Scalaで萌える関数型プログラミング[1.1.RC1]
Scalaで萌える関数型プログラミング[1.1.RC1]Scalaで萌える関数型プログラミング[1.1.RC1]
Scalaで萌える関数型プログラミング[1.1.RC1]Ra Zon
 
Cookpad 17 day Tech internship 2017 言語処理系入門 Rubyをコンパイルしよう
Cookpad 17 day Tech internship 2017 言語処理系入門 RubyをコンパイルしようCookpad 17 day Tech internship 2017 言語処理系入門 Rubyをコンパイルしよう
Cookpad 17 day Tech internship 2017 言語処理系入門 RubyをコンパイルしようKoichi Sasada
 
プログラミング言語Cyanの紹介
プログラミング言語Cyanの紹介プログラミング言語Cyanの紹介
プログラミング言語Cyanの紹介baban ba-n
 
ebisu.rb #19 超実践 super
ebisu.rb #19 超実践 superebisu.rb #19 超実践 super
ebisu.rb #19 超実践 superKaito Minatoya
 
関数型志向Python - LLまつり2013
関数型志向Python - LLまつり2013関数型志向Python - LLまつり2013
関数型志向Python - LLまつり2013Esehara Shigeo
 
関数型言語&形式的手法セミナー(3)
関数型言語&形式的手法セミナー(3)関数型言語&形式的手法セミナー(3)
関数型言語&形式的手法セミナー(3)啓 小笠原
 
LT#7 Hello coffeeしてきた
LT#7 Hello coffeeしてきたLT#7 Hello coffeeしてきた
LT#7 Hello coffeeしてきたShingo Inoue
 

Similar to Lightning introduction to CoffeeScript 20131005 (20)

第1回勉強会スライド
第1回勉強会スライド第1回勉強会スライド
第1回勉強会スライド
 
Start!! Ruby
Start!! RubyStart!! Ruby
Start!! Ruby
 
Cli mini Hack!#1 ~Terminalとの親睦を深めよう~
Cli mini Hack!#1 ~Terminalとの親睦を深めよう~Cli mini Hack!#1 ~Terminalとの親睦を深めよう~
Cli mini Hack!#1 ~Terminalとの親睦を深めよう~
 
普通のプログラミング言語R
普通のプログラミング言語R普通のプログラミング言語R
普通のプログラミング言語R
 
C・C++用のコードカバレッジツールを自作してみた話
C・C++用のコードカバレッジツールを自作してみた話C・C++用のコードカバレッジツールを自作してみた話
C・C++用のコードカバレッジツールを自作してみた話
 
プログラミング言語 Ruby 2章 Rubyプログラムの構造と実行
プログラミング言語 Ruby 2章 Rubyプログラムの構造と実行プログラミング言語 Ruby 2章 Rubyプログラムの構造と実行
プログラミング言語 Ruby 2章 Rubyプログラムの構造と実行
 
Pythonista による Pythonista のための Scala 紹介 in BPStudy #49
Pythonista による Pythonista のための Scala 紹介 in BPStudy #49Pythonista による Pythonista のための Scala 紹介 in BPStudy #49
Pythonista による Pythonista のための Scala 紹介 in BPStudy #49
 
Swiftによる関数型プログラミング超入門
Swiftによる関数型プログラミング超入門Swiftによる関数型プログラミング超入門
Swiftによる関数型プログラミング超入門
 
入門 超絶技巧プログラミング !
入門 超絶技巧プログラミング !入門 超絶技巧プログラミング !
入門 超絶技巧プログラミング !
 
Ruby紹介(pdf)
Ruby紹介(pdf)Ruby紹介(pdf)
Ruby紹介(pdf)
 
SwiftSession5
SwiftSession5SwiftSession5
SwiftSession5
 
Scalaで萌える関数型プログラミング[1.1.RC1]
Scalaで萌える関数型プログラミング[1.1.RC1]Scalaで萌える関数型プログラミング[1.1.RC1]
Scalaで萌える関数型プログラミング[1.1.RC1]
 
Cookpad 17 day Tech internship 2017 言語処理系入門 Rubyをコンパイルしよう
Cookpad 17 day Tech internship 2017 言語処理系入門 RubyをコンパイルしようCookpad 17 day Tech internship 2017 言語処理系入門 Rubyをコンパイルしよう
Cookpad 17 day Tech internship 2017 言語処理系入門 Rubyをコンパイルしよう
 
プログラミング言語Cyanの紹介
プログラミング言語Cyanの紹介プログラミング言語Cyanの紹介
プログラミング言語Cyanの紹介
 
Tottoruby 20130119
Tottoruby 20130119Tottoruby 20130119
Tottoruby 20130119
 
ebisu.rb #19 超実践 super
ebisu.rb #19 超実践 superebisu.rb #19 超実践 super
ebisu.rb #19 超実践 super
 
らくちん Go言語
らくちん Go言語らくちん Go言語
らくちん Go言語
 
関数型志向Python - LLまつり2013
関数型志向Python - LLまつり2013関数型志向Python - LLまつり2013
関数型志向Python - LLまつり2013
 
関数型言語&形式的手法セミナー(3)
関数型言語&形式的手法セミナー(3)関数型言語&形式的手法セミナー(3)
関数型言語&形式的手法セミナー(3)
 
LT#7 Hello coffeeしてきた
LT#7 Hello coffeeしてきたLT#7 Hello coffeeしてきた
LT#7 Hello coffeeしてきた
 

Lightning introduction to CoffeeScript 20131005

  • 4. 4 WHAT is CoffeeScript? - 2011 年 GitHub で公開 - スクリプト言語 拡張子は .coffee - ひとことで言うと (文法が)「イケてる JavaScript 」 - 原則 JavaScript に変換して使う - 洗練された文法 Ruby や Python にならった各種文法
  • 5. 5 WHAT is CoffeeScript? JavaScript の課題 - ブラウザごとの方言 -> jQuery などのライブラリが解決 - 読みやすい? -> CoffeeScript が解決
  • 6. WHY
  • 7. 7 Why CoffeeScript? - シンプルに書ける / 読める Ruby と Python のいいとこどり - Ruby を使える人なら学習コストが低い - 数年で廃れるかもしれないけど ... Ruby とはちがう文法の考え方が身につく
  • 8. HOW
  • 10. 10 HOW - インストール Node.js を使いましょう 1. Node.js をインストール http://nodejs.org/ 2. CoffeeScript をインストール $ npm install coffee-script 3. 確認 $ coffee -v ... CoffeeScript version 1.6.3 node.js.png
  • 12. 12 HOW - 実行(基本) Ruby と同じ 2 つの実行方法 1. 対話型 $ coffee coffee> 1 + 2 coffee> a = 10 * irb と同じ 2. スクリプト $ coffee hello.coffee * coffee コマンドにファイル名を渡す
  • 13. HOW - Hello, World!
  • 14. 14 HOW - Hello, World! # file: hello.coffee console.log(“Hello, World”) # 標準出力は console.log で console.log “Hello, World” # Ruby と同じく () は省略可 # コメントは # 始まり # 複数行コメントは ### ~ ###
  • 16. 16 HOW - 基本文法 # リテラル # 数値型 5 3.14 # 文字列型 ‘one’ “hello” # 論理値型 true && yes && on false || no || off # 正規表現型 /regexp/ # 配列 [1, 3, 5, ‘last’] # オブジェクト p = { name: ‘goto’, favorite: ‘apple’ }
  • 17. 17 HOW - 基本文法 # コレクション型その 1 # 配列 a = [1, 3, 5, ‘last’] a2 = [ 1 3 ] # この書き方も可 a[1] # => 3 # インデックスアクセス可 a[0..2] # => [1, 3, 5] a[0...2] # => [1, 3] # Ruby と同じく # スライスも可
  • 18. 18 HOW - 基本文法 # コレクション型その 2 # オブジェクト p = { name: ‘goto’, favorite: ‘apple’ } p = name: ‘goto’ favorite: ‘apple’ # インデントだけの # この書き方も可 p.name # => ‘goto’ p[‘name’] # => ‘goto’ # どちらでもアクセス可
  • 19. 19 HOW - 基本文法 # 変数 x = 10 name = ‘goto’ # 英数字が使用可 snake_case = ‘snake’ CamelCase = ‘camel’ # アンダースコアや # 大文字も使用可能 $abc = 10 $O$ = 100 # $ も使用可能
  • 20. 20 HOW - 基本文法 # 条件分岐 if if a = ‘apple’ 3 else if a = ‘orange’ 1 else 0 if 0 < a < 5 ‘a is between 0 and 5’ # この書き方も可 a = [1, 3, 5] x = 3 if x in a ‘x is in a’ # この書き方も可 if x isnt ‘good’ ‘unhappy’ # 等価チェックは # == != ではなく # is isnt を使おう
  • 21. 21 HOW - 基本文法 # 条件分岐 switch when flag = "K" switch flag when 'M' then console.log " 明 治 " when 'T' then console.log " 大 正 " else console.log “ 慶応?” # switch when then else # を使う # then を省略して # インデントにすることも可 switch flag when 'M' console.log “ 明治” # 各 when の最後に # break は不要
  • 22. 22 HOW - 基本文法 # ループ for a = [1, 3, 5] for ele in a console.log ele # 配列には in で for ele in [0..10] console.log ele # 範囲は [first..last] で p = { name: ‘goto’, favorite: ‘apple’ } for k, v of p console.log [k, v] # オブジェクトには of で
  • 23. 23 HOW - 基本文法 # ループ while i = 0 while on console.log i i++ if i > 3 break # こちらもインデントで # 後置書式 a = 1 if true b = 0.5 b++ while 12 / b < 3 # if for while が使用可
  • 25. 25 HOW - 基本文法 # 関数 # 1 行で書く場合 sum = (x, y) -> x + y sum(3,5) # => 8 # = () -> で関数定義 # () の中が引数 # -> の後が関数の本体 # 複数行で書く場合 average = (x, y, z) -> total = x + y + z total / 3 # 本体はインデントする # return が省略されたら # 最後の式の値が # 返り値となる
  • 26. 26 HOW - 基本文法 # 関数 sum 3, 5 # => 8 # () は省略が可能 average = (x, y, z) -> sum = (p, q, r) -> p + q + r (sum x, y, z) / 3 # 関数内関数も可
  • 28. 28 HOW - クラス # クラス定義 class Dog constructor: (name) -> this.name = name # class キーワードで定義 # もちろんインデント # constructor は # コンストラクタ # インスタンス生成 d1 = new Dog(‘Pochi’) # new クラス名 で # インスタンス生成 # new 時に constroctor の # メソッドが呼ばれる console.log d1.name # そのまま # プロパティアクセス可
  • 29. 29 HOW - クラス # this. の別の書き方 class Dog constructor: (name) -> @name = name # 現在のオブジェクトの # プロパティ指定は # this. 以外に # @... が使用可 # constructor の省略書式 class Dog constructor: (@name) -> # constructor の引数に # @ 始まりにすると # @... = ... # が自動的に実行される
  • 30. 30 HOW - クラス # クラスメソッド class Dog @clsmethod: () -> 1 # クラスメソッドは # @... で定義する p = console.log p Dog.clsmethod # => 1 # 継承 class Dog extends Wolf # 継承は extends で
  • 32. 32 HOW - その他もろもろ # 変数の存在チェック a = 1 if a? console.log ‘OK’ # 変数名のあとに ? # メソッドの () 省略 hello = -> return ‘hello’ hello # => [Function] hello() # => ‘hello’ # 引数を渡さない場合は # () は省略不可
  • 33. 33 HOW - その他もろもろ # nil っぽい値 # 1 null # 2 undefined # 3 NaN null # 空である undefined # 未定義 / 未代入である NaN # 変な数字( 0 除算結果な ど)
  • 34. 34 HOW - その他もろもろ # true と false の # バリエーション # 1 yes no # 2 on off # yes on # ともに true と同じ # no off # ともに false と同じ # 文字列への式の組み込み “3 + 4 = #{3 + 4}” # Ruby と同じく # “” の中の #{} の中は # 評価される
  • 35. 35 HOW - その他もろもろ # 内包表記 a = [1, 2, 3] a_squared = (x * x for x in a) # => [1, 4, 9] # Ruby の map 的なことも # 1 行で書ける! a = [0..20] a7 = (x for x in a when x % 7 is 0) # => [0, 7, 14] # ( when の前は改行な し) # Ruby の select 的なこ と # も 1 行で書ける!!
  • 36. 36 HOW - その他もろもろ # 内包表記つづき s = java: 1 ruby: 2 coffee: 3 pair = ([k, v] for k, v of s) # オブジェクトも # もちろん回せる a = [1, 2, 3] a_squared = for x in a x * x # => [1, 4, 9] # もっと # 気持ち悪い書き方もできる
  • 38. 38 HOW - 実行(応用) 1. コンパイル $ coffee -c hello.coffee (単一のスクリプト) $ coffee -c . (カレントディレクトリ全体) 2. 常駐自動コンパイル $ coffee -c -w . 指定されたファイルやディレクトリを監視し続け coffee のソースが更新されたら都度 js にコンパイル 3. ディレクトリ指定 $ coffee -o dest src src 内の coffee ソースをコンパイルして dest ディレクトリに 格納 node.js.png
  • 39. NEXT