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 - 基本文法
# リテラル # 数値型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
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 入門」
Top Related