CoffeeScript – “$ ->”? 無名コールバック関数の記法について

2016-06-28 / tau / コメントする

概要

CoffeeScriptのコードには、jQueryの利用時を含めて以下のような無名のコールバック関数の記述が頻繁に現れる。

$ ->
  $("p").css("color", "blue")

1 2	$ -> $("p").css("color", "blue")

これについて、改めて整理してみた。

無名関数のクロージャ

CoffeeScriptの以下のコードを考える。

->
  console.log("closure")

1 2	-> console.log("closure")

これをコンパイルしたJavaScriptのコードは以下のようになる。

// Generated by CoffeeScript 1.10.0
(function() {
  (function() {
    return console.log("closure");
  });

}).call(this);

// Generated by CoffeeScript 1.10.0

(function() {

return console.log("closure");

});

}).call(this);

“->”以下インデント部分が一つの関数とみなされ、無名関数として定義されている。

コールバックの登録

生真面目な書き方

無名関数をコールバック関数として、呼び出し元の関数の引数で登録するのに、生真面目に引数を()で括って書くと以下のようになる。

caller = (callback) ->
  console.log("before call")
  callback()
  console.log("after call")

caller(-> console.log("called"))

# 実行結果
# before call
# called
# after call

caller = (callback) ->

console.log("before call")

callback()

console.log("after call")

caller(-> console.log("called"))

# 実行結果

# before call

# called

# after call

実行結果は意図したとおり、呼び出し元の中でコールバックが呼ばれている。

これをコンパイルしたJavaScriptコードは以下の通りで、無名関数が引数として渡されている。

// Generated by CoffeeScript 1.10.0
(function() {
  var caller;

  caller = function(callback) {
    console.log("before call");
    callback();
    return console.log("after call");
  };

  caller(function() {
    return console.log("called");
  });

}).call(this);

// Generated by CoffeeScript 1.10.0

(function() {

var caller;

caller = function(callback) {

console.log("before call");

callback();

return console.log("after call");

};

caller(function() {

return console.log("called");

});

}).call(this);

()を省略した書き方

CoffeeScriptでは関数の引数を(）で囲わずに書けるので、以下のように書ける。

caller -> console.log("called")

1	caller -> console.log("called")

実行結果は変わらず、これをコンパイルしたJavaScriptコードも上と全く同じ。

引数の改行～失敗

CoffeeScriptはかなり自由に改行することができるので、先のコードの引数を”->”の直後で改行してみる。

caller ->
console.log("called")

# 実行結果
# before call
# after call
# called

caller ->

console.log("called")

# 実行結果

# before call

# after call

# called

結果は想定外で、呼び出し元でコールバックが実行されていない。

JavaScriptへのコンパイル結果は、以下のように少し変化している。

  caller(function() {});

  console.log("called");

caller(function() {});

console.log("called");

想定外の動作の理由は、”caller ->”の次のconsole.log()の行が前の行と独立した命令として解釈されたため。

呼び出し元に内容がない無名関数”->”が渡される
- コールバック関数は内容がないため無反応
console.log()が実行される

引数の改行～インデントが必須

ここでconsole.log()の行をインデントすると、console.logの行が関数callerの内容と解釈されるため、console.log()は無名関数”->”の実行内容とみなされる。

caller ->
  console.log("called")

# 実行結果
# before call
# called
# after call

caller ->

console.log("called")

# 実行結果

# before call

# called

# after call

JavaScriptコードも以下のように意図した結果になった。

  caller(function() {
    return console.log("called");
  });

caller(function() {

return console.log("called");

});

引数の改行～別の想定外

コールバックを引数として()で括ったうえで改行した場合、また異なる結果となる。

caller(->
console.log("called"))

# 実行結果
# called
# before call
# after call

caller(->

console.log("called"))

# 実行結果

# called

# before call

# after call

コンパイル結果を見ると一目瞭然で、

  caller(function() {}, console.log("called"));

1	caller(function() {}, console.log("called"));

先のCoffeeScriptコードと等価なコードは以下の通りで、上のJavaScriptと同じコードにコンパイルされる(“->”を()で括らないと”想定外のcomma”エラーになる)。

caller((->), console.log("called"))

1	caller((->), console.log("called"))

呼び出しの際に定義された引数の数より多く引数を渡しても過剰な引数は渡されないが、その引数が実行可能な文の場合には実行される。

この例ではcosole.log()は引数として渡されないが、呼び出し元の関数実行前にconsole.log()文として実行され、その後に内容なしの無名関数をコールバックとして呼び出し元が実行されるため、意図とは異なる結果になる。

なお()をつける場合でも、インデントによって意図した結果となる(最後の”)”はconsole.log()文の末尾につけてもok)。

caller(->
  console.log("called")
)

# 実行結果
# before call
# called
# after call

caller(->

console.log("called")

)

# 実行結果

# before call

# called

# after call

複数行のコールバック

複数行のコールバックは、各行のインデントを揃えて書く(インデントのレベルが深いと、その行で”unexpected indentation”エラー)。

caller ->
  console.log("called")
  console.log("really called")

caller ->

console.log("called")

console.log("really called")

内容の一部だけを改行するとエラー。

caller -> console.log("called")
  console.log("really called") # unexpected indentation

1 2	caller -> console.log("called") console.log("really called") # unexpected indentation

引数を持つコールバック

コールバックが最後の引数の場合

以下のように、最後の引数のコールバック関数をインデント付で改行すればok。処理内容が複数行でもok。

この形は、jQueryのイベントハンドラ・アタッチメントに出てくる。

caller = (arg, callback) ->
  console.log("argument is '#{arg}'")
  callback()
  console.log("after call")

caller "event", ->
  console.log("called")

# 実行結果
# argument is 'event'
# called
# after call

caller = (arg, callback) ->

console.log("argument is '#{arg}'")

callback()

console.log("after call")

caller "event", ->

console.log("called")

# 実行結果

# argument is 'event'

# called

# after call

コールバックが最後以外の引数の場合

これは”unexpected ,”エラー。

caller = (callback, x) ->
  console.log(callback(x))

caller (x)-> x * x, 3

caller = (callback, x) ->

console.log(callback(x))

caller (x)-> x * x, 3

無名関数を()で括ると意図通り実行。

caller ((x)-> x * x), 3

1	caller ((x)-> x * x), 3

これもok！

caller ((x)-> x * x)
, 3

1 2	caller ((x)-> x * x) , 3

敢えてこう書けるが、段々ややこしくなる。

caller ((x)->
  x * x)
  , 3

caller ((x)->

x * x)

, 3

残念ながら()なしはだめ。

caller (x)->
  x * x
  , 3

caller (x)->

x * x

, 3

CoffeeScript – コールバックと無名関数

2016-06-28 / tau / コメントする

基本形

引数なしの場合

呼び出し元でコールバック関数を引数として、それが実行されるよう実装。

呼び出されるコールバック関数を定義し、その関数名を呼び出し元に引数として渡す。

caller = (callee) ->
  callee()

callback = ->
  console.log("Callback called")

caller(callback)

# 実行結果
# Callback called

caller = (callee) ->

callee()

callback = ->

console.log("Callback called")

caller(callback)

# 実行結果

# Callback called

引数ありの場合

コールバックが引数を取る場合、呼び出し元でコールバック関数と引数を受け取るよう実装。

コールバック関数を実装し、その関数名を引数とともに呼び出し元に渡す。

caller = (callee, a, b) ->
  callee(a, b)

add = (x, y) ->
  x + y

mul = (x, y) ->
  x * y

console.log caller(add, 2, 3)
console.log caller(mul, 2, 3)

# 実行結果
# 5
# 6

caller = (callee, a, b) ->

callee(a, b)

add = (x, y) ->

x + y

mul = (x, y) ->

x * y

console.log caller(add, 2, 3)

console.log caller(mul, 2, 3)

# 実行結果

# 5

# 6

無名関数を使う方法

“無名関数の記法について”も参照。

引数なしの場合

コールバック関数を新たに定義せず、無名関数として定義して呼び出し元に渡す方法。

無名関数は、関数名を省略していきなり”->”で始める。

caller = (callback) ->
  console.log("Calling callback")
  callback();
 
caller ->
  console.log("Callback called")
 
# 実行結果
# Calling callback
# Callback called

caller = (callback) ->

console.log("Calling callback")

callback();

caller ->

console.log("Callback called")

# 実行結果

# Calling callback

# Callback called

引数ありの場合

引数がある場合、関数名を省略して”(引数) ->”で始める。

このとき、無名コールバック関数全体を”()”で囲わないと、”unexpexted ,”(予想外のcomma)エラーになるので注意。

caller = (callback, x) ->
  console.log("Calling callback")
  callback(x)

caller(((x) -> console.log("Callback called: #{x * 2}")), 3)

# 実行結果
# Calling callback
# Callback called: 6
# 無名関数全体を()で囲わないと"error: unexpected ,"になる

caller = (callback, x) ->

console.log("Calling callback")

callback(x)

caller(((x) -> console.log("Callback called: #{x * 2}")), 3)

# 実行結果

# Calling callback

# Callback called: 6

# 無名関数全体を()で囲わないと"error: unexpected ,"になる

改行可能

複数行にわたる無名関数を引数として渡すとき、()内で改行して渡せる

caller = (callback) ->
  console.log("Calling callback")
  callback()

caller ->
  console.log("Callback called")
  console.log("Multiline is OK")

# 実行結果
# Calling callback
# Callback called
# Multiline

caller = (callback) ->

console.log("Calling callback")

callback()

caller ->

console.log("Callback called")

console.log("Multiline is OK")

# 実行結果

# Calling callback

# Callback called

# Multiline

より複雑な内容の関数もok。ただし無名関数が引数を持つ時には()で括らないといけない

caller = (callback, x) ->
  console.log("Calling callback")
  callback()

caller(((x) ->
  if x % 2 == 0
    console.log("even")
  else
    console.log("odd")
  ), 5)

# 実行結果
# Calling callback
# odd

caller = (callback, x) ->

console.log("Calling callback")

callback()

caller(((x) ->

if x % 2 == 0

console.log("even")

else

console.log("odd")

), 5)

# 実行結果

# Calling callback

# odd

即時関数のdoはエラー

引数にコールバックを渡すときにdoを付けてしまうと、その場で実行された上で、「関数ではない」とエラーになる。

caller = (callback) ->
  console.log("Calling callback")
  callback();

caller(do -> console.log("Callback called"))

# 実行結果
# Callback called
# Calling callback
# TypeError: callback is not a function

caller = (callback) ->

console.log("Calling callback")

callback();

caller(do -> console.log("Callback called"))

# 実行結果

# Callback called

# Calling callback

# TypeError: callback is not a function

coffee-script.js

2016-06-28 / tau / コメントする

概要

CoffeeScriptをコンパイルなしで、HTMLの<script>タグに直接書ける。

スクリプト指定は<script type=”text/coffeescript”></script>となる。

導入

CoffeeScriptからJavaScriptへのパースを行うファイルを公式サイトの“text/coffeescript” Script Tagsからダウンロード。

このファイル(coffee-script.js)をサーバに配置に配置し、スクリプトを書くHTMLから呼び出す。

このほか、ネット上のcoffee-script.jsのURLを指定して取り込む方法もあり。

基本例

<!DOCTYPE html>

<html lang="ja">

<head>
<meta charset="utf-8">
<title>CoffeeScript Test</title>
<link rel="stylesheet" href="./coffee.css">
<script type="text/javascript" src="./coffee/coffee-script.js"></script>
</head>

<body>

<h1 id="header"></h1>

<script type="text/coffeescript">
elment = document.getElementById("header")
elment.innerHTML = "CoffeeScriptへようこそ"
</script>

</body>

</html>

<!DOCTYPE html>

<head>

<title>CoffeeScript Test</title>

</head>

<body>

elment = document.getElementById("header")

elment.innerHTML = "CoffeeScriptへようこそ"

</script>

</body>

</html>

CoffeeScript – HTMLから外部スクリプトファイルを実行

2016-06-26 / tau / コメントする

HTMLファイル

test_htmml.html

<html lang="ja">


<head>
<meta charset="utf-8">
<title>CoffeeScript Test</title>
<link rel="stylesheet" href="./coffee.css">
</head>

<body>

<h1 id="header"></h1>

<script type="text/javascript" src="./coffee/test_html.js">
</script>


</body>

</html>

<head>

<title>CoffeeScript Test</title>

</head>

<body>

</script>

</body>

</html>

外部スクリプトファイル

test_html.coffee

func = ->
  elment = document.getElementById("header")
  elment.innerHTML = "CoffeeScriptへようこそ"

func()

func = ->

elment = document.getElementById("header")

elment.innerHTML = "CoffeeScriptへようこそ"

func()

上記のCoffeeScriptファイルをコンパイル

coffee -c test_html.coffee

1	coffee -c test_html.coffee

コンパイル後のファイルは拡張子がjsになり、test_html.jsとなる。

このファイルを上のtest_html.htmlファイルのscript要素から読める場所に配置。

CoffeeScript – 関数

2016-06-26 / tau / コメントする

通常の関数

CoffeeScript特有の記法による。

関数は最後に演算された結果を戻り値とするようコンパイルされる。
戻り値を戻したくない場合は、引数なしのreturn文を明記する。

# 引数をとる場合
add = (x, y) ->
  x + y

# 引数がない場合
disp = ->
  alert("foo")

# 引数をとる場合

add = (x, y) ->

x + y

# 引数がない場合

disp = ->

alert("foo")

即時関数

引数の有無、値の渡し方などによって、以下から選択。

do ->
  console.log("anonymus") # anonymus

str = "hello"
do (str) ->
  console.log(str) # hello

s = "anonymus!"
do (str = s) ->
  console.log(str) # anonymus!

do ->

console.log("anonymus") # anonymus

str = "hello"

do (str) ->

console.log(str) # hello

s = "anonymus!"

do (str = s) ->

console.log(str) # anonymus!

コールバック

parentFunction = (callbackFunction, a, b) ->
  callbackFunction(a, b)

add = (x, y) ->
  x + y

mul = (x, y) ->
  x * y

console.log parentFunction(add, 2, 3) # 5
console.log parentFunction(mul, 2, 3) # 6

parentFunction = (callbackFunction, a, b) ->

callbackFunction(a, b)

add = (x, y) ->

x + y

mul = (x, y) ->

x * y

console.log parentFunction(add, 2, 3) # 5

console.log parentFunction(mul, 2, 3) # 6

CoffeeScript – 内包表記による配列の操作

2016-06-26 / tau / コメントする

配列の生成と要素の割り当て

内包表記によりリストを生成し、配列に代入することができる。

# 配列の生成：定数
array = (1 for n in [1..5])
console.log array # [ 1, 1, 1, 1, 1 ]

# 配列の生成：変数
array = (n for n in [1..5])
console.log array # [ 1, 2, 3, 4, 5 ]

# 配列の生成：定数

array = (1 for n in [1..5])

console.log array # [ 1, 1, 1, 1, 1 ]

# 配列の生成：変数

array = (n for n in [1..5])

console.log array # [ 1, 2, 3, 4, 5 ]

要素の取り出し

配列リストの要素を一つずつ列挙できる。

# 配列の要素の和
sum = 0
sum += x for x in array
console.log sum # 15

# 配列の要素の和

sum = 0

sum += x for x in array

console.log sum # 15

二次元配列の生成

ややこしいやり方

(content++ for c in [1..4])で要素数が4のリストを生成
そのリストをgridに3回加えている

# 二次元配列の生成
grid = []
content = 10
for r in [1..3]
  grid.push((content++ for c in [1..4]))
console.log grid
# [ [ 10, 11, 12, 13 ], [ 14, 15, 16, 17 ], [ 18, 19, 20, 21 ] ]

# 二次元配列の生成

grid = []

content = 10

for r in [1..3]

grid.push((content++ for c in [1..4]))

console.log grid

# [ [ 10, 11, 12, 13 ], [ 14, 15, 16, 17 ], [ 18, 19, 20, 21 ] ]

シンプルなやり方

(content++ for c in [1..4])で要素数が4のリストを生成
そのリストを要素とする要素数が3の要素を生成

# もっとシンプルな二次元配列の生成
content = 10
grid = ((content++ for c in [1..4]) for r in [1..3])
console.log grid
# [ [ 10, 11, 12, 13 ], [ 14, 15, 16, 17 ], [ 18, 19, 20, 21 ] ]

# もっとシンプルな二次元配列の生成

content = 10

grid = ((content++ for c in [1..4]) for r in [1..3])

console.log grid

# [ [ 10, 11, 12, 13 ], [ 14, 15, 16, 17 ], [ 18, 19, 20, 21 ] ]

要素の参照

添字をパラメータとして内包表記で順次参照できる。

# 二次元配列の要素の和
sum = 0
sum += grid[r][c] for c in [0...4] for r in [0...3]
console.log sum # 186

# 二次元配列の要素の和

sum = 0

sum += grid[r][c] for c in [0...4] for r in [0...3]

console.log sum # 186

あるいは直接要素を指定し、入れ子で要素の配列を列挙参照することもできる。

# 要素数を意識しない二次元配列の要素の和
sum = 0
sum += x for x in rowArray for rowArray in grid
console.log sum # 186

# 要素数を意識しない二次元配列の要素の和

sum = 0

sum += x for x in rowArray for rowArray in grid

console.log sum # 186

要素の再設定

よくある要素の設定。

# 既存配列の要素の再設定(1次元)
array = [1, 2, 3]
array[i] = 0 for i in [0...array.length]
console.log array # [ 0, 0, 0 ]

# 既存配列の要素の再設定(2次元)
array = [
  [1, 2, 3]
  [4, 5, 6]
]
array[r][c] = 0 for r in [0...array.length] for c in [0...array[0].length]
console.log array # [ [ 0, 0, 0 ], [ 0, 0, 0 ] ]

# 既存配列の要素の再設定(1次元)

array = [1, 2, 3]

array[i] = 0 for i in [0...array.length]

console.log array # [ 0, 0, 0 ]

# 既存配列の要素の再設定(2次元)

array = [

[1, 2, 3]

[4, 5, 6]

]

array[r][c] = 0 for r in [0...array.length] for c in [0...array[0].length]

console.log array # [ [ 0, 0, 0 ], [ 0, 0, 0 ] ]

CoffeeScript – 配列

2016-06-26 / tau / コメントする

基本的な配列の扱い

配列リテラル

# 配列

array = [1, 2, 3]
console.log array.length # 3 配列の要素数
console.log array[0], array[1], array[2] # 1 2 3 要素番号は0から

array = [
  [11, 12, 13, 14]
  [21, 22, 23, 24]
  [31, 32, 33, 34]
]
console.log array
# [ [ 11, 12, 13, 14 ], [ 21, 22, 23, 24 ], [ 31, 32, 33, 34 ] ]
console.log array.length # 3 1次元目の要素数(行数)
console.log array[0].length # 4 2次元目の要素数(列数)

# 配列

array = [1, 2, 3]

console.log array.length # 3 配列の要素数

console.log array[0], array[1], array[2] # 1 2 3 要素番号は0から

array = [

[11, 12, 13, 14]

[21, 22, 23, 24]

[31, 32, 33, 34]

]

console.log array

# [ [ 11, 12, 13, 14 ], [ 21, 22, 23, 24 ], [ 31, 32, 33, 34 ] ]

console.log array.length # 3 1次元目の要素数(行数)

console.log array[0].length # 4 2次元目の要素数(列数)

要素の参照と代入

先頭要素の添字は0

a = [1, 2, 3, 4]
console.log(a[0], a[1]) # 1 2

a[3] = 5
console.log(a) # [1, 2, 3, 5]

a = [1, 2, 3, 4]

console.log(a[0], a[1]) # 1 2

a[3] = 5

console.log(a) # [1, 2, 3, 5]

各種操作

要素の追加・削除

先頭要素の追加・抜き出し

a = [1, 2, 3, 4]

# 先頭に要素を追加
a.unshift(0)
console.log(a) # [0, 1, 2, 3, 4]

# 先頭から要素を抜き出し
e = a.shift()
console.log(e, a) # 0 [1, 2, 3, 4

a = [1, 2, 3, 4]

# 先頭に要素を追加

a.unshift(0)

console.log(a) # [0, 1, 2, 3, 4]

# 先頭から要素を抜き出し

e = a.shift()

console.log(e, a) # 0 [1, 2, 3, 4

末尾要素の追加・抜き出し

a = [1, 2, 3, 4]

# 末尾に要素を追加
a.push(5)
console.log(a) # [1, 2, 3, 4, 5]

# 末尾から要素を抜き出し
e = a.pop()
console.log(a, e) # [1, 2, 3, 4] 5

a = [1, 2, 3, 4]

# 末尾に要素を追加

a.push(5)

console.log(a) # [1, 2, 3, 4, 5]

# 末尾から要素を抜き出し

e = a.pop()

console.log(a, e) # [1, 2, 3, 4] 5

部分配列の抜き出し

元の配列は保持される。

# 配列の一部を抜き出す
a = [0, 1, 2, 3, 4, 5]
console.log(a[2..4])  # [2, 3, 4]
console.log(a[2...4]) # [2, 3]

# 配列の一部を抜き出す

a = [0, 1, 2, 3, 4, 5]

console.log(a[2..4]) # [2, 3, 4]

console.log(a[2...4]) # [2, 3]

要素の存在チェック

# 要素が含まれるかどうかを調べる
a = [0, 2, 4, 6, 8]
console.log(if 6 in a then "yes" else "no") # yes
console.log(if 3 in a then "yes" else "no") # no

# 要素が含まれるかどうかを調べる

a = [0, 2, 4, 6, 8]

console.log(if 6 in a then "yes" else "no") # yes

console.log(if 3 in a then "yes" else "no") # no

分割代入

個別要素を一括指定して取り出すことができる。

[one, two, three] = [1, 2, 3]
console.log(one, two, three)

1 2	[one, two, three] = [1, 2, 3] console.log(one, two, three)

入れ替え作業も可能。

[boss, vice] = ["John", "Luice"]
[boss, vice] = [vice, boss]
console.log(boss, vice)

[boss, vice] = ["John", "Luice"]

[boss, vice] = [vice, boss]

console.log(boss, vice)

内包表記

内包表記による配列の操作を参照。

CoffeeScript – 演算

2016-06-26 / tau / コメントする

数値演算

四則演算

+	加算
–	減算
*	乗算
**	べき乗
/	除算：小数の丸めはなし	11 / 4 → 2.75
//	除算の商	11 // 4 → 2
%	除算の剰余	11 % 4 → 3
%%	%と同じ

CoffeeScriptからJavaScrioptへコンパイルした結果は以下のようになる。

11 / 4	11 / 4
11 // 4	Math.floor(11 / 4)
11 % 4	11 % 4
11 %% 4	modulo(11, 4)

インクリメント／デクリメント

インクリメント(++)、デクリメント(–)演算子は、前置・後置で使用可能で、後置は参照後に、前置は参照前に演算が行われる。

a = 0
console.log(a++) # 0
console.log(++a) # 2
console.log(a--) # 2
console.log(--a) # 0

a = 0

console.log(a++) # 0

console.log(++a) # 2

console.log(a--) # 2

console.log(--a) # 0

変数の値が小数部を持つと、演算誤差が発生する。

a = 0.1
console.log(a++) # 0.1
console.log(++a) # 2.1
console.log(a--) # 2.1
console.log(--a) # 0.10000000000000009

a = 0.1

console.log(a++) # 0.1

console.log(++a) # 2.1

console.log(a--) # 2.1

console.log(--a) # 0.10000000000000009

代入演算子

数値演算については、”+=”のような代入演算子が各四則演算子について使える。

丸め処理

Mathライブラリのクラスメソッドを使う。

	小数点以下の処理
Math.floor()	切り捨て
Math.ceil()	切り上げ
Math.round()	四捨五入

文字列演算

結合

+演算子は二つの文字列を結合する。

片方が文字列でもう片方が数値の場合、数値が文字列に変換されて結合される。

演算	結果
“abc” + “def”	“abcdef”
“abc” + 123	“abc123”
123 + “abc”	“123abc”

代入演算子

代入演算子の場合、元の変数かオペランドのいずれか一方が文字数なら、文字列として結合される。

数値と文字列の変換

数値→文字列の変換

12.34 + “deg”
String(12.34) + “deg”
12.34.toString() + “deg”

文字列→数値の変換

Number(“34.56”)
parseInt(“34.56”, 10)
parseFloat(“34.56”)
parseInt(“ffff”, 10)→65535
- parseInt(“0xffff”, 10)→65535
parseInt(“22”, 10)→18
- parseInt(“0o22”, 10)→0
parseInt(“111”, 10)→7
- parseInt(“0b111”, 10)→0
parseInt(“abc”)→NaN

存在演算子

# 以下はtrue="存在"
console.log 0?
console.log 3.14?
console.log "abc"?
console.log ""? # 空文字列は"存在"
console.log (new Object())?

# 以下はfalse="非存在"
console.log null?
console.log undefined?
console.log variable? # 未定義の変数は"非存在"

# 以下はtrue="存在"

console.log 0?

console.log 3.14?

console.log "abc"?

console.log ""? # 空文字列は"存在"

console.log (new Object())?

# 以下はfalse="非存在"

console.log null?

console.log undefined?

console.log variable? # 未定義の変数は"非存在"

CoffeeScript – リテラル

2016-06-26 / tau / コメントする

数値リテラル

整数

123	10進数
0b110	2進数
0o11	8進数
0xff	16進数

実数

123.456	固定小数点
1.23456e3	浮動小数点

文字列リテラル

シングルクォート(‘)かダブルクォート(‘)の対で囲む。

シングルクォートで囲った場合はダブルクォートを、ダブルクォートで囲った場合はシングルクォートを直接文字列内に書ける。バックスラッシュによるエスケープでも可能。

console.log("ab'cd\"ef") # ab'cd"ef
console.log('ab\'cd"ef') # ab'cd"ef

1 2	console.log("ab'cd\"ef") # ab'cd"ef console.log('ab\'cd"ef') # ab'cd"ef

シングルクォートとダブルクォートの違い

ダブルクォートで囲った場合、文字列リテラル中の#{}によって式が評価された結果を文字列に埋め込めるが、シングルクォートの場合は上記の記号や式がそのまま文字列として返される。

console.log("3 / 4 = #{3/4}") # 3 / 4 = 0.75
console.log('3 / 4 = #{3/4}') # 3 / 4 = #{3/4}

1 2	console.log("3 / 4 = #{3/4}") # 3 / 4 = 0.75 console.log('3 / 4 = #{3/4}') # 3 / 4 = #{3/4}

リストと配列

console.log([-2..3])
# [ -2, -1, 0, 1, 2, 3 ]

console.log(
  [
    1, 2, "three"
    4, "five"]
  )
# [ 1, 2, 'three', 4, 'five' ]

console.log([-2..3])

# [ -2, -1, 0, 1, 2, 3 ]

console.log(

[

1, 2, "three"

4, "five"]

)

# [ 1, 2, 'three', 4, 'five' ]

Lifegame （CoffeeScript)

2016-06-26 / tau / コメントする

概要

CoffeeScriptに慣れるための習作。

ライフゲームの世界をLifeWorldクラスで構築し、パターンのセットや描画を行わせている。表示に関してはcanvasを利用している。

スマートフォン用はこちら

デモンストレーション

初期パターン：

サイズ：
10　15　20　30　40

表示間隔：
0.1sec　0.2sec　0.5sec　1.0sec　1.5sec

HTML内容

bodyブロックの構成は以下の通り。

初期パターン選択
サイズ選択
時間間隔選択
開始／停止ボタン
表示領域

初期パターン選択

規定パターンの中から、ドロップダウンリストで初期パターンを選択。この要素の選択状態が変化した場合の処理は、スクリプト側でjQueryを用いてコールバックを定義している。

<p>
<label>初期パターン：</label>
<select id="pattern">
  <option value="glider">Glider</option>
  <option value="spaceshipL">Lightweight Spaceship</option>
  <option value="spaceshipM">Middleweight Spaceship</option>
  <option value="spaceshipH">Heavyweight Spaceship</option>
  <option value="octagon">Octagon</option>
  <option value="galaxy">Galaxy</option>
  <option value="pulser">Pulser</option>
  <option value="pentadecathron">Pentadecathron</option>
  <option value="dieHard">Die Hard</option>
  <option value="random">Random</option>
</select>
</p>

<p>

<label>初期パターン：</label>

<option value="glider">Glider</option>

<option value="spaceshipL">Lightweight Spaceship</option>

<option value="spaceshipM">Middleweight Spaceship</option>

<option value="spaceshipH">Heavyweight Spaceship</option>

<option value="octagon">Octagon</option>

<option value="galaxy">Galaxy</option>

<option value="pulser">Pulser</option>

<option value="pentadecathron">Pentadecathron</option>

<option value="random">Random</option>

</select>

</p>

サイズと表示間隔の選択

それぞれラジオボタン群で選択させる。これらの要素の選択状態が変化した場合の処理も、スクリプト側でjQueryを用いてコールバックを定義している。

<p>
<label>サイズ：</label>
<label><input name="size" type="radio" value="10" />10</label>
<label><input checked="checked" name="size" type="radio" value="15" />15</label>
<label><input name="size" type="radio" value="20" />20</label>
<label><input name="size" type="radio" value="30" />30</label>
<label><input name="size" type="radio" value="40" />40</label>
</p>

<p>
<label>表示間隔：</label>
<label><input name="interval" type="radio" value="100" />0.1sec</label>
<label><input name="interval" type="radio" value="200" />0.2sec</label>
<label><input checked="checked" name="interval" type="radio" value="500" />0.5sec</label>
<label><input name="interval" type="radio" value="1000" />1.0sec</label>
<label><input name="interval" type="radio" value="1500" />1.5sec</label>
</p>

<p>

</p>

<p>

</p>

開始／停止ボタン

ボタンが押されるた時の処理はスクリプト側でjQueryを用いてコールバックを定義しており、その時の状態によって停止と起動を繰り返す。

<input id="btn_start_stop" type="button" value="Start/Stop" />

1	<input id="btn_start_stop" type="button" value="Start/Stop" />

描画領域

HTMLのcanvasを設置。

<canvas id="canvas" width="399" height="399">

1	<canvas id="canvas" width="399" height="399">

CoffeeScriptコード

初期パターン

初期パターンを配列にセットしている。たとえば「グライダー」の場合は以下のように定義している。

@patternGrider = [
  [1, 1, 1]
  [1, 0, 0]
  [0, 1, 0]
]

@patternGrider = [

[1, 1, 1]

[1, 0, 0]

[0, 1, 0]

]

本体

本体コードは、LifeWorldクラスとグローバル関数の定義からなる。

ブラウザのボタン操作なや状態変化などに対応するコールバックは、jQueryを利用して実装。

# LifeWorldクラス
# Lifegameのグリッドを保持し、初期設定や世代交代の操作をし、アニメーションを描画
class LifeWorld
  # コンストラクタ
  constructor: (canvas)->
  # 指定サイズで、0で埋められたグリッドを生成
  create: (row, col)->
  # 表示間隔設定
  setDisplayInterval: (@interval)->
  # 初期状態を設定
  setPattern: (patternString)->
  # gridの状態を表示
  draw: ->
  # 次の世代の状態を計算
  nextGeneration: ->
  # グリッドと位置を指定して生死を返すメソッド
  getNewStatusAt: (grid, row, col)->
  # タイマ処理に渡すメソッド
  animate: ->
  # アニメーションの開始／停止
  startAndStop: ->
  # アニメーションの停止
  stop: ->

# 以下はグローバル関数
# ブラウザからのイベントによって起動され、LifeWorldクラスをコントロールする

# 初期化関数
getNewLifeWorld = ->


# 以下は初期動作
# ブラウザから読み込まれたときに一回だけ作動する。
jQuery ($) ->

# LifeWorldクラス

# Lifegameのグリッドを保持し、初期設定や世代交代の操作をし、アニメーションを描画

class LifeWorld

# コンストラクタ

constructor: (canvas)->

# 指定サイズで、0で埋められたグリッドを生成

create: (row, col)->

# 表示間隔設定

setDisplayInterval: (@interval)->

# 初期状態を設定

setPattern: (patternString)->

# gridの状態を表示

draw: ->

# 次の世代の状態を計算

nextGeneration: ->

# グリッドと位置を指定して生死を返すメソッド

getNewStatusAt: (grid, row, col)->

# タイマ処理に渡すメソッド

animate: ->

# アニメーションの開始／停止

startAndStop: ->

# アニメーションの停止

stop: ->

# 以下はグローバル関数

# ブラウザからのイベントによって起動され、LifeWorldクラスをコントロールする

# 初期化関数

getNewLifeWorld = ->

# 以下は初期動作

# ブラウザから読み込まれたときに一回だけ作動する。

jQuery ($) ->

初期動作

ブラウザからこのスクリプトが呼び出されたときに一回だけ動作。

LifeWorldの初期化や、コールバックの設定を行う。

jQuery ($) ->
  lifeWorld = getNewLifeWorld()
  lifeWorld.draw()

  $("#pattern").change ->
    lifeWorld.stop()
    lifeWorld = getNewLifeWorld()
    lifeWorld.draw()
    return

  $("input[name='size']:radio").change ->
    lifeWorld.stop()
    lifeWorld = getNewLifeWorld()
    lifeWorld.draw()
    return

  $("input[name='interval']:radio").change ->
    lifeWorld.stop()
    lifeWorld = getNewLifeWorld()
    lifeWorld.draw()
    return

  $("#btn_start_stop").click ->
    lifeWorld.startAndStop()
    return

jQuery ($) ->

lifeWorld = getNewLifeWorld()

lifeWorld.draw()

$("#pattern").change ->

lifeWorld.stop()

lifeWorld = getNewLifeWorld()

lifeWorld.draw()

return

$("input[name='size']:radio").change ->

lifeWorld.stop()

lifeWorld = getNewLifeWorld()

lifeWorld.draw()

return

$("input[name='interval']:radio").change ->

lifeWorld.stop()

lifeWorld = getNewLifeWorld()

lifeWorld.draw()

return

$("#btn_start_stop").click ->

lifeWorld.startAndStop()

return

グローバル関数

getNewLifeWorld（）

LifeWorldの新しい状態を設定する際に呼ばれる関数。

ブラウザの部品から直接は呼ばれないため、windows.の要素とはしていないが、グローバルスコープの関数。

getNewLifeWorld = ->
  # 初期パターン、サイズ、表示間隔の取得・設定
  initialPattern = $("#pattern").val()
  gridSize = parseInt($("input[name='size']:checked").val(), 10)
  interval= parseInt($("input[name='interval']:checked").val(), 10)
  canvas = $("#canvas")[0]

  lifeWorld = new LifeWorld(canvas)
  lifeWorld.create(gridSize, gridSize)
  lifeWorld.setDisplayInterval(interval)
  lifeWorld.setPattern(initialPattern)

  return lifeWorld

getNewLifeWorld = ->

# 初期パターン、サイズ、表示間隔の取得・設定

initialPattern = $("#pattern").val()

gridSize = parseInt($("input[name='size']:checked").val(), 10)

interval= parseInt($("input[name='interval']:checked").val(), 10)

canvas = $("#canvas")[0]

lifeWorld = new LifeWorld(canvas)

lifeWorld.create(gridSize, gridSize)

lifeWorld.setDisplayInterval(interval)

lifeWorld.setPattern(initialPattern)

return lifeWorld

LifeWorldクラス

constructor(canvas)

LifeWorldクラスのコンストラクタ。

canvasを引数にしてインスタンスを生成するが、この段階ではグリッドも生成されていない。他のパラメータについては個別に設定することを意図している。

  constructor: (canvas)->
    @row = 0
    @col = 0
    @grid = []
    @canvas = canvas
    @isRunning = false
    @timer = null
    @interval = 1000

constructor: (canvas)->

@row = 0

@col = 0

@grid = []

@canvas = canvas

@isRunning = false

@timer = null

@interval = 1000

create(row, col)

行数と列数を指定してインスタンスのグリッドを構築する。グリッドの全要素が0で埋められている。

  create: (row, col)->
    @row = row
    @col = col
    @grid = ((0 for c in [0..@col+1]) for r in [0..@row+1])
    return

create: (row, col)->

@row = row

@col = col

@grid = ((0 for c in [0..@col+1]) for r in [0..@row+1])

return

setDisplayInterval(interval)

動画フレームの時間間隔を設定。

CoffeeScript特有の、引数を直接パラメータに代入する形式。

  # 表示間隔設定
  setDisplayInterval: (@interval)->

1 2	# 表示間隔設定 setDisplayInterval: (@interval)->

setPattern(patternString)

選択されているラジオボタンの文字により、あらかじめ定義された初期パターンを登録。

初期パターンがグリッドの中央付近に来るように調整している。

  setPattern: (patternString)->
    switch patternString
      when "glider" then pattern = patternGrider
      when "spaceshipL" then pattern = patternSpaceshipL
      when "spaceshipM" then pattern = patternSpaceshipM
      when "spaceshipH" then pattern = patternSpaceshipH
      when "octagon" then pattern = patternOctagon
      when "galaxy" then pattern = patternGalaxy
      when "pulser" then pattern = patternPulser
      when "pentadecathron" then pattern = patternPentadecathron
      when "dieHard" then pattern = patternDieHard
      when "random"
        for r in [1..@row]
          for c in [1..@col]
            if Math.random() > 0.5 then @grid[r][c] = 1
        return

    @grid[r][c] = 0 for r in [0...@grid.length] for c in [0...@grid[0].length]

    pivotR = Math.floor((@grid.length - pattern.length) / 2)
    pivotC = Math.floor((@grid[0].length - pattern[0].length) / 2)

    for r in [0...pattern.length]
      for c in [0...pattern[0].length]
        @grid[pivotR + r][pivotC + c] = pattern[r][c]

    return

setPattern: (patternString)->

switch patternString

when "glider" then pattern = patternGrider

when "spaceshipL" then pattern = patternSpaceshipL

when "spaceshipM" then pattern = patternSpaceshipM

when "spaceshipH" then pattern = patternSpaceshipH

when "octagon" then pattern = patternOctagon

when "galaxy" then pattern = patternGalaxy

when "pulser" then pattern = patternPulser

when "pentadecathron" then pattern = patternPentadecathron

when "dieHard" then pattern = patternDieHard

when "random"

for r in [1..@row]

for c in [1..@col]

if Math.random() > 0.5 then @grid[r][c] = 1

return

@grid[r][c] = 0 for r in [0...@grid.length] for c in [0...@grid[0].length]

pivotR = Math.floor((@grid.length - pattern.length) / 2)

pivotC = Math.floor((@grid[0].length - pattern[0].length) / 2)

for r in [0...pattern.length]

for c in [0...pattern[0].length]

@grid[pivotR + r][pivotC + c] = pattern[r][c]

return

draw()

グリッドの状態に応じてcanvasのコンテキストに描画。格子線も描いている。

  draw: ->
    w = @canvas.width
    h = @canvas.height

    ctx = @canvas.getContext("2d")
    ctx.fillStyle = "#000000"
    ctx.fillRect(0, 0, w, h)

    cellSize = (h + 1) / @row

    ctx.strokeStyle = "#808080"
    ctx.beginPath()
    for r in [0...@row]
      ctx.moveTo(r*cellSize, 0)
      ctx.lineTo(r*cellSize, w)
    for c in [0...@col]
      ctx.moveTo(0, c*cellSize)
      ctx.lineTo(h, c*cellSize)
    ctx.stroke()

    ctx.fillStyle = "#ffffff"
    ctx.strokeStyle = "#404040"
    y = 0
    for r in [1..@row]
      x = 0
      for c in [1..@col]
        if @grid[r][c] == 1
          ctx.fillRect(x, y, cellSize, cellSize)
          ctx.strokeRect(x, y, cellSize, cellSize)
        x += cellSize
      y += cellSize

    return

draw: ->

w = @canvas.width

h = @canvas.height

ctx = @canvas.getContext("2d")

ctx.fillStyle = "#000000"

ctx.fillRect(0, 0, w, h)

cellSize = (h + 1) / @row

ctx.strokeStyle = "#808080"

ctx.beginPath()

for r in [0...@row]

ctx.moveTo(r*cellSize, 0)

ctx.lineTo(r*cellSize, w)

for c in [0...@col]

ctx.moveTo(0, c*cellSize)

ctx.lineTo(h, c*cellSize)

ctx.stroke()

ctx.fillStyle = "#ffffff"

ctx.strokeStyle = "#404040"

y = 0

for r in [1..@row]

x = 0

for c in [1..@col]

if @grid[r][c] == 1

ctx.fillRect(x, y, cellSize, cellSize)

ctx.strokeRect(x, y, cellSize, cellSize)

x += cellSize

y += cellSize

return

nextGeneration()

次のgetNewStatusAt()メソッドを使いながら、次の世代のグリッドの状態を形成。

新しい世代用の一時的なグリッドを生成している。

  nextGeneration: ->
    # grid->cloneへの複製
    clone = ((x for x in rowArray) for rowArray in @grid)
    # 各セルの次の世代の生死を設定
    for r in [1..@row]
      for c in [1..@col]
        clone[r][c] = @getNewStatusAt(@grid, r, c)
    # clone->gridへの複製
    @grid = ((x for x in rowArray) for rowArray in clone)
    return

nextGeneration: ->

# grid->cloneへの複製

clone = ((x for x in rowArray) for rowArray in @grid)

# 各セルの次の世代の生死を設定

for r in [1..@row]

for c in [1..@col]

clone[r][c] = @getNewStatusAt(@grid, r, c)

# clone->gridへの複製

@grid = ((x for x in rowArray) for rowArray in clone)

return

getNewStatusAt(grid, row, col)

現在の状態から、次の世代のグリッドの状態を算出。

自分のマスの周囲8つのマスの存在状態から、次の世代の誕生／存続／死滅を決定。

周囲の生存数	現状＝存在	現状＝不在
0	死滅	不在
1～2	存続	不在
3	存続	誕生
4以上	死滅	不在

  getNewStatusAt: (grid, row, col)->
    count = 0
    count += grid[r][c] for c in [col-1..col+1] for r in [row-1..row+1]
    count -= grid[row][col]

    switch count
      when 0 then status = 0
      when 1 then status = 0
      when 2 then status = grid[row][col]
      when 3 then status = 1
      else status = 0

    return status

getNewStatusAt: (grid, row, col)->

count = 0

count += grid[r][c] for c in [col-1..col+1] for r in [row-1..row+1]

count -= grid[row][col]

switch count

when 0 then status = 0

when 1 then status = 0

when 2 then status = grid[row][col]

when 3 then status = 1

else status = 0

return status

animate()

setInterval()メソッドに登録するための、ワンフレームの画像を描くメソッド。

  animate: ->
    @nextGeneration()
    @draw()
    return

animate: ->

@nextGeneration()

@draw()

return

startAndStop() / ｓtop()

startAndStop()は、現在動画を実行中かどうかのフラグをチェックし、停止していればsetInterval()を用いて起動、起動中ならclearInterval()停止を行う。

stop()は、状態によらず停止処理。

  # アニメーションの開始／停止
  startAndStop: ->
    if @isRunning
      clearInterval(@timer)
      @isRunning = false
    else
      @timer = setInterval(@animate.bind(this), @interval)
      @isRunning = true
    return

  # アニメーションの停止
  stop: ->
    if @isRunning
      clearInterval(@timer)
    return

# アニメーションの開始／停止

startAndStop: ->

if @isRunning

clearInterval(@timer)

@isRunning = false

else

@timer = setInterval(@animate.bind(this), @interval)

@isRunning = true

return

# アニメーションの停止

stop: ->

if @isRunning

clearInterval(@timer)

return