スクリプトへの引数渡し

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

たとえば以下のような場合。

CoffeeScript、Javascriptの外部スクリプトに引数を渡したい
外部スクリプトの定数定義を柔軟に変更可能なようにしたい

定数となる変数定義をスクリプト内に書くと、定数の値を変更したいときに再コンパイルやアップロードなどが必要になって煩雑。

以下の方法が考えられる。

HTMLの外部スクリプト呼び出しより前に、変数定義のscript要素を書く(変数のスコープはグローバルになる)
- その際、行の末尾にセミコロン(;)をつけること
外部スクリプト内で上で定義した変数を利用する

HTML

<script>
PARAM = 1;
CONST_PARAM = 10;
</script>

PARAM = 1;

CONST_PARAM = 10;

</script>

外部スクリプト

p = PARAMETER
c = CONST_PARAMETER

console.log(p) # 1
console.log(c) # 10

p = PARAMETER

c = CONST_PARAMETER

console.log(p) # 1

console.log(c) # 10

CoffeeScriptも実行時にはJSにコンパイルしたものを読み込むので、変数定義もJavascriptの文法で末尾にセミコロン(;)をつけなければならない。

上の例では、定数を意識して変数名を大文字のスネークケースとしたが、通常の変数名でも実行に問題はない。

CoffeeScript – geom2dパッケージ

2016-07-24 / tau / コメントする

パッケージ名

taustation_geom2d

クラス

taustation_geom2d.Vector: 2次元ベクトルを保持し、各種演算を行うメソッドを提供する。
taustation_geom2d.MovingAgent: 位置と速度を保持し、互いの位置関係を判定するメソッドを提供する。

コードの骨組み

# 2次元の幾何図形等のパッケージ
# ver1.0
# 20160724
# ver1.1
# 20160729
# Vector.distance()を追加
exports = this
exports.taustation_geom2d = {}

do ->
  # 2次元ベクトルのクラス
  class Vector

  # 位置と速度を保持するクラス
  class MovingAgent

  taustation_geom2d.Vector = Vector
  taustation_geom2d.MovingAgent = MovingAgent

# 2次元の幾何図形等のパッケージ

# ver1.0

# 20160724

# ver1.1

# 20160729

# Vector.distance()を追加

exports = this

exports.taustation_geom2d = {}

do ->

# 2次元ベクトルのクラス

class Vector

# 位置と速度を保持するクラス

class MovingAgent

taustation_geom2d.Vector = Vector

taustation_geom2d.MovingAgent = MovingAgent

CoffeeScript – geom2d.Vectorクラス

2016-07-24 / tau / コメントする

パッケージ

taustation_geom2d

クラス名

taustation_geom2d.Vector

クラス仕様

概要

x、y二つの成分を持ち、絶対値の計算や加減乗算など2次元ベクトルの代数演算を行うメソッドを提供する。

クラス変数

なし

クラス・メソッド

distance(pos1, pos2): 2つのVectorオブジェクトpos1、pos2を点を表す位置ベクトルとして、2点間の距離を返す。

インスタンス・プロパティ

x: ベクトルのx成分
y: ベクトルのy成分

コンストラクタ

constructor(x, y): x成分とY成分を指定してVectorのインスタンスを生成する。

インスタンス・メソッド

基本メソッド

set(x, y): Vectorのx成分とy成分をセットする。
toString(): Vectorの文字列形式の表現を返す。
getClone(): 元のVectorオブジェクトと同じ内容のクローンを生成して返す。

演算

abs: Vectorの絶対値(長さ)を返す。
times(coeff): Vectorに定数coeffを乗じたベクトルを新たに生成して返す。
timesEq(coeff): Vectorに定数coeffを乗じて変更する。新しいオブジェクトは生成しない。
div(coeff): Vectorを定数coeffで除したベクトルを新たに生成して返す。
divEq(coeff): Vectorを定数coeffで除して変更する。新しいオブジェクトは生成しない。
plus(other): Vectorにotherベクトルを加えたベクトルを新たに生成して返す。
plusEq(other): Vectorにotherベクトルを加えて変更する。新しいオブジェクトは生成しない。
minus(other): Vectorからotherベクトルを減じたベクトルを新たに生成して返す。
minusEq(other): Vectorからotherベクトルを減じて変更する。新しいオブジェクトは生成しない。
inprod(other): Vectorとotherベクトルの内積値を返す。
ang(other): Vectorとotherのなす角を計算する(0～π)。

新たなVectorの生成

getUnit(): Vectorと同じ向きの単位ベクトル(長さが1)を新たに生成して返す。
getInverse(): Vectorと逆向きのベクトルを新たに生成して返す。
getOrthogonalR(): Vectorから右に90度回転したベクトルを新たに生成して返す。
getOrthogonalL(): Vectorから左に90度回転したベクトルを新たに生成して返す。
getUnitOrthogonalR(): Vectorから右に90度回転した単位ベクトルを新たに生成して返す。
getUnitOrthogonalL(): Vectorから左に90度回転した単位ベクトルを新たに生成して返す。

判定

isHeadingToRightOf(other): このVectorオブジェクトの進行方向が、引数のVectorオブジェクトotherの進行方向より右方を指しているときtrue、左方を指しているときfalseを返す。
isHeadingToLeftOf(other): isHeadingToRightOf()と左右逆の判定結果を返す
isInFrontOf(movingAgent): このVectorオブジェクトが位置ベクトルとして、その点が引数のMovingAgentオブジェクトの前方(左右180度より進行方向の側)にあるときtrue、後方にあるときfalseを返す。真横の時は前方と判定される。
isIntheRearOf(movingAgent): isInFrontOf()と前後逆の判定結果を返す。
isOnTheRightOf(movingAgent): このVectorオブジェクトが位置ベクトルとして、その点が引数のMovingAgentオブジェクトの右方にあるときtrue、左方にあるときfalseを返す。進行方向の延長線上にあるときは右方と判定される。
isOnTheLeftOf(movingAgent): isOnTheRightOf()と左右逆の判定結果を返す。

コード

  class Vector
    # 2つの位置ベクトルで表される点の間の距離を返す
    @distance: (pos1, pos2) ->
      Math.sqrt((pos1.x - pos2.x) * (pos1.x - pos2.x) +
                (pos1.y - pos2.y) * (pos1.y - pos2.y))

    constructor: (@x, @y) ->

    set: (x, y) -> @x = x; @y = y; return
    toString: -> "(#{@x}, #{@y})"

    # 自身と同じ内容のVectorオブジェクトを生成して返す
    getClone: -> new Vector(@x, @y)

    # ベクトルの絶対値(長さ)
    abs: -> Math.sqrt(@x * @x + @y * @y)

    # ベクトルとスカラーの乗除算
    # 以降のメソッド群でも、Eqがついていれば元のオブジェクトを変更し、
    # Eqがついていなければ新しいベクトルを生成して返す
    times: (a) -> new Vector(@x * a, @y * a)
    timesEq: (a) -> @x *= a; @y *= a; return
    div: (a) -> new Vector(@x / a, @y / a)
    divEq: (a) -> @x /= a; @y /= a; return

    # ベクトル同士の加減算
    plus: (other) -> new Vector(@x + other.x, @y + other.y)
    plusEq: (other) -> @x += other.x; @y += other.y; return
    minus: (other) -> new Vector(@x - other.x, @y - other.y)
    minusEq: (other) -> @x -= other.x; @y -= other.y; return

    # 2つのベクトルの内席となす角
    inprod: (other) -> @x * other.x + @y * other.y
    ang: (other) -> Math.acos(@inprod(other) / @.abs() / other.abs())

    # 単位ベクトル、逆ベクトル、直交ベクトルを返す
    getUnit: -> a = @abs(); new Vector(@x / a, @y / a)
    getInverse: -> new Vector(-@x, -@y)
    getOrthogonalR: -> new Vector(@y, -@x)
    getOrthogonalL: -> new Vector(-@y, @x)
    getUnitOrthogonalR: -> a = @abs(); new Vector(@y / a, -@x / a)
    getUnitOrthogonalL: -> a = @abs(); new Vector(-@y / a, @x / a)

    # このVectorが引数のVectorの向きに対してどちらに向いているか
    isHeadingToRightOf: (other) ->
      if @x * other.y - @y * other.x >=0 then true else false

    isHeadingToLeftOf: (other) -> return not @isHeadingToRightOf(other)

    # 以下、Vectorを位置ベクトルと考えたときのMovingAgentとの位置関係
    #
    # Vectorの位置がMovingAgentの前方か
    isInFrontOf: (movingAgent) ->
      inprod = movingAgent.v.x * (@x - movingAgent.pos.x) +
               movingAgent.v.y * (@y - movingAgent.pos.y)
      if inprod >= 0 then true else false

    # Vectorの位置がMovingAgentの後方か
    isInTheRearOf: (movingAgent) -> not @isInFrontOf(movingAgent)

    # Vectorの位置がMovingAgentの右方か
    isOnTheRightOf: (movingAgent) ->
      inprod = (@x - movingAgent.pos.x) * movingAgent.v.y -
               (@y - movingAgent.pos.y) * movingAgent.v.x
      if inprod >= 0 then true else false

    # Vectorの位置がMovingAgentの左方か
    isOnTheLeftOf: (movingAgent) -> not @isOnTheRightOf(movingAgent)

class Vector

# 2つの位置ベクトルで表される点の間の距離を返す

@distance: (pos1, pos2) ->

Math.sqrt((pos1.x - pos2.x) * (pos1.x - pos2.x) +

(pos1.y - pos2.y) * (pos1.y - pos2.y))

constructor: (@x, @y) ->

set: (x, y) -> @x = x; @y = y; return

toString: -> "(#{@x}, #{@y})"

# 自身と同じ内容のVectorオブジェクトを生成して返す

getClone: -> new Vector(@x, @y)

# ベクトルの絶対値(長さ)

abs: -> Math.sqrt(@x * @x + @y * @y)

# ベクトルとスカラーの乗除算

# 以降のメソッド群でも、Eqがついていれば元のオブジェクトを変更し、

# Eqがついていなければ新しいベクトルを生成して返す

times: (a) -> new Vector(@x * a, @y * a)

timesEq: (a) -> @x *= a; @y *= a; return

div: (a) -> new Vector(@x / a, @y / a)

divEq: (a) -> @x /= a; @y /= a; return

# ベクトル同士の加減算

plus: (other) -> new Vector(@x + other.x, @y + other.y)

plusEq: (other) -> @x += other.x; @y += other.y; return

minus: (other) -> new Vector(@x - other.x, @y - other.y)

minusEq: (other) -> @x -= other.x; @y -= other.y; return

# 2つのベクトルの内席となす角

inprod: (other) -> @x * other.x + @y * other.y

ang: (other) -> Math.acos(@inprod(other) / @.abs() / other.abs())

# 単位ベクトル、逆ベクトル、直交ベクトルを返す

getUnit: -> a = @abs(); new Vector(@x / a, @y / a)

getInverse: -> new Vector(-@x, -@y)

getOrthogonalR: -> new Vector(@y, -@x)

getOrthogonalL: -> new Vector(-@y, @x)

getUnitOrthogonalR: -> a = @abs(); new Vector(@y / a, -@x / a)

getUnitOrthogonalL: -> a = @abs(); new Vector(-@y / a, @x / a)

# このVectorが引数のVectorの向きに対してどちらに向いているか

isHeadingToRightOf: (other) ->

if @x * other.y - @y * other.x >=0 then true else false

isHeadingToLeftOf: (other) -> return not @isHeadingToRightOf(other)

# 以下、Vectorを位置ベクトルと考えたときのMovingAgentとの位置関係

# Vectorの位置がMovingAgentの前方か

isInFrontOf: (movingAgent) ->

inprod = movingAgent.v.x * (@x - movingAgent.pos.x) +

movingAgent.v.y * (@y - movingAgent.pos.y)

if inprod >= 0 then true else false

# Vectorの位置がMovingAgentの後方か

isInTheRearOf: (movingAgent) -> not @isInFrontOf(movingAgent)

# Vectorの位置がMovingAgentの右方か

isOnTheRightOf: (movingAgent) ->

inprod = (@x - movingAgent.pos.x) * movingAgent.v.y -

(@y - movingAgent.pos.y) * movingAgent.v.x

if inprod >= 0 then true else false

# Vectorの位置がMovingAgentの左方か

isOnTheLeftOf: (movingAgent) -> not @isOnTheRightOf(movingAgent)

CoffeeScript – グローバル変数

2016-07-24 / tau / コメントする

グローバルにならない

CoffeeScriptでグローバル変数を期待して以下のように書いたとする。

globalVar = 1 # グローバル変数のつもり

console.log(globalVar)

globalVar = 1 # グローバル変数のつもり

console.log(globalVar)

一見すると問題なく動いているように見えるが、これを別ファイルのパッケージにして動かそうとすると問題が顕在化する。以下のように”globalVarが存在しないよ”というエラーが出るのである。

>>> package1.coffeeファイル
globalVar = 1

>>> main.coffeeファイル
console.log(globalVar) # globalVar is not defined

>>> package1.coffeeファイル

globalVar = 1

>>> main.coffeeファイル

console.log(globalVar) # globalVar is not defined

これら2つのファイルをjsにコンパイルしてブラウザのscript要素で読み込んだ場合、そのイメージは以下のようになる。

(function() {
  globalVar a;
  globalVar = 1;
}).call(this);

(function() {
  console.log(globalVar);
}).call(this);

(function() {

globalVar a;

globalVar = 1;

}).call(this);

(function() {

console.log(globalVar);

}).call(this);

パッケージでグローバル定義したつもりだが、コンパイル時に無名関数でクロージングされるため、グローバルにならず、他のファイルから読み込むことができない。

解決策1

グローバル変数をwindowオブジェクトの要素にしてしまう。

>>> package1.coffeeファイル
window.globalVar = 1

>>> main.coffeeファイル
console.log(window.globalVar)

>>> package1.coffeeファイル

window.globalVar = 1

>>> main.coffeeファイル

console.log(window.globalVar)

解決策2

rootコンテキストで、以下のパターンを使う。

>>> package1.coffeeファイル
exports = this
exports.globalVar = 1

>>> main.coffeeファイル
console.log(globalVar)

>>> package1.coffeeファイル

exports = this

exports.globalVar = 1

>>> main.coffeeファイル

console.log(globalVar)

CoffeeScript – パッケージ管理

2016-07-11 / tau / コメントする

パッケージ化の方法について

簡単な方法～齟齬あり

クラス／オブジェクトのプロパティにする

クラスやオブジェクトをパッケージの名前とし、パッケージ内のクラスなどはそのプロパティとして定義する。

ただしこの方法は、最適とは言えない。

# Package 1
class Pack1

class MyClass
  constructor: -> @name = "P1-MyClass"

Pack1.MyClass = MyClass

#Package 2
Pack2 = {}

# not in package
class MyClass
  constructor: -> @name = "P2-MyClass"

Pack2.MyClass = MyClass

ins1 = new Pack1.MyClass()
ins2 = new Pack2.MyClass()
ins3 = new MyClass()

console.log(ins1.name) # P1-MyClass
console.log(ins2.name) # P2-MyClass
console.log(ins3.name) # P2-MyClass

# Package 1

class Pack1

class MyClass

constructor: -> @name = "P1-MyClass"

Pack1.MyClass = MyClass

#Package 2

Pack2 = {}

# not in package

class MyClass

constructor: -> @name = "P2-MyClass"

Pack2.MyClass = MyClass

ins1 = new Pack1.MyClass()

ins2 = new Pack2.MyClass()

ins3 = new MyClass()

console.log(ins1.name) # P1-MyClass

console.log(ins2.name) # P2-MyClass

console.log(ins3.name) # P2-MyClass

1行目で名前空間に用いるクラスを定義し、7行目でMyClassをPack1のプロパティとしている。

10行目で名前空間に用いるオブジェクトを定義し、16行目でMyClassPack2のプロパティとしている。

20行目でMyClass単独を用いた場合、直前に13行で定義されたMyClassが参照される。

パッケージ内での名前参照の祖語

パッケージ間で名前が重複する場合、下手をすると想定外のオブジェクトが使われてしまう。

次の例は、Pack1とPack2の2つのパッケージで同じクラス名を使い、各パッケージの中ではパッケージ名なしで使おうとしたもの。

class Pack1

class InnerClass
  constructor: -> @name = "P1-Inner"

class MyClass
  constructor: ->
    @name = "P1-MyClass"
    @inner = new InnerClass()

Pack1.MyClass = MyClass

Pack2 = {}

class InnerClass
  constructor: -> @name = "P2-Inner"

class MyClass
  constructor: ->
    @name = "P2-MyClass"
    @inner = new InnerClass()

Pack2.MyClass = MyClass

ins1 = new Pack1.MyClass()
ins2 = new Pack2.MyClass()

console.log(ins1.name)       # P1-MyClass
console.log(ins1.inner.name) # P2-Inner!!
console.log(ins2.name)       # P2-MyClass
console.log(ins2.inner.name) # P2-Inner

class Pack1

class InnerClass

constructor: -> @name = "P1-Inner"

class MyClass

constructor: ->

@name = "P1-MyClass"

@inner = new InnerClass()

Pack1.MyClass = MyClass

Pack2 = {}

class InnerClass

constructor: -> @name = "P2-Inner"

class MyClass

constructor: ->

@name = "P2-MyClass"

@inner = new InnerClass()

Pack2.MyClass = MyClass

ins1 = new Pack1.MyClass()

ins2 = new Pack2.MyClass()

console.log(ins1.name) # P1-MyClass

console.log(ins1.inner.name) # P2-Inner!!

console.log(ins2.name) # P2-MyClass

console.log(ins2.inner.name) # P2-Inner

ところが29行目で、Pack1のクラスのはずのところがInnerClassにはPack2のものが使われてしまっている。

これは、25行目以降の実行文の前にグローバル変数InnerClassの内容がPack1のものからPack2のものへと上書き定義されたため。

結局この方法だと、各パッケージの中でもクラス名の前にパッケージ名をつけないといけないようで、コーディング上は元のクラス名に識別子を組み込むのとあまり変わらない。

有効な方法～即時実行関数

先の方法は、すべてグローバル領域で行われていたため、パッケージ内でのみ参照するクラスも上書きされてしまった。

そこで、パッケージごとに即時実行される無名関数で括ってみる。

Package1 = {}

do ->
  class InnerClass
    constructor: -> @name = "P1-Inner"

  class MyClass
    constructor: ->
      @name = "P1-Class"
      @inner = new InnerClass()

  Package1.MyClass = MyClass

Package2 = {}

do ->
  class InnerClass
    constructor: -> @name = "P2-Inner"

  class MyClass
    constructor: ->
      @name = "P2-Class"
      @inner = new InnerClass()

  Package2.MyClass = MyClass

ins1 = new Package1.MyClass()
ins2 = new Package2.MyClass()

console.log(ins1.name)       # P1-Class
console.log(ins1.inner.name) # P1-Inner
console.log(ins2.name)       # P2-Class
console.log(ins2.inner.name) # P2-Inner

Package1 = {}

do ->

class InnerClass

constructor: -> @name = "P1-Inner"

class MyClass

constructor: ->

@name = "P1-Class"

@inner = new InnerClass()

Package1.MyClass = MyClass

Package2 = {}

do ->

class InnerClass

constructor: -> @name = "P2-Inner"

class MyClass

constructor: ->

@name = "P2-Class"

@inner = new InnerClass()

Package2.MyClass = MyClass

ins1 = new Package1.MyClass()

ins2 = new Package2.MyClass()

console.log(ins1.name) # P1-Class

console.log(ins1.inner.name) # P1-Inner

console.log(ins2.name) # P2-Class

console.log(ins2.inner.name) # P2-Inner

1行目のようにグローバル領域でパッケージ名に使うオブジェクト／クラスを定義し、パッケージごとに即時無名関数で括る。

パッケージ内ではパッケージなしでアクセスし、外からアクセスするときはパッケージ名を付してアクセス。

これで一応、パッケージ化とコーディングの簡易化を両立させることができる。

パッケージ名について

パッケージ名は、「世界規模での名前衝突を避ける」ように潔癖を極めるなら、Javaで行われているようなドメイン名管理が答となる。

com.taustation.game.MyClass

do ->
  class MyClass
    ...

com.taustation.game.MyClass

do ->

class MyClass

...

なお、Javaの場合はimport文で指定したパッケージはクラス名のみで使えるが、Javascriptではエイリアスを明示的に指定しなければならないらしい。

JavaScriptスタイルガイドでは、「長い型名をエイリアスし可読性を向上させる」ために以下のように示唆されている。

“ローカルのエイリアスを使うことで長い型名の可読性を向上できる場合はそうしてください. エイリアスの名前は型名の最後の部分にしてください.”

/**
 * @constructor
 */
some.long.namespace.MyClass = function() {
};

/**
 * @param {some.long.namespace.MyClass} a
 */
some.long.namespace.MyClass.staticHelper = function(a) {
  ...
};

myapp.main = function() {
  var MyClass = some.long.namespace.MyClass;
  var staticHelper = some.long.namespace.MyClass.staticHelper;
  staticHelper(new MyClass());
};

/**

* @constructor

some.long.namespace.MyClass = function() {

};

/**

* @param {some.long.namespace.MyClass} a

some.long.namespace.MyClass.staticHelper = function(a) {

...

};

myapp.main = function() {

var MyClass = some.long.namespace.MyClass;

var staticHelper = some.long.namespace.MyClass.staticHelper;

staticHelper(new MyClass());

};

なお、npmのサイトでいろいろなパッケージを見てみると、区切りにはアンダースコア(_)ではなくマイナス(-)を使っている。

CoffeeScript – タイマ

2016-07-10 / tau / コメントする

setInterval

setInterval()関数の引数に、アニメーションフレームを描画する関数と時間間隔を指定する。時間間隔はミリ秒単位。

描画の開始／停止をコントロールするには、setInterval()関数の戻り値を変数に保存しておき、停止するときにclearInterval()関数の引数でその変数を指定する。

timer = setInterval(drawFunction(), intervalInMilliSeconds)

clearInterval(timer)

timer = setInterval(drawFunction(), intervalInMilliSeconds)

clearInterval(timer)

一時停止／再開の機能は特に実装されていないが、描画関数を工夫することで可能。

描画関数を、以下のように無名関数で書くこともできる。

timer = setInterval ->
  複数行の処理
  return
, interval

timer = setInterval ->

複数行の処理

return

, interval

この処理を他のオブジェクトのメソッドの中に書いて、オブジェクトのプロパティを利用する場合は、1行目のアローをファットアロー(=>)にする。

CoffeeScript – クラスのメソッド

2016-07-03 / tau / コメントする

アクセス可能性

以下のコードで、クラスの関数へのアクセス可能性を確認する。

class Person
  method1: -> console.log("method1")
  @method2: -> console.log("method2")
  method3 = -> console.log("method3")
  @method4 = -> console.log("method4")

  method: ->
    # method1() # Error, is not defined
    # method2() # Error, is not defined
    method3()   # method3
    # method4() # Error, is not defined

  method_a: ->
    @method1()   # method1
    # @method2() # Error, is not a function
    # @method3() # Error, is not a function
    # @method4() # Error, is not a function

# Person.method1() # Error, is not a function
Person.method2()   # method2
# Person.method3() # Error, is not a function
Person.method4()   # method4

console.log()
john = new Person()
john.method1()   # method1
# john.method2() # Error, is not a function
# john.method3() # Error, is not a function
# john.method4() # Error, is not a function

console.log()
john.method()

console.log()
john.method_a()

class Person

method1: -> console.log("method1")

@method2: -> console.log("method2")

method3 = -> console.log("method3")

@method4 = -> console.log("method4")

method: ->

# method1() # Error, is not defined

# method2() # Error, is not defined

method3() # method3

# method4() # Error, is not defined

method_a: ->

@method1() # method1

# @method2() # Error, is not a function

# @method3() # Error, is not a function

# @method4() # Error, is not a function

# Person.method1() # Error, is not a function

Person.method2() # method2

# Person.method3() # Error, is not a function

Person.method4() # method4

console.log()

john = new Person()

john.method1() # method1

# john.method2() # Error, is not a function

# john.method3() # Error, is not a function

# john.method4() # Error, is not a function

console.log()

john.method()

console.log()

john.method_a()

各関数へのアクセス可能性は以下の通り。

定義＼引用	クラス	インスタンス	メソッド内 (@なし)	メソッド内 (@つき)
`fnc: ->`	TypeError	○	ReffError	○
`@fnc: ->`	○	TypeError	ReffError	TypeError
`fnc = ->`	TypeError	TypeError	○	TypeError
`@fnc = ->`	○	TypeError	ReffError	TypeError

なお、上記コードの定義部分のJavaScriptコンパイル結果は以下の通り。

(function() {
  var Person, john;

  Person = (function() {
    var method3;

    function Person() {}

    Person.prototype.method1 = function() {
      return console.log("method1");
    };

    Person.method2 = function() {
      return console.log("method2");
    };

    method3 = function() {
      return console.log("method3");
    };

    Person.method4 = function() {
      return console.log("method4");
    };

(function() {

var Person, john;

Person = (function() {

var method3;

function Person() {}

Person.prototype.method1 = function() {

return console.log("method1");

};

Person.method2 = function() {

return console.log("method2");

};

method3 = function() {

return console.log("method3");

};

Person.method4 = function() {

return console.log("method4");

};

クラス・メソッド

クラス内で@つきでメソッドを定義すると、クラスメソッドになる。

class MyClass
  @method1: -> console.log("method1")
  @method2 = -> console.log("method2")

class MyClass

@method1: -> console.log("method1")

@method2 = -> console.log("method2")

上記のいずれもJavaScriptへのコンパイル結果は同じになる。

  Person = (function() {

    function Person() {}

    Person.method1 = function() {
      return console.log("method1");
    };

    Person.method2 = function() {
      return console.log("method2");
    };

Person = (function() {

function Person() {}

Person.method1 = function() {

return console.log("method1");

};

Person.method2 = function() {

return console.log("method2");

};

クラスメソッドは、クラス内で呼び出すときでもクラス名をつける。

class MyClass
  @classMethod: -> console.log("Public Static")
  instanceMethod: ->
    console.log("Instance Method calling...")
    MyClass.classMethod()

MyClass.classMethod()
myObj = new MyClass()
myObj.instanceMethod()

# 実行結果
# Public Static
# Instance Method calling...
# Public Static

class MyClass

@classMethod: -> console.log("Public Static")

instanceMethod: ->

console.log("Instance Method calling...")

MyClass.classMethod()

myObj = new MyClass()

myObj.instanceMethod()

# 実行結果

# Public Static

# Instance Method calling...

# Public Static

publicなインスタンス・メソッド

最も多く用いる形で、クラス内でコロン(:)によって関数を定義すると、インスタンス・メソッドになる。

class MyClass
  method: -> console.log("method")

1 2	class MyClass method: -> console.log("method")

JavaScriptへのコンパイル結果では、prototype宣言されている。

(function() {
  var MyClass;

  MyClass = (function() {

    function MyClass() {}

    MyClass.prototype.method = function() {
      return console.log("method");
    };

(function() {

var MyClass;

MyClass = (function() {

function MyClass() {}

MyClass.prototype.method = function() {

return console.log("method");

};

同じクラスのメソッド内で呼び出すときは、@つきで。

class MyClass
  method1: -> console.log("metod1")
  method2: ->
    console.log("method2 calling...")
    @method1()

myObj = new MyClass()
myObj.method2()

# 実行結果
# method2 calling...
# metod1

class MyClass

method1: -> console.log("metod1")

method2: ->

console.log("method2 calling...")

@method1()

myObj = new MyClass()

myObj.method2()

# 実行結果

# method2 calling...

# metod1

privateなクラス・メソッド

クラス内でfnc = ->のように定義すると、クラスの外からは見えないprivateなメソッドになる。

class MyClass
  publicMethod: ->
    console.log("Public Method calling...")
    privateMethod()

  privateMethod = ->
    console.log("Private Method")

myObj = new MyClass()
myObj.publicMethod()
# myObj.privateMethod() # Type Error: is not a function

# 実行結果
# Public Method calling...
# Private Method

class MyClass

publicMethod: ->

console.log("Public Method calling...")

privateMethod()

privateMethod = ->

console.log("Private Method")

myObj = new MyClass()

myObj.publicMethod()

# myObj.privateMethod() # Type Error: is not a function

# 実行結果

# Public Method calling...

# Private Method

JavaScriptコードでは、クラス内のスコープで宣言されており、外からは見えない。

  MyClass = (function() {
    var privateMethod;

    function MyClass() {}

    MyClass.prototype.publicMethod = function() {
      console.log("Public Method calling...");
      return privateMethod();
    };

    privateMethod = function() {
      return console.log("Private Method");
    };

    return MyClass;

  })();

MyClass = (function() {

var privateMethod;

function MyClass() {}

MyClass.prototype.publicMethod = function() {

console.log("Public Method calling...");

return privateMethod();

};

privateMethod = function() {

return console.log("Private Method");

};

return MyClass;

})();

CoffeeScript – クラスのプロパティ

2016-07-03 / tau / コメントする

アクセス可能性

以下のコードで、クラスに関する変数へのアクセス可能性を確認する。

class Person
  member1 = 1
  @meber2 = 2
  member3: 3
  @member4: 4

  constructor: ->
    member5 = 5
    @member6 = 6

  dispMember1: ->
    console.log(member1) # 1
    # console.log(member2) # Error, not defined
    # console.log(member3) # Error, not defined
    # console.log(member4) # Error, not defined
    # console.log(member5) # Error, not defined
    # console.log(member6) # Error, not defined
    console.log("-----")

  dispMember2: ->
    console.log(@member1) # undefined
    console.log(@member2) # undefined
    console.log(@member3) # 3
    console.log(@member4) # undefined
    console.log(@member5) # undefined
    console.log(@member6) # 6
    console.log("-----")

john = new Person()

console.log(Person.member1) # undefined
console.log(Person.member2) # undefined
console.log(Person.member3) # undefined
console.log(Person.member4) # 4
console.log(Person.member5) # undefined
console.log(Person.member6) # undefined
console.log("-----")

console.log(john.member1) # undefined
console.log(john.member2) # undefined
console.log(john.member3) # 3
console.log(john.member4) # undefined
console.log(john.member5) # undefined
console.log(john.member6) # 6
console.log("-----")

john.dispMember1()

john.dispMember2()

class Person

member1 = 1

@meber2 = 2

member3: 3

@member4: 4

constructor: ->

member5 = 5

@member6 = 6

dispMember1: ->

console.log(member1) # 1

# console.log(member2) # Error, not defined

# console.log(member3) # Error, not defined

# console.log(member4) # Error, not defined

# console.log(member5) # Error, not defined

# console.log(member6) # Error, not defined

console.log("-----")

dispMember2: ->

console.log(@member1) # undefined

console.log(@member2) # undefined

console.log(@member3) # 3

console.log(@member4) # undefined

console.log(@member5) # undefined

console.log(@member6) # 6

console.log("-----")

john = new Person()

console.log(Person.member1) # undefined

console.log(Person.member2) # undefined

console.log(Person.member3) # undefined

console.log(Person.member4) # 4

console.log(Person.member5) # undefined

console.log(Person.member6) # undefined

console.log("-----")

console.log(john.member1) # undefined

console.log(john.member2) # undefined

console.log(john.member3) # 3

console.log(john.member4) # undefined

console.log(john.member5) # undefined

console.log(john.member6) # 6

console.log("-----")

john.dispMember1()

john.dispMember2()

各変数へのアクセス可能性は以下の通り。

定義＼引用		クラス	インスタンス	メソッド内 (@なし)	メソッド内 (@つき)
クラス直下	`v=val`	undef	undef	○	undef
	`@v=val`	undef	undef	RefError	undef
	`v:val`	undef	○	RefError	○
	`@v:val`	○	undef	RefError	undef
コンストラクタ	`v=val`	undef	undef	RefError	undef
コンストラクタ	`@v=val`	undef	○	RefError	○

この表から、以下のように整理できる。特にpublicなインスタンス・プロパティとstaticなクラス・プロパティを使っていくことになる。

クラス直下で`@v:val`定義	staticなクラス・プロパティ
クラス直下で`v:val`	publicなインスタンス・プロパティ
コンストラクタで`@v=val`	publicなインスタンス・プロパティ
クラス直下で`v=va`l	privateなクラス・プロパティ

なお、定義部分のJavaScriptへのコンパイル結果は以下の通り。

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

  Person = (function() {
    var member1;

    member1 = 1;

    Person.meber2 = 2;

    Person.prototype.member3 = 3;

    Person.member4 = 4;

    function Person() {
      var member5;
      member5 = 5;
      this.member6 = 6;
    }

    return Person;

  })();

}).call(this);

// Generated by CoffeeScript 1.10.0

(function() {

var Person;

Person = (function() {

var member1;

member1 = 1;

Person.meber2 = 2;

Person.prototype.member3 = 3;

Person.member4 = 4;

function Person() {

var member5;

member5 = 5;

this.member6 = 6;

}

return Person;

})();

}).call(this);

クラス・プロパティ

クラス直下で@v:valでプロパティを定義する場合、プロパティはクラスに一つの共有のものとして扱われる。コンパイルされたJavaScriptコードでは正に”[クラス名].[プロパティ名]“となっている

インスタンスの中から参照する場合も、[クラス名].[プロパティ名]で参照する。

class Person
  @member: 1

  dispMember: ->
    console.log(Person.member)

john = new Person()

console.log(Person.member) # 1
john.dispMember()          # 1
Person.member++
console.log(Person.member) # 2
john.dispMember()          # 2

class Person

@member: 1

dispMember: ->

console.log(Person.member)

john = new Person()

console.log(Person.member) # 1

john.dispMember() # 1

Person.member++

console.log(Person.member) # 2

john.dispMember() # 2

publicなインスタンス・プロパティ

クラス直下でv:valと定義した場合とコンストラクタで@v=valと定義した場合は、いずれもインスタンス・プロパティとして扱われる。

class Person
  member1: 1

  constructor: ->
    @member2 = 2

  dispMember: ->
    console.log(@member1)
    console.log(@member2)

john = new Person()
luice = new Person()

console.log("--John--")
console.log(john.member1) # 1
console.log(john.member2) # 2
console.log("--Luice--")
console.log(john.member1) # 1
console.log(john.member2) # 2

john.member1 *= 10
john.member2 *= 10

console.log("--John--")
john.dispMember()
# 10
# 20
console.log("--Luice--")
luice.dispMember()
# 1
# 2

class Person

member1: 1

constructor: ->

@member2 = 2

dispMember: ->

console.log(@member1)

console.log(@member2)

john = new Person()

luice = new Person()

console.log("--John--")

console.log(john.member1) # 1

console.log(john.member2) # 2

console.log("--Luice--")

console.log(john.member1) # 1

console.log(john.member2) # 2

john.member1 *= 10

john.member2 *= 10

console.log("--John--")

john.dispMember()

# 10

# 20

console.log("--Luice--")

luice.dispMember()

# 1

# 2

挙動としては同じなのでどちらでもよさそうだが、インスタンス・プロパティとしてはコンストラクタで定義する形式の方がよいと考えた。

以下のように、それぞれの定義方法でJavaScriptのコードが異なるが、メソッドのようにクラス内で共通化したい場合はprototypeがよいが、そもそもインスタンスごとに異なる値をとることを想定しているプロパティの場合は、thisによる定義の方が意味に即している。

class Person
  member1: 1
　# JavaSceiptでは、Personクラスの定義の冒頭で
  # "Person.prototype.member1 = 1"と定義される。

  constructor: ->
    @member2 = 2
    # JavaScriptでは、Person()コンストラクタの中で
    # "this.member2 = 2"と定義される。

class Person

member1: 1

　# JavaSceiptでは、Personクラスの定義の冒頭で

# "Person.prototype.member1 = 1"と定義される。

constructor: ->

@member2 = 2

# JavaScriptでは、Person()コンストラクタの中で

# "this.member2 = 2"と定義される。

privateなクラス・プロパティ

クラス直下でv=valと定義すると、そのクラスの各インスタンスで共有されたprivateなプロパティになる。

class Person
  _member = 1

  getMember: ->
    return _member

  setMember: (m) ->
    _member = m

john = new Person()
luice = new Person()

console.log("--John--")
console.log(john._member)      # undefined
console.log(john.getMember())  # 1
console.log("--Luice--")
console.log(luice._member)     # undefined
console.log(luice.getMember()) # 1

console.log()
john.setMember(5)
console.log(john.getMember())  # 5
console.log(luice.getMember()) # 5

class Person

_member = 1

getMember: ->

return _member

setMember: (m) ->

_member = m

john = new Person()

luice = new Person()

console.log("--John--")

console.log(john._member) # undefined

console.log(john.getMember()) # 1

console.log("--Luice--")

console.log(luice._member) # undefined

console.log(luice.getMember()) # 1

console.log()

john.setMember(5)

console.log(john.getMember()) # 5

console.log(luice.getMember()) # 5

JavaScriptコードを見るとクラス宣言の最初でvar宣言されているため、クラス内スコープで外からは見えない変数となる。

  Person = (function() {
    var _member;

    function Person() {}

    _member = 1;

Person = (function() {

var _member;

function Person() {}

_member = 1;

CoffeeScript – jQueryによるINPUT要素の操作

2016-07-02 / tau / コメントする

jQueryによるINPUT要素の操作

ボタンのテスト

ここではボタン操作に対するイベントを確認している。

ボタンはinput要素のタイプの一つとして作成される。
ボタンが押された時のイベントはonclick属性で定義してもよいが、ここではそれを使わず、jQueryのハンドラで処理している。

<input type="button" id="btn_button" value="押してください" /><br />

1	<input type="button" id="btn_button" value="押してください" /><br />

ボタンが押下されたときのイベントは、(そのボタンが動的に後から追加されたものでなければ)click()で捕捉される。

  $("#btn_button").click ->
    alert("ボタンを押しましたね。")

1 2	$("#btn_button").click -> alert("ボタンを押しましたね。")

テキストボックスのテスト

入力：
出力：

ここではテキストボックスの内容の取得や書き込みについて確認している。

入力：<input type="text" id="txt_input" /><br />
出力：<input type="text" id="txt_output" /><br />
<input type="button" id="btn_text" value="コピー" />

入力：<input type="text" id="txt_input" /><br />

出力：<input type="text" id="txt_output" /><br />

テキストボックスの内容の取得や設定はval()メソッドで行う。

  $("#btn_text").click ->
    txt = $("#txt_input").val()
    $("#txt_output").val(txt)

$("#btn_text").click ->

txt = $("#txt_input").val()

$("#txt_output").val(txt)

チェックボックスのテスト

同意しますか？

チェックボックスの確認。

<p>
<label><input type="checkbox" id="chk_accept" value="accept" />同意しますか？</label>
</p>
<input type="button" id="btn_checkbox" value="決定">

<p>

<label><input type="checkbox" id="chk_accept" value="accept" />同意しますか？</label>

</p>

チェックボックスのチェック状態の取得には、prop()メソッドを用いる。

  $("#btn_checkbox").click ->
    if $("#chk_accept").prop("checked")
      alert("あなたは同意しました。")
    else
      alert("あなたは同意しませんでした。")

$("#btn_checkbox").click ->

if $("#chk_accept").prop("checked")

alert("あなたは同意しました。")

else

alert("あなたは同意しませんでした。")

ラジオボタンのテスト

通知エリア

One　Two　Three

Dog　Monkey　Pheasant

ラジオボタンの動作を確認している。ここでは選択状態が変わるごとにイベントが発生して、通知エリアの表示が変わる。

<div id="radio_notation">通知エリア</div>

<p>
<label><input type="radio" name="number" value="壱" onChange="onChangeNumber()" />One</label>
<label><input type="radio" name="number" value="弐" onChange="onChangeNumber()"checked="checked" />Two</label>
<label><input type="radio" name="number" value="参"onChange="onChangeNumber()" />Three</label>
</p>
<p>
<label><input type="radio" name="animal" id="dog" value="犬" />Dog</label>
<label><input type="radio" name="animal" id="monkey"value="猿" />Monkey</label>
<label><input type="radio" name="animal" id="pheasant" value="雉" checked="checked" />Pheasant</label>
</p>

<div id="radio_notation">通知エリア</div>

<p>

<label><input type="radio" name="number" value="参"onChange="onChangeNumber()" />Three</label>

</p>

<p>

<label><input type="radio" name="animal" id="monkey"value="猿" />Monkey</label>

<label><input type="radio" name="animal" id="pheasant" value="雉" checked="checked" />Pheasant</label>

</p>

上段はブラウザ側のonchange属性でイベントハンドラを指定し、下段はjQueryのハンドラを使っている。

  # ブラウザ側で定義したイベントハンドラ
  window.onChangeNumber = ->
    number = $("input[name=number]:checked").val()
    $("#radio_notation").html("#{number}番が選択されました")

  # jQuery側で準備されたイベントハンドラ
  $("input[name=animal]").change ->
    animal = $("input[name=animal]:checked").val()
    $("#radio_notation").html("#{animal}を連れていく")

# ブラウザ側で定義したイベントハンドラ

window.onChangeNumber = ->

number = $("input[name=number]:checked").val()

$("#radio_notation").html("#{number}番が選択されました")

# jQuery側で準備されたイベントハンドラ

$("input[name=animal]").change ->

animal = $("input[name=animal]:checked").val()

$("#radio_notation").html("#{animal}を連れていく")

セレクトボックスのテスト

通知エリア

セレクトボックス(ドロップダウンリスト)の例。

ボックス内の選択肢を選ぶたびに通知エリアの表示が変わる
“LONDONへ”ボタンを押すと、ロンドンが選択された状態になる。
“追加”ボタンで選択肢に”パリ”が追加され、”削除”ボタンで削除される

<div id="select_notation">通知エリア</div>

<select id="capital">
  <option value="Tokyo">東京</option>
  <option value="Washington D.C." selected>ワシントンDC</option>
  <option value="London">ロンドン</option>
</select><br />
<input type="button" id="btn_select" value="Londonへ"><br />
<input type="button" id="btn_select_append" value="追加"><br />
<input type="button" id="btn_select_delete" value="削除">

<div id="select_notation">通知エリア</div>

<option value="Washington D.C." selected>ワシントンDC</option>

</select><br />

セレクトボックスの状態変化のイベントは、change()メソッドで捕捉される。

“追加”と”削除”のボタンはprop()メソッドを使って選択状態をトグルさせているが、ページのテーマ／デザインによっては明確にはわからないことがある。

  appended = no

  capital = $("#capital").val()

  $("#select_notation").html("首都は#{capital}が選択されています")

  $("#capital").change ->
    capital = $(this).val()
    capitalText = $("#capital option:selected").text()
    $("#select_notation").html("首都が#{capital}=#{capitalText}に変更されました")

  $("#btn_select").click ->
    $("#capital").val("London")

  $("#btn_select_append").click ->
    $("#capital").append('<option value="Paris">パリ</option>')
    $("#btn_select_append").prop("disabled", true)
    $("#btn_select_delete").prop("disabled", false)

  $("#btn_select_delete").click ->
    $("#capital option[value='Paris']").remove()
    $("#btn_select_append").prop("disabled", false)
    $("#btn_select_delete").prop("disabled", true)

appended = no

capital = $("#capital").val()

$("#select_notation").html("首都は#{capital}が選択されています")

$("#capital").change ->

capital = $(this).val()

capitalText = $("#capital option:selected").text()

$("#select_notation").html("首都が#{capital}=#{capitalText}に変更されました")

$("#btn_select").click ->

$("#capital").val("London")

$("#btn_select_append").click ->

$("#capital").append('<option value="Paris">パリ</option>')

$("#btn_select_append").prop("disabled", true)

$("#btn_select_delete").prop("disabled", false)

$("#btn_select_delete").click ->

$("#capital option[value='Paris']").remove()

$("#btn_select_append").prop("disabled", false)

$("#btn_select_delete").prop("disabled", true)

CoffeeScript – CSソースとJSコンパイル結果

2016-07-02 / tau / コメントする

概要

様々なソースに対するコンパイル結果。

クロージャと変数のスコープ

グローバルなし

グローバルのつもりでも、必ず無名関数で括られる。

a = 1

a = 1

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

  a = 1;

}).call(this);

// Generated by CoffeeScript 1.10.0

(function() {

var a;

a = 1;

}).call(this);

変数の宣言位置

変数は、それが属する関数の先頭で必ずvar宣言される。つまり、各変数はそれが属する関数内のローカルスコープを持つ。

func = ->
  console.log("start")
  a = 1

b = 2

func = ->

console.log("start")

a = 1

b = 2

// Generated by CoffeeScript 1.10.0
(function() {
  var func, b;

  func = function() {
    var a;
    console.log("start");
    return a = 1;
  };

  b = 2;

}).call(this);

// Generated by CoffeeScript 1.10.0

(function() {

var func, b;

func = function() {

var a;

console.log("start");

return a = 1;

};

b = 2;

}).call(this);

引数なしの無名関数によるクロージャ

->
  console.log("here")

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

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

}).call(this);

// Generated by CoffeeScript 1.10.0

(function() {

return console.log("here");

});

}).call(this);

引数ありの無名関数によるクロージャ

(x) ->
  console.log(x * 2)

1 2	(x) -> console.log(x * 2)

// Generated by CoffeeScript 1.10.0
(function() {
  (function(x) {
    return console.log(x * 2);
  });

}).call(this);

// Generated by CoffeeScript 1.10.0

(function() {

(function(x) {

return console.log(x * 2);

});

}).call(this);

クロージャとdoの違い

->

do ->

do ->

// Generated by CoffeeScript 1.10.0
(function() {
  (function() {});

  (function() {})();

}).call(this);

// Generated by CoffeeScript 1.10.0

(function() {

(function() {});

(function() {})();

}).call(this);

クラス

プロパティの宣言

class Person
  member1 = 1
  @meber2 = 2
  member3: 3
  @member4: 4

  constructor: ->
    member5 = 5
    @member6 = 6

class Person

member1 = 1

@meber2 = 2

member3: 3

@member4: 4

constructor: ->

member5 = 5

@member6 = 6

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

  Person = (function() {
    var member1;

    member1 = 1;

    Person.meber2 = 2;

    Person.prototype.member3 = 3;

    Person.member4 = 4;

    function Person() {
      var member5;
      member5 = 5;
      this.member6 = 6;
    }

    return Person;

  })();

}).call(this);

// Generated by CoffeeScript 1.10.0

(function() {

var Person;

Person = (function() {

var member1;

member1 = 1;

Person.meber2 = 2;

Person.prototype.member3 = 3;

Person.member4 = 4;

function Person() {

var member5;

member5 = 5;

this.member6 = 6;

}

return Person;

})();

}).call(this);