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

概要

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

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

無名関数のクロージャ

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

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

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

コールバックの登録

生真面目な書き方

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

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

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

()を省略した書き方

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

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

引数の改行~失敗

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

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

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

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

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

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

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

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

引数の改行~別の想定外

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

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

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

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

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

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

複数行のコールバック

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

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

引数を持つコールバック

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

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

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

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

これは”unexpected ,”エラー。

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

これもok!

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

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

 

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

基本形

引数なしの場合

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

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

引数ありの場合

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

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

無名関数を使う方法

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

引数なしの場合

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

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

引数ありの場合

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

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

改行可能

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

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

即時関数のdoはエラー

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

 

coffee-script.js

概要

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

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

導入

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

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

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

基本例

 

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

HTMLファイル

test_htmml.html

外部スクリプトファイル

test_html.coffee

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

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

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

 

CoffeeScript – 関数

通常の関数

CoffeeScript特有の記法による。

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

即時関数

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

コールバック

 

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

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

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

要素の取り出し

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

二次元配列の生成

ややこしいやり方

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

シンプルなやり方

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

要素の参照

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

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

要素の再設定

よくある要素の設定。

 

CoffeeScript – 配列

基本的な配列の扱い

配列リテラル

要素の参照と代入

先頭要素の添字は0

各種操作

要素の追加・削除

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

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

部分配列の抜き出し

元の配列は保持される。

要素の存在チェック

分割代入

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

入れ替え作業も可能。

内包表記

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

 

CoffeeScript – 演算

数値演算

四則演算

+ 加算
減算
* 乗算
** べき乗
/ 除算:小数の丸めはなし 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)

インクリメント/デクリメント

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

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

代入演算子

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

丸め処理

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

存在演算子

 

CoffeeScript – リテラル

数値リテラル

整数

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

実数

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

文字列リテラル

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

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

 

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

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

リストと配列

 

Lifegame (CoffeeScript)

概要

CoffeeScriptに慣れるための習作。

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

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

デモンストレーション



    


    



HTML内容

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

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

初期パターン選択

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

サイズと表示間隔の選択

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

開始/停止ボタン

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

描画領域

HTMLのcanvasを設置。

CoffeeScriptコード

初期パターン

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

本体

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

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

初期動作

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

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

グローバル関数

getNewLifeWorld()

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

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

LifeWorldクラス
constructor(canvas)

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

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

create(row, col)

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

setDisplayInterval(interval)

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

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

setPattern(patternString)

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

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

draw()

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

nextGeneration()

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

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

getNewStatusAt(grid, row, col)

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

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

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

animate()

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

startAndStop() / stop()

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

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