Lightning introduction to CoffeeScript 20131005

Lightning Introduction to CoffeeScript

2013-10-05

後藤

3

WHAT is CoffeeScript?

4


- 2011 年 GitHub で公開

- スクリプト言語拡張子は .coffee

- ひとことで言うと（文法が）「イケてる JavaScript 」

- 原則 JavaScript に変換して使う

- 洗練された文法 Ruby や Python にならった各種文法

5


JavaScript の課題

- ブラウザごとの方言 -> jQuery などのライブラリが解決

- 読みやすい？ -> CoffeeScript が解決

7

Why CoffeeScript?

- シンプルに書ける / 読める Ruby と Python のいいとこどり

- Ruby を使える人なら学習コストが低い

- 数年で廃れるかもしれないけど ...

Ruby とはちがう文法の考え方が身につく

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

http://nodejs.org/

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 - 基本文法

# リテラル # 数値型53.14

# 文字列型‘one’“hello”

# 論理値型true && yes && onfalse || 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 = 10name = ‘goto’

# 英数字が使用可

snake_case = ‘snake’CamelCase = ‘camel’# アンダースコアや# 大文字も使用可能

$abc = 10$O$ = 100# $も使用可能

20

HOW - 基本文法

# 条件分岐 ifif a = ‘apple’ 3else if a = ‘orange’ 1else 0

if 0 < a < 5 ‘a is between 0 and

5’# この書き方も可

a = [1, 3, 5]x = 3if x in a ‘x is in a’# この書き方も可

if x isnt ‘good’ ‘unhappy’# 等価チェックは# == != ではなく# is isnt を使おう

21

HOW - 基本文法

# 条件分岐 switch whenflag = "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 - 基本文法

# ループ whilei = 0while on console.log i i++ if i > 3 break# こちらもインデントで

# 後置書式a = 1 if true

b = 0.5b++ while 12 / b < 3# if for while が使用可

HOW - 関数

25

HOW - 基本文法

# 関数# 1行で書く場合sum = (x, y) -> x + ysum(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.logp Dog.clsmethod # =>

1

# 継承

class Dog extends Wolf

# 継承は extends で

HOW - その他もろもろ

32


# 変数の存在チェック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]# もっと# 気持ち悪い書き方もできる

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

40

NEXT

インストールしましょうhttp://coffeescript.org/

npm

https://npmjs.org/

入門リソース- ドットインストール- 「つくって覚える CoffeeScript 入門」

http://coffeescript.org/

https://npmjs.org/

Lightning introduction to CoffeeScript 20131005

Documents

Transcript of Lightning introduction to CoffeeScript 20131005