Lightning introduction to CoffeeScript 20131005

Lightning Introduction to
CoffeeScript
2013-10-05
後藤

4
WHAT is CoffeeScript?
- 2011 年 GitHub で公開
- スクリプト言語
拡張子は .coffee
- ひとことで言うと
（文法が）「イケてる JavaScript 」
- 原則 JavaScript に変換して使う
- 洗練された文法
Ruby や Python にならった各種文法

5
WHAT is CoffeeScript?
JavaScript の課題
- ブラウザごとの方言
-> jQuery などのライブラリが解決
- 読みやすい？
-> CoffeeScript が解決

7
Why CoffeeScript?
- シンプルに書ける / 読める
Ruby と Python のいいとこどり
- Ruby を使える人なら学習コストが低い
- 数年で廃れるかもしれないけど ...
Ruby とはちがう文法の考え方が身につく

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
HOW - 実行（基本）
Ruby と同じ 2 つの実行方法
1. 対話型
$ coffee
coffee> 1 + 2
coffee> a = 10
* irb と同じ
2. スクリプト
$ coffee hello.coffee
* coffee コマンドにファイル名を渡す

14
HOW - Hello, World!
# file: hello.coffee
console.log(“Hello, World”)
# 標準出力は console.log で
console.log “Hello, World”
# Ruby と同じく () は省略可
# コメントは # 始まり
# 複数行コメントは ### ~ ###

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’,
}
p =
name: ‘goto’
# インデントだけの
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’,
}
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 が使用可

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
# 関数内関数も可

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 で

32
HOW - その他もろもろ
# 変数の存在チェック
a = 1
if a?
console.log ‘OK’
# 変数名のあとに ?
# メソッドの () 省略
hello = ->
return ‘hello’
hello # => [Function]
hello() # => ‘hello’
# 引数を渡さない場合は
# () は省略不可

33
# nil っぽい値
# 1 null
# 2 undefined
# 3 NaN
null
# 空である
undefined
# 未定義 / 未代入である
NaN
# 変な数字（ 0 除算結果な
ど）

34
# true と false の
# バリエーション
# 1 yes no
# 2 on off
# yes on
# ともに true と同じ
# no off
# ともに false と同じ
# 文字列への式の組み込み
“3 + 4 = #{3 + 4}”
# Ruby と同じく
# “” の中の #{} の中は
# 評価される

35
# 内包表記
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
# 内包表記つづき
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
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

40
NEXT
インストールしましょう
http://coffeescript.org/
npm
https://npmjs.org/
入門リソース
- ドットインストール
- 「つくって覚える CoffeeScript 入門」

Lightning introduction to CoffeeScript 20131005

More Related Content

What's hot (14)

Viewers also liked (20)

Similar to Lightning introduction to CoffeeScript 20131005 (20)

Lightning introduction to CoffeeScript 20131005