jQuery – イベント

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

ソース別イベント

個別イベントハンドラの一般形

要素に発生しうるイベントは下記一覧の通りで、イベントが発生した時、対応したハンドラが呼ばれる。

$(セレクタ).イベント名(コールバック)

1	$(セレクタ).イベント名(コールバック)

たとえばクリックイベントに対する処理の記述は以下の通り。

$("div").click ->
  # ここに処理内容を記述

1 2	$("div").click -> # ここに処理内容を記述

ただしこの形式のハンドラは、動的に追加された要素には対応していない。

マウスイベント

click	クリック時
dblclick	ダブルクリック時
mousedown	マウスボタンを押した時
mouseup	マウスボタンを離したとき
mouseover	マウスカーソルが要素内に入った時(子要素を含む)
mouseout	マウスカーソルが要素から出たとき(子要素を含む)
mouseenter	マウスカーソルが要素に入った時(子要素は除く)
mouseleave	マウスカーソルが要素から出た時(子要素は除く)
mousemove	要素内でマウスカーソルが移動した時
hover	mouseenter / mouseleaveを一つにまとめたもの
toggle	クリックの度に異なる処理を実行。v1.9以降廃止。

キーイベント

keydown	キーを押した時
keypress	キー入力があった時
keyup	キーを離した時
focusin	フォーカスされた時(子要素を含む)
focusout	フォーカスが外れた時(子要素を含む)

フォームイベント

focus	フォーカスされた時(子要素は除く)
blur	フォーカスが外れた時(子要素は除く)
change	内容が変更された時
select	文字が選択された時
submit	データ送信時

ブラウザイベント

resize	リサイズした時
scroll	スクロールした時
error	エラーが発生した時

ロードイベント

load	読み込みが完了した時
unload	ページから離れる時
ready	DOMの読み込みが完了した時

イベントハンドラ・アタッチメント

イベントハンドラを要素にアタッチするメソッド。

たとえばon()メソッドの書き方の一つとして以下がある。

$(探索範囲のセレクタ).on(イベント名, セレクタ, ハンドラ)

1	$(探索範囲のセレクタ).on(イベント名, セレクタ, ハンドラ)

on()メソッドのハンドラとして、1つのイベントオブジェクトを引数に持つ関数を指定する。

$("div").on "click", (evt) ->
  alert("clicked")

1 2	$("div").on "click", (evt) -> alert("clicked")

探索範囲を限定してオブジェクトを探索する場合は以下の構文を用いる。

  $("body").on "click", "h1", (evt) ->
    alert("click!")

1 2	$("body").on "click", "h1", (evt) -> alert("click!")

下表のbind～offまでのうち、現在はon/offメソッドのみ使えばよい。

また、on/offメソッドに指定できるイベントは、上記ソース別イベントの内、hoverとtoggle以外で指定する。

bind	jQueryで最初に登場したアタッチメント。動的な要素に対応していないため、v1.3でliveが導入される。
unbind	bindで設定された処理を解除。
live	動的な要素に対応したアタッチメント。処理負荷が高いため、v1.9で廃止された。
die	liveで設定された処理を解除。v1.9で廃止。
delegate	イベントの調査範囲を限定できるアタッチメント。v1.7で”on”に移行。
undelegate	delegateで設定された処理を解除。
on	イベントハンドラ・アタッチメントの最終形。
off	onで設定されたイベント発生時の処理を解除。
one	1回だけ利用できるイベント発生時の処理を設定。構文はonと同じ。
triggerHandler	要素に指定したイベントを発生させるが、要素に対するブラウザ標準の機能は実行されない。
trigger	要素に指定したイベントを発生させ、ブラウザ標準の機能も実行させる。

イベントオブジェクト

概要

イベントオブジェクトはイベントハンドラに必ず渡されるobjectオブジェクト。イベント発生ごとに作成される。

基本形のコンストラクタでは、引数にイベント名を指定して作成する。たとえばclickイベントに対応するイベントオブジェクトは以下の様に作成される。

jQuery.Event("click")

1	jQuery.Event("click")

プロパティ

e.type	イベントの種類
e.data	イベントハンドラに渡された情報
e.pageX	イベントが発生したX座標(ブラウザの座標系)
e.pageY	イベントが発生したY座標(ブラウザの座標系)
e.timeStamp	イベントが発生した時間(1970-01-01からのミリ秒)
e.which	正規化されたキーコード
e.result	直前に実行したイベントハンドラが返した値
e.namespace	名前空間に設定された名称
e.target	イベントが発生したDOM要素
e.currentTarget	現在のDOM要素
e.delegateTarget	デリゲート時の調査範囲のDOM要素
e.relatedTarget	イベントの発生に関連したDOM要素

メソッド

e.stopPropagation(): バブリング(親要素方向へのイベントの伝播)を停止。
e.stopImmediatePropagation(): バブリングとイベントハンドラの実行を停止。
e.preventDefault(): ブラウザ標準の機能を停止。
e.isPropagationStopped(): stopPropagation()メソッドが実行されたかを調査。
e.isImmediatePropagationStopped(): stopImmediatePropagation()メソッドが実行されたかを調査。
e.isDefaultPrevented(): preventDefault()メソッドが実行されたかを調査。

jQuery – メソッド

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

値の取得

メソッドを通して、オブジェクトの持つプロパティなどを取得する。

$(セレクタ).メソッド(引数)

1	$(セレクタ).メソッド(引数)

※引数がない場合もある。

<h1 id="header">jQueryテスト</h1>

<script type="text/coffeescript">
$ ->
  console.log($("h1").text())
</script>

<h1 id="header">jQueryテスト</h1>

$ ->

console.log($("h1").text())

</script>

オブジェクトの操作

メソッドによりオブジェクトにプロパティを設定したり、動作させたりする。

$(セレクタ).メソッド(引数)

1	$(セレクタ).メソッド(引数)

※引数がない場合もある

<h1 id="header">jQueryテスト</h1>

<script type="text/coffeescript">
$ ->
  $("h1").hide(3000)
</script>

<h1 id="header">jQueryテスト</h1>

$ ->

$("h1").hide(3000)

</script>

イベント処理

構文1

オブジェクトに発生したイベントに対応して呼び出されるハンドラで、引数に処理を記述。

この構文では、後から動的に追加された要素には対応できない。

$(セレクタ).イベントハンドラ(コールバック)

1	$(セレクタ).イベントハンドラ(コールバック)

ハンドル用の関数を別に定義して引数に関数名を書いてもよいが、多くの場合無名関数が使われる。

$ ->
  $("h1").click ->
    console.log("click!")

$ ->

$("h1").click ->

console.log("click!")

構文2

動的に追加された要素にも対応するため、イベントが発生するたびに指定された範囲内でセレクタで指定されたオブジェクトを探索する。

この場合のon()メソッドは”イベントハンドラ・アタッチメント”の一つで、特定のイベントとそれに対するハンドラを結び付ける機能を持つ。

$(探索範囲のセレクタ).on(イベント名、セレクタ、ハンドラ)

1	$(探索範囲のセレクタ).on(イベント名、セレクタ、ハンドラ)

イベント名とセレクタは文字列で指定。

以下の例では、body要素の中の任意の要素がクリックされるとalertが立ち上がる。この場合は、H1、H2のいずれをクリックしてもalertが立ち上がる。

<body>

<h1>H1</h1>
<h2>H2</h2>

<script type="text/coffeescript">
$ ->
  $("body").on "click", (evt) ->
    alert("click!")
</script>


</body>

<body>

$ ->

$("body").on "click", (evt) ->

alert("click!")

</script>

</body>

また、on()メソッドの引数を以下のようにすると、H1をクリックしても反応せず、H2をクリックした時だけalertが立ち上がる。

  $("body").on "click", "h2", (evt) ->

1	$("body").on "click", "h2", (evt) ->

イベントの種類、イベントハンドラ・アタッチメントについては、jQueryのイベントを参照。

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)

内包表記

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