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);

JS/ES – JQuery – 基本

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

準備

JQueryのライブラリーを読み込む。

CDN (Contents Delivery Network)から読み込む場合の例は以下のとおり。

<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>

ライブラリーをダウンロードする場合はURLをローカルのファイルパスにする。

記述位置～readyイベント

HTML要素に作用する処理（スタイル変更など）はDOMの読み込み後でなければならない。

JQueryスクリプトの記述位置記述方法

オブジェクトとメソッド

オブジェクトの作成

jQueryの操作対象はページのDOM要素だが、jQueryでは、DOMのidやクラス名を使ってそのDOMのオブジェクトを作成し、それらのメソッドを通して操作する。

オブジェクトの作成はjQuery()コンストラクタを使い、セレクタとしてcssのセレクタを指定。

jQuery(セレクタ)　または　$(セレクタ)

1	jQuery(セレクタ)　または　$(セレクタ)

先の例では、id=”header”を与えられたオブジェクトを以下の様に作成している。

jQuery("#header")　または　$("#header")

1	jQuery("#header")　または　$("#header")

要素指定

様々な要素指定方法を参照。

メソッドによる操作

メソッドは各オブジェクトのクラスに定義されており、他のオブジェクト指向言語と同じ形で呼び出す。

jQuery("#header").css("color", "blue")

1	jQuery("#header").css("color", "blue")

この例では”#header”で作成したオブジェクトに対して、cssメソッドで前景色を青にするよう指定している。

これをエイリアスを用いて書くと以下の通り。

$("#header").css("color", "blue")

1	$("#header").css("color", "blue")

メソッドの機能

メソッドには、機能に応じて以下の種類がある。

オブジェクトの情報を取得するもの
オブジェクトに対して操作を行うもの
オブジェクトのイベント処理を行うもの

JQuery – メソッドに詳細。

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)

内包表記

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