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()は、状態によらず停止処理。

 

Brython – Timer

Brythonにおけるタイマ処理

Brthonでタイマ処理を実装する場合、time.sleep()メソッドとスレッドクラスの継承を用いても、ブラウザで適切に処理されない(Chromeで実行した場合、処理の冒頭に反応がなく、ある程度の時間後にそれまでの処理が一挙に実行され、その後正常なタイマ処理が続行された)。

Brython固有の機能としてbrowser.timerモジュールにJavaScriptのintervalやtimeoutに相当する以下のメソッド群が用意されている。

  • set_interval()/clear_interval
  • set_timeout()/clear_timeout()
  • request_animation_frame()/cancel_animation_frame

これらはJavaScriptのそれぞれに相当する関数のwrapperであり、JavaScriptの仕様に従っていると考えられる。

JavaScriptのタイマ関係の関数についてはこちらを参照。

interval

基本形

timerパッケージのset_interval()メソッドで一定時間間隔で関数を起動し、clear_interval()メソッドでタイマーの実行を停止する。

引数を渡す場合

ターゲットの関数に引数を渡したい場合、BrythonではJavaScriptのような文字列渡しはできないが、lambda関数式で無名関数の中でターゲットの関数に引数を渡すことができる。

こちらのデモにもtimer.set_interval()を利用している。