JS/ES – Promise

2022-12-30 / tau / コメントする

非同期実行の簡単な例

以下の例では2つのブロックが非同期に実行され、コードが書かれた順番ではなく実行時間の短い順に出力される。

setTimeout(() => {
  console.log('Long execution');
}, 300);

setTimeout(() => {
  console.log('Short execution');
}, 100);

// 100ms execution
// 300ms execution

setTimeout(() => {

console.log('Long execution');

}, 300);

setTimeout(() => {

console.log('Short execution');

}, 100);

// 100ms execution

// 300ms execution

Promiseによる実行順序の保証

基本形

Promiseオブジェクト.then()

この基本形では、以下の手順で処理間を同期させる。

Promiseオブジェクト生成
- 生成時の引数で渡す無名関数に先行処理を記述
- 無名関数の引数で処理終了を発行する関数(resolve)を受け取り
- 先行処理終了のところでresolve関数を実行
Promiseオブジェクトのthenメソッドを記述
- thenメソッドの引数で渡す無名処理に後続処理を記述
- この後続処理は、先行処理のresolve関数が実行された後に実行される

p = new Promise(resolve => {
  先行処理
　resolve();
});

p.then(() => {
  後続処理
});

p = new Promise(resolve => {

先行処理

　resolve();

});

p.then(() => {

後続処理

});

処理完了のための関数名は任意だが、staticメソッドと同じ関数名のresolveが使われる。

以下の例では、Promise・・・・・・・・・・・・・無名関数の引数をresolveとして受け取り、resolve関数を300ms待機後の表示の後に実行している。

そしてその実行後に100ms待機の処理が実行される。

let p = new Promise(resolve => {
  setTimeout(() => {
    console.log('300ms execution');
    resolve();
  }, 300);
});

p.then(() => {
  setTimeout(() => {
    console.log('100ms execution');
  }, 100);
});

// 300ms execution
// 100ms execution

let p = new Promise(resolve => {

setTimeout(() => {

console.log('300ms execution');

resolve();

}, 300);

});

p.then(() => {

setTimeout(() => {

console.log('100ms execution');

}, 100);

});

// 300ms execution

// 100ms execution

Promiseオブジェクトのthenメソッドには引数に無名関数を指定する。Promiseオブジェクトで設定したresolveメソッドが実行された後に引数の無名関数が実行される。

以下の例では、上のPromiseオブジェクトで設定した300ms待機後の表示の後に、thenメソッドで設定した100ms待機・表示が実行される。

// Promise.thenメソッドの無名関数に待機後処理を記述
promise.then(() => {
  setTimeout(() => {
    console.log('100ms execution');
  }, 100);
});

// 300ms execution
// 100ms execution

// Promise.thenメソッドの無名関数に待機後処理を記述

promise.then(() => {

setTimeout(() => {

console.log('100ms execution');

}, 100);

});

// 300ms execution

// 100ms execution

new Promise～then

生成したPromiseオブジェクトから直接thenメソッドを実行してもよい。

new Promise(resolve => {
  setTimeout(() => {
    console.log('300ms execution');
    resolve();
  }, 300);
}).then(() => {
  setTimeout(() => {
    console.log('100ms execution');
  }, 100);
});

// 300ms execution
// 100ms execution

new Promise(resolve => {

setTimeout(() => {

console.log('300ms execution');

resolve();

}, 300);

}).then(() => {

setTimeout(() => {

console.log('100ms execution');

}, 100);

});

// 300ms execution

// 100ms execution

Promiseオブジェクトを返す

優先実行させたい処理をPromiseオブジェクトとして、そのインスタンスを関数の戻り値とする書き方。関数にthenメソッドが適用できる。

// 関数の戻り値をPromiseとする例
function doFirst() {
  // 優先実行させたい関数をPromiseでラップ
  p = new Promise(resolve => {
    setTimeout(() => {
      console.log('300ms execution');
      resolve();
    }, 300);
  });
  // Promiseオブジェクトを返す
  return p;
}

// 戻り値のPromiseオブジェクトに対してthenを実行
doFirst().then(() => {
  setTimeout(() => {
    console.log('100ms executiohn');
  }, 100);
});

// 300ms execution
// 100ms executiohn

// 関数の戻り値をPromiseとする例

function doFirst() {

// 優先実行させたい関数をPromiseでラップ

p = new Promise(resolve => {

setTimeout(() => {

console.log('300ms execution');

resolve();

}, 300);

});

// Promiseオブジェクトを返す

return p;

}

// 戻り値のPromiseオブジェクトに対してthenを実行

doFirst().then(() => {

setTimeout(() => {

console.log('100ms executiohn');

}, 100);

});

// 300ms execution

// 100ms executiohn

resolveで値を渡す

resolve関数に引数を渡し、これをthenメソッドで受け取ることができる。

// resolve実行時に引数を渡す例
const promise = new Promise(resolve => {
  setTimeout(() => {
    console.log('300ms execution');
    // resolve実行時に引数を渡す
    resolve('Resolved!');
  }, 300);
});

// thenの無名関数の引数で3resolveに渡された引数を受け取る
promise.then(parameter => {
  // 受け取った引数を利用
  console.log(parameter);
  setTimeout(() => {
    console.log('100ms execution');
  }, 100);
});

// 300ms execution
// Resolved!
// 100ms execution

// resolve実行時に引数を渡す例

const promise = new Promise(resolve => {

setTimeout(() => {

console.log('300ms execution');

// resolve実行時に引数を渡す

resolve('Resolved!');

}, 300);

});

// thenの無名関数の引数で3resolveに渡された引数を受け取る

promise.then(parameter => {

// 受け取った引数を利用

console.log(parameter);

setTimeout(() => {

console.log('100ms execution');

}, 100);

});

// 300ms execution

// Resolved!

// 100ms execution

thenのチェイン

thenメソッドを連ねてシリアルに実行させる書き方。後続を持つthenメソッドの戻り値をPromiseオブジェクトとするのがミソ。

new Promise(resolve => {
  setTimeout(() => {
    console.log('300ms execution');
    resolve('Promise executed');
  }, 300);
// 1つ目のthen
}).then(() => {
  // thenメソッドでPromiseオブジェクトを返す
  return new Promise(resolve => {
    setTimeout(() => {
      console.log('200ms execution');
      resolve('First then method executed');
    }, 200);
  });
}).then(() => {
  // 最後のthenではPromise~resolveは不要
  setTimeout(() => {
    console.log('100ms execution');
  }, 100);
});

new Promise(resolve => {

setTimeout(() => {

console.log('300ms execution');

resolve('Promise executed');

}, 300);

// 1つ目のthen

}).then(() => {

// thenメソッドでPromiseオブジェクトを返す

return new Promise(resolve => {

setTimeout(() => {

console.log('200ms execution');

resolve('First then method executed');

}, 200);

});

}).then(() => {

// 最後のthenではPromise~resolveは不要

setTimeout(() => {

console.log('100ms execution');

}, 100);

});

reject

Promiseの処理で何らかの問題が生じた場合にrejectすることができる。この場合、resolveが実行されないのでthenは処理されず、直近のcatchが呼ばれる。

以下の例ではPromiseオブジェクトで300msのブロックの最後でrejectが実行され、thenメソッドは実行されずにcatchメソッドが実行される。

// 無名関数の2つ目の引数でreject関数を受け取る
promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('300ms execution');
    // reject関数を実行
    reject('Rejected!');
  }, 300);
})

// 正常にresolveされた場合
promise.then(() => {
  setTimeout(() => {
    console.log('100ms execution');
  }, 100);
// rejectされた場合
}).catch(err => console.log(err));

// 300ms execution
// Rejected!

// 無名関数の2つ目の引数でreject関数を受け取る

promise = new Promise((resolve, reject) => {

setTimeout(() => {

console.log('300ms execution');

// reject関数を実行

reject('Rejected!');

}, 300);

})

// 正常にresolveされた場合

promise.then(() => {

setTimeout(() => {

console.log('100ms execution');

}, 100);

// rejectされた場合

}).catch(err => console.log(err));

// 300ms execution

// Rejected!

Promise.all～全ての実行を待機

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('Took 100ms');
    resolve('value 1');
  }, 100);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('Took 200ms');
    resolve('value 3');
  }, 200);
});

const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('Took 300ms');
    resolve('value 2');
  }, 300);
});

// 3つのPromiseオブジェクトの実行を待ってからthenを実行。
Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log('All completed.');
  // resolveに渡された引数は配列として渡される。
  console.log(values);
});

// Took 100ms
// Took 200ms
// Took 300ms
// All completed.
// Array(3)
// 0: "value 1"
// 1: "value 3"
// 2: "value 2"
// length: 3

const promise1 = new Promise((resolve, reject) => {

setTimeout(() => {

console.log('Took 100ms');

resolve('value 1');

}, 100);

});

const promise2 = new Promise((resolve, reject) => {

setTimeout(() => {

console.log('Took 200ms');

resolve('value 3');

}, 200);

});

const promise3 = new Promise((resolve, reject) => {

setTimeout(() => {

console.log('Took 300ms');

resolve('value 2');

}, 300);

});

// 3つのPromiseオブジェクトの実行を待ってからthenを実行。

Promise.all([promise1, promise2, promise3]).then((values) => {

console.log('All completed.');

// resolveに渡された引数は配列として渡される。

console.log(values);

});

// Took 100ms

// Took 200ms

// Took 300ms

// All completed.

// Array(3)

// 0: "value 1"

// 1: "value 3"

// 2: "value 2"

// length: 3

Path2D

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

概要

Path2DはJavaScriptによるWeb APIの一つで、一連のサブパスを保持する。Path2Dの内容は後に一度に描画される。

<body onload="brython(1)">
  <canvas id="cvs_main" width="400" height="300" style="border:1px solid #000"></canvas>
  <!--<script type="text/python" src="test.py"></script>-->

  <script type="text/javascript">
  var canvas = document.getElementById("cvs_main");
  if (canvas.getContext) {
    var context = canvas.getContext("2d");
  }

  path = new Path2D();
  path.moveTo(200, 100);
  path.lineTo(300, 200);
  path.lineTo(100, 200);
  path.closePath();

  context.stroke(path);
  </script>
</body>

var canvas = document.getElementById("cvs_main");

if (canvas.getContext) {

var context = canvas.getContext("2d");

}

path = new Path2D();

path.moveTo(200, 100);

path.lineTo(300, 200);

path.lineTo(100, 200);

path.closePath();

context.stroke(path);

</script>

</body>

コンストラクタ

Path2Dのコンストラクタは3種類。

Path2D(): 空のPath2Dオブジェクトをつくる。
Path2D(path): 既存のPath2Dオブジェクトを複製する。
Path2D(d): SVGパスの文字列を与えてオブジェクトをつくる。

パスの追加

addPath(path): 現在のパスにpathを追加する。

パスの操作

moveTo(x, y): (x, y)の点に移動する。
lineTo(x, y): 現在の点から(x, y)の点まで直線を引く。
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y): 現在の点から(x, y)の点までベジエ曲線を描く。
quadraticCurveTo(cpx, cpy, x, y): 現在の点から(x, y)の点まで二次ベジエ曲線を描く。
arcTo(x1, y1, x2, y2, radius): 現在の点から、指定した制御点と半径で円弧を描く。
arc(x, y, radius, startAngle, endAngle, anticlockwise): (x, y)を中心とした半径radiusの円弧を描く。startAndleが開始角、endAngleが終了角で、デフォルトは時計回りだがanticlockwiseをtrueにすると反時計回りに描く。
ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise): (x, y)を中心とし、x、yの2方向の半径を指定して楕円(弧)を描く。rotationは楕円全体の傾き。その他はarc()と同じ意味。
rect(x, y, width, height): (x, y)から幅width、高さheightの長方形を描く。

CS/JS – Mathクラスメソッドの実行速度

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

概要

2点間の距離を比較するときに、sqrtといった関数で距離を求める汎用メソッド／関数を使うのに対して、距離の2乗のままで比較して計算スピードを上げることが考えられる。

昔の大型計算機で大きな規模の方程式を解くときなどは、計算スピードを上げるために距離の2乗のままで比較をしていたりしたが、簡単なシミュレーションやアニメーションなどで、それがどれくらい効いてくるのかがよくわからなかった。

そこで、他の関数も含めて、Mathクラスのクラスメソッドとして定義されている浮動小数点系の関数群の実行時間を計ってみた。

結果概要

加減乗除算の間では実行時間にあまり差はなく、これらを1としたときの各関数の実行時間程度は以下のようになった。

+-*/	1
abs、sqrt、exp、log、random	1
sin、cos	2～3
tan、atan	4～5
atan2	5～6
asin、acos	6～7
pow(**)	7～8

一般的な方針

先の結果から、浮動小数点の計算を含むコードに関して、以下のようにまとめられる。

距離の計算などにsqrtを気軽に使ってもよい(足し算を一つ増やす程度)
exp、logも気軽に使ってよい
累乗計算はコストが高い
- 距離計算などで自乗項が出てくる場合、乗算に変更した方がよい
三角関数は、加減乗除の2～5倍のコスト
逆三角関数は、加減乗除の5～7倍のコスト

参考

実行環境1

mouse製ノートPC
Celeron-325U/1.70GHz
RAM 8GB
Windows 10 Home(64bit)

コンソールからテストコードを実行。

ここでa = 1.1、b = -2.2で、各関数の繰り返し回数は100万回。時間の単位はミリ秒。

a+b	17	17	17
a-b	26	26	28
a*b	20	18	20
a/b	16	17	18
a**b	156	157	157
abs(a)	29	27	30
abs(b)	30	29	30
sqrt(a)	29	30	31
sin(a)	71	71	71
cos(a)	59	61	61
tan(a)	83	84	84
asin(a)	125	128	128
acos(a)	124	127	125
atan(a)	85	84	87
atan2(a)	138	140	146
exp(a)	15	17	17
log(a)	15	17	18
random(a)	26	27	27

実行環境2

自作PC
Intel Core i5-4670/3.40GHz
RAM 4.00GB

a+b	9	10	9
a-b	12	11	12
a*b	7	9	7
a/b	7	7	7
a**b	72	71	72
abs(a)	11	12	17
abs(b)	12	17	12
sqrt(a)	13	13	13
sin(a)	27	25	23
cos(a)	24	25	25
tan(a)	43	43	42
asin(a)	53	53	54
acos(a)	53	50	51
atan(a)	41	41	41
atan2(a)	61	62	58
exp(a)	7	7	8
log(a)	6	7	7
random(a)	12	13	12

テストコード

a = 1.1
b = -2.2

sTime = new Date().valueOf()
for i in [1..1000000]
  x = a + b
eTime = new Date().valueOf()
console.log("+ #{eTime - sTime}ms")
sTime = eTime

for i in [1..1000000]
  x = a - b
eTime = new Date().valueOf()
console.log("- #{eTime - sTime}ms")
sTime = eTime

for i in [1..1000000]
  x = a * b
eTime = new Date().valueOf()
console.log("* #{eTime - sTime}ms")
sTime = eTime

for i in [1..1000000]
  x = a / b
eTime = new Date().valueOf()
console.log("/ #{eTime - sTime}ms")
sTime = eTime

for i in [1..1000000]
  x = a ** b
eTime = new Date().valueOf()
console.log("** #{eTime - sTime}ms")
sTime = eTime

for i in [1..1000000]
  x = Math.abs(a)
eTime = new Date().valueOf()
console.log("abs(+) #{eTime - sTime}ms")
sTime = eTime

for i in [1..1000000]
  x = Math.abs(b)
eTime = new Date().valueOf()
console.log("abs(-) #{eTime - sTime}ms")
sTime = eTime

for i in [1..1000000]
  x = Math.sqrt(a)
eTime = new Date().valueOf()
console.log("sqrt() #{eTime - sTime}ms")
sTime = eTime

for i in [1..1000000]
  x = Math.sin(a)
eTime = new Date().valueOf()
console.log("sin() #{eTime - sTime}ms")
sTime = eTime

for i in [1..1000000]
  x = Math.cos(a)
eTime = new Date().valueOf()
console.log("cos() #{eTime - sTime}ms")
sTime = eTime

for i in [1..1000000]
  x = Math.tan(a)
eTime = new Date().valueOf()
console.log("tan() #{eTime - sTime}ms")
sTime = eTime

for i in [1..1000000]
  x = Math.asin(a)
eTime = new Date().valueOf()
console.log("asin() #{eTime - sTime}ms")
sTime = eTime

for i in [1..1000000]
  x = Math.acos(a)
eTime = new Date().valueOf()
console.log("acos() #{eTime - sTime}ms")
sTime = eTime

for i in [1..1000000]
  x = Math.atan(a)
eTime = new Date().valueOf()
console.log("atan() #{eTime - sTime}ms")
sTime = eTime

for i in [1..1000000]
  x = Math.atan2(a)
eTime = new Date().valueOf()
console.log("atan2() #{eTime - sTime}ms")
sTime = eTime

for i in [1..1000000]
  x = Math.exp(a)
eTime = new Date().valueOf()
console.log("exp() #{eTime - sTime}ms")
sTime = eTime

for i in [1..1000000]
  x = Math.log(a)
eTime = new Date().valueOf()
console.log("log() #{eTime - sTime}ms")
sTime = eTime

for i in [1..1000000]
  x = Math.random()
eTime = new Date().valueOf()
console.log("random() #{eTime - sTime}ms")
sTime = eTime

100

101

102

103

104

105

106

107

108

109

110

111

a = 1.1

b = -2.2

sTime = new Date().valueOf()

for i in [1..1000000]

x = a + b

eTime = new Date().valueOf()

console.log("+ #{eTime - sTime}ms")

sTime = eTime

for i in [1..1000000]

x = a - b

eTime = new Date().valueOf()

console.log("- #{eTime - sTime}ms")

sTime = eTime

for i in [1..1000000]

x = a * b

eTime = new Date().valueOf()

console.log("* #{eTime - sTime}ms")

sTime = eTime

for i in [1..1000000]

x = a / b

eTime = new Date().valueOf()

console.log("/ #{eTime - sTime}ms")

sTime = eTime

for i in [1..1000000]

x = a ** b

eTime = new Date().valueOf()

console.log("** #{eTime - sTime}ms")

sTime = eTime

for i in [1..1000000]

x = Math.abs(a)

eTime = new Date().valueOf()

console.log("abs(+) #{eTime - sTime}ms")

sTime = eTime

for i in [1..1000000]

x = Math.abs(b)

eTime = new Date().valueOf()

console.log("abs(-) #{eTime - sTime}ms")

sTime = eTime

for i in [1..1000000]

x = Math.sqrt(a)

eTime = new Date().valueOf()

console.log("sqrt() #{eTime - sTime}ms")

sTime = eTime

for i in [1..1000000]

x = Math.sin(a)

eTime = new Date().valueOf()

console.log("sin() #{eTime - sTime}ms")

sTime = eTime

for i in [1..1000000]

x = Math.cos(a)

eTime = new Date().valueOf()

console.log("cos() #{eTime - sTime}ms")

sTime = eTime

for i in [1..1000000]

x = Math.tan(a)

eTime = new Date().valueOf()

console.log("tan() #{eTime - sTime}ms")

sTime = eTime

for i in [1..1000000]

x = Math.asin(a)

eTime = new Date().valueOf()

console.log("asin() #{eTime - sTime}ms")

sTime = eTime

for i in [1..1000000]

x = Math.acos(a)

eTime = new Date().valueOf()

console.log("acos() #{eTime - sTime}ms")

sTime = eTime

for i in [1..1000000]

x = Math.atan(a)

eTime = new Date().valueOf()

console.log("atan() #{eTime - sTime}ms")

sTime = eTime

for i in [1..1000000]

x = Math.atan2(a)

eTime = new Date().valueOf()

console.log("atan2() #{eTime - sTime}ms")

sTime = eTime

for i in [1..1000000]

x = Math.exp(a)

eTime = new Date().valueOf()

console.log("exp() #{eTime - sTime}ms")

sTime = eTime

for i in [1..1000000]

x = Math.log(a)

eTime = new Date().valueOf()

console.log("log() #{eTime - sTime}ms")

sTime = eTime

for i in [1..1000000]

x = Math.random()

eTime = new Date().valueOf()

console.log("random() #{eTime - sTime}ms")

sTime = eTime

CS/JS – Math.signが使えない話

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

CoffeeScriptで書いたコードが、ローカルでもネット上のWordPressでも動くことを確認したが、Android端末で動かないという事象が発生した。

sgn = Math.sign(val) # Javascript実行時にエラー

1	sgn = Math.sign(val) # Javascript実行時にエラー

同じ症状がWindowsマシンのExplorerでも起こったので、開発ツールで確認したところ、”Math.signはサポートされていない”とのこと。

調べてみると、JavaScript | MDN(Mozilla Developer Network)のMath.sign()のところでブラウザ実装状況を見ると、

デスクトップでは、Chrome38、FireFox(Gecko)25、Opera25はサポート、IEとSafariは未サポート
モバイルでは、Firefox Mobile(Gecko)25のみサポートで、あとは全滅

当分、この関数は利用できそうにないので、以下のように値を絶対値で割って取り出すのが手っ取り早い(可読性は悪くなるが)。

sgn = val / Math.abs(val)

1	sgn = val / Math.abs(val)

スクリプトへの引数渡し

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の文法で末尾にセミコロン(;)をつけなければならない。

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

Boids 2.x (JavaScript)

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

概要

Boids 1.3までで、基本的な個体の運動ルールを設定して群の動きを実現した。

これに対して、ルールの条件を変えて、それらが群の挙動に与える影響を見てみる。

Boids 2.0～引力と斥力の導入

考え方

Boids 1.3の基本的なコードでは、3つのルールについて、位置座標を元にした幾何的な計算で速度を変更したが、ここで結合と分離に対して引力・斥力の概念を導入する。

重力や正電気力は距離の自乗に反比例するが、この形で試したところ、かなり距離が近づくまで反応せず、近い距離になって急に力が強くなるため、挙動が不安定な傾向となった。

そこで、ここでは距離に反比例した引力・斥力が個体間に働くものとし、近傍距離以内では斥力が、それより遠く一定距離以内であれば引力が働くものとした。

挙動と考察

その挙動は、若干の振動があるものの基本コードと似ており、基本コードに対して、個体間の距離がより均等に近くなっている。心理的な行動が物理法則と類似である可能性を示唆している。

デモンストレーション

Boids 2.0を新しいタブで実行

Boids 2.1～直近個体に追随

考え方

結合と分離の実装は上記のまま、整列の条件を、直近の一個体の速度に追随するようルールを変更した。

挙動と考察

各個体が集まるのが極めて速く、群が密集状態になる。

また、群を形成してからのは振動を繰り返すのみで、、群全体としての移動は鈍い。

日常生活でも、近くの一人のみに注意して歩こうとすると却ってスムーズに移動できないことが多いが、これを示唆している。

デモンストレーション

Boids 2.1を新しいタブで実行

Boids 2.2～周辺個体に追随

考え方

整列のために追随するのが直近一個体では「近視眼的」なため、一定距離内の個体群の平均速度に追随するように変更。

挙動と考察

一個体のみに追随するよりも群として移動しやすくなるが、それほど大きな効果はなく、個体数が多くなるに従って(このケースでは個体数が15～20程度以上で)群として振動状態に入りやすくなる。

直近1個体でないとしても、周辺の動きだけに合わせると整然とした動きになりにくいことを示唆している。

デモンストレーション

Boids 2.2を新しいタブで実行

Boids 2.3～リーダーに追随

考え方

特定の一つの個体がリーダーとしてふるまい、他の個体はリーダーにのみ追随するルール。リーダーは他の個体のようなルールに従わないとしている。

挙動と考察

当然ながら、群の行動はリーダーの動きのみに追随して比較的なめらかになる。さらに、群全体が広がりを持つのも特徴。「雁行」を想起させる。

デモンストレーション

Boids 2.3を新しいタブで実行

前の記事：基本コード

Boids 1.x (JavaScript)

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

概要

Boids 1.0で準備した枠組みに、分離(Separation)、結合(Cohesion)、整列(Alignment)のルールを適用していく。

Boids 1.1～分離の導入

個体が近づいたときに、互いに近づき過ぎないように速度を修正するルールを導入。

デモンストレーション

Boids 1.1を新しいタブで実行

各個体が他の個体とぶつからないよう避けながらランダムに移動している。

グローバル定義部

個体同士が近づきすぎた場合の分離行動に入る最大距離を指定。

// 分離の動作を行う距離
var SEPARATION_DISTANCE = 40;

1 2	// 分離の動作を行う距離 var SEPARATION_DISTANCE = 40;

Creatureクラス

分離行動は個体のmove()メソッド内で実装し、相手との距離が大きいほど逆方向への力をかける。速度調整後、速さを初期設定の値にそろえる。

Creature.prototype.move = function() {
  var other;
  var d;
  var newV;

  this.x += this.vx * TIME_SLICE / 1000;
  this.y += this.vy * TIME_SLICE / 1000;

  // ルール：分離(Separation)
  for ( i = 0; i < creatures.length; i++ ) {
    if ( this != creatures[i] ) {
      other = creatures[i];
      if ( this.distanceTo( other ) < SEPARATION_DISTANCE ) {
        this.vx -= other.x - this.x;
        this.vy -= other.y - this.y;
      }
    }
  }

  // 速さを最大値に調整
  newV = Math.sqrt( this.vx * this.vx + this.vy * this.vy );
  this.vx *= MAX_VELOCITY / newV;
  this.vy *= MAX_VELOCITY / newV

  // 左右の壁の反射処理
  if ( this.x < 0 ) {
    this.x = 0;
    this.vx = -this.vx;
  } else if ( this.x > canvas.width ) {
    this.x = canvas.width;
    this.vx = -this.vx;
  }

  // 上下の壁の反射処理
  if ( this.y < 0 ) {
    this.y = 0;
    this.vy = -this.vy;
  } else if ( this.y > canvas.height ) {
    this.y = canvas.height;
    this.vy = -this.vy;
  }
}

Creature.prototype.move = function() {

var other;

var d;

var newV;

this.x += this.vx * TIME_SLICE / 1000;

this.y += this.vy * TIME_SLICE / 1000;

// ルール：分離(Separation)

for ( i = 0; i < creatures.length; i++ ) {

if ( this != creatures[i] ) {

other = creatures[i];

if ( this.distanceTo( other ) < SEPARATION_DISTANCE ) {

this.vx -= other.x - this.x;

this.vy -= other.y - this.y;

}

// 速さを最大値に調整

newV = Math.sqrt( this.vx * this.vx + this.vy * this.vy );

this.vx *= MAX_VELOCITY / newV;

this.vy *= MAX_VELOCITY / newV

// 左右の壁の反射処理

if ( this.x < 0 ) {

this.x = 0;

this.vx = -this.vx;

} else if ( this.x > canvas.width ) {

this.x = canvas.width;

this.vx = -this.vx;

}

// 上下の壁の反射処理

if ( this.y < 0 ) {

this.y = 0;

this.vy = -this.vy;

} else if ( this.y > canvas.height ) {

this.y = canvas.height;

this.vy = -this.vy;

}

Boids 1.2～結合(Cohesion)の導入

分離に加えて、各個体が群として集まろうとするルール。具体には、群の中心に向かおうと速度を変更するルールを導入。

デモンストレーション

Boids 1.2を新しいタブで実行

個体がランダムに移動しながら、群を形成しようとしている。

グローバル定義部

まず、群の中心をグローバル変数として保持。

// 結合(Cohesion)のための群の重心
var centerX;
var centerY;

// 結合(Cohesion)のための群の重心

var centerX;

var centerY;

中心に向かって速度を変更する度合いを定数で指定。この値が小さいほど素早く、大きいほどゆるやかに群れようとする。

結合とのバランスで、分離の判定距離を小さめの値に設定している。

// 結合(Cohesion)の速度変更度
var COHESION_RATE = 5;

// 分離の動作を行う距離
var SEPARATION_DISTANCE = 20;

// 結合(Cohesion)の速度変更度

var COHESION_RATE = 5;

// 分離の動作を行う距離

var SEPARATION_DISTANCE = 20;

群の中心の算出

各個体が目指す群の中心を、実行関数moveAll()の中で計算する。ここでは、全個体の平均重心を群の中心としている。

function moveAll() {
  // 結合(Cohesion)のための群の重心を求める
  centerX = 0;
  centerY = 0;
  for ( var i = 0; i < creatures.length; i++ ) {
    centerX += creatures[i].x;
    centerY += creatures[i].y;
  }
  centerX /= creatures.length;
  centerY /= creatures.length;

  for ( var i = 0; i < creatures.length; i++ ) {
    creatures[i].move();
  }
}

function moveAll() {

// 結合(Cohesion)のための群の重心を求める

centerX = 0;

centerY = 0;

for ( var i = 0; i < creatures.length; i++ ) {

centerX += creatures[i].x;

centerY += creatures[i].y;

}

centerX /= creatures.length;

centerY /= creatures.length;

for ( var i = 0; i < creatures.length; i++ ) {

creatures[i].move();

}

Creatureクラス

結合行動も個体のmove()メソッド内で実装する。群の中心に向かって行くよう速度を変更。

ルールの適用準は、衝突回避を後にするため、結合→分離の順としている。

Creature.prototype.move = function() {
  var other;
  var d;
  var newV;

  this.x += this.vx * TIME_SLICE / 1000;
  this.y += this.vy * TIME_SLICE / 1000;

  // ルール：結合(Cohesion)
  this.vx += ( centerX - this.x ) / COHESION_RATE;
  this.vy += ( centerY - this.y ) / COHESION_RATE;

  // ルール：分離(Separation)
  for ( var i = 0; i < creatures.length; i++ ) {
    if ( this != creatures[i] ) {
      other = creatures[i];
      if ( this.distanceTo( other ) < SEPARATION_DISTANCE ) {
        this.vx -= other.x - this.x;
        this.vy -= other.y - this.y;
      }
    }
  }

  // 速さを最大値に調整
  newV = Math.sqrt( this.vx * this.vx + this.vy * this.vy );
  this.vx *= MAX_VELOCITY / newV;
  this.vy *= MAX_VELOCITY / newV

  // 左右の壁の反射処理
  if ( this.x < 0 ) {
    this.x = 0;
    this.vx = -this.vx;
  } else if ( this.x > canvas.width ) {
    this.x = canvas.width;
    this.vx = -this.vx;
  }

  // 上下の壁の反射処理
  if ( this.y < 0 ) {
    this.y = 0;
    this.vy = -this.vy;
  } else if ( this.y > canvas.height ) {
    this.y = canvas.height;
    this.vy = -this.vy;
  }
}

Creature.prototype.move = function() {

var other;

var d;

var newV;

this.x += this.vx * TIME_SLICE / 1000;

this.y += this.vy * TIME_SLICE / 1000;

// ルール：結合(Cohesion)

this.vx += ( centerX - this.x ) / COHESION_RATE;

this.vy += ( centerY - this.y ) / COHESION_RATE;

// ルール：分離(Separation)

for ( var i = 0; i < creatures.length; i++ ) {

if ( this != creatures[i] ) {

other = creatures[i];

if ( this.distanceTo( other ) < SEPARATION_DISTANCE ) {

this.vx -= other.x - this.x;

this.vy -= other.y - this.y;

}

// 速さを最大値に調整

newV = Math.sqrt( this.vx * this.vx + this.vy * this.vy );

this.vx *= MAX_VELOCITY / newV;

this.vy *= MAX_VELOCITY / newV

// 左右の壁の反射処理

if ( this.x < 0 ) {

this.x = 0;

this.vx = -this.vx;

} else if ( this.x > canvas.width ) {

this.x = canvas.width;

this.vx = -this.vx;

}

// 上下の壁の反射処理

if ( this.y < 0 ) {

this.y = 0;

this.vy = -this.vy;

} else if ( this.y > canvas.height ) {

this.y = canvas.height;

this.vy = -this.vy;

}

Boids 1.3～整列(Alignment)の導入

一通りのBoidsの実装の最終段階。

各個体が、群全体の移動方向に合わせようとするルールを導入。各個体が、自分の速度を群の全個体の平均速度に近づけようとする。

デモンストレーション

個体数

各個体が集まりながら「なんとなく」一定方向に動こうとしている。個体数が200程度と多くなると、群としての動きは鈍くなる。このとき、各個体が全く均等になるのではなく、数個程度集まって移動するさまが見られるのは興味深い。

グローバル定義部

整列の際の速度変更の度合いを指定する。この値が小さいほど素早く整列しようとする。

// 整列(Alignment)の速度変更度
var ALIGNMENT_RATE = 10;

1 2	// 整列(Alignment)の速度変更度 var ALIGNMENT_RATE = 10;

群の平均速度の算出

moveAll()関数を変更し、群の中心の算出に続いて平均速度を求める。

function moveAll() {
  // 結合(Cohesion)のための群の重心
  // 整列(Alignment)のための群の平均速度
  centerX = 0;
  centerY = 0;
  clusterVX = 0;
  clusterVY = 0;
  for ( var i = 0; i < creatures.length; i++ ) {
    centerX += creatures[i].x;
    centerY += creatures[i].y;
    clusterVX += creatures[i].vx;
    clusterVY += creatures[i].vy;
  }
  centerX /= creatures.length;
  centerY /= creatures.length;
  clusterVX /= creatures.length;
  clusterVY /= creatures.length;

  for ( var i = 0; i < creatures.length; i++ ) {
    creatures[i].move();
  }
}

function moveAll() {

// 結合(Cohesion)のための群の重心

// 整列(Alignment)のための群の平均速度

centerX = 0;

centerY = 0;

clusterVX = 0;

clusterVY = 0;

for ( var i = 0; i < creatures.length; i++ ) {

centerX += creatures[i].x;

centerY += creatures[i].y;

clusterVX += creatures[i].vx;

clusterVY += creatures[i].vy;

}

centerX /= creatures.length;

centerY /= creatures.length;

clusterVX /= creatures.length;

clusterVY /= creatures.length;

for ( var i = 0; i < creatures.length; i++ ) {

creatures[i].move();

}

Creatureクラス

整列のルールを個体のmove()メソッドに実装する。

ルール適用の順番は、結合→整列→分離。これは一般に想定される生物の行動形態、「集まろうとする→一緒の方向に向かおうとする→衝突を避ける」と符合している。

.....

  this.x += this.vx * TIME_SLICE / 1000;
  this.y += this.vy * TIME_SLICE / 1000;

  // ルール：結合(Cohesion)
  this.vx += ( centerX - this.x ) / COHESION_RATE;
  this.vy += ( centerY - this.y ) / COHESION_RATE;

  // ルール；整列(Alignment)
  this.vx += ( clusterVX - this.vx ) / ALIGNMENT_RATE;
  this.vy += ( clusterVY - this.vy ) / ALIGNMENT_RATE;

  // ルール：分離(Separation)
  for ( var i = 0; i < creatures.length; i++ ) {
    if ( this != creatures[i] ) {
      other = creatures[i];
      if ( this.distanceTo( other ) < SEPARATION_DISTANCE ) {
        this.vx -= other.x - this.x;
        this.vy -= other.y - this.y;
      }
    }
  }

  // 速さを最大値に調整
  newV = Math.sqrt( this.vx * this.vx + this.vy * this.vy );
  this.vx *= MAX_VELOCITY / newV;
  this.vy *= MAX_VELOCITY / newV
.....

.....

this.x += this.vx * TIME_SLICE / 1000;

this.y += this.vy * TIME_SLICE / 1000;

// ルール：結合(Cohesion)

this.vx += ( centerX - this.x ) / COHESION_RATE;

this.vy += ( centerY - this.y ) / COHESION_RATE;

// ルール；整列(Alignment)

this.vx += ( clusterVX - this.vx ) / ALIGNMENT_RATE;

this.vy += ( clusterVY - this.vy ) / ALIGNMENT_RATE;

// ルール：分離(Separation)

for ( var i = 0; i < creatures.length; i++ ) {

if ( this != creatures[i] ) {

other = creatures[i];

if ( this.distanceTo( other ) < SEPARATION_DISTANCE ) {

this.vx -= other.x - this.x;

this.vy -= other.y - this.y;

}

// 速さを最大値に調整

newV = Math.sqrt( this.vx * this.vx + this.vy * this.vy );

this.vx *= MAX_VELOCITY / newV;

this.vy *= MAX_VELOCITY / newV

.....

前の記事：枠組みの準備

次の記事：条件と挙動のバリエーション

Boids 1.0 (JavaScript)

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

概要

BoidsをJavaScriptで再現するために、基本コードの枠組みとなるコード準備する。

指定した下図の個体を発生させる
ボタン操作で各個体の動作を開始・停止する
個体の動作は同じ速さでランダムな方向に動く

基本の動作から始めて順次拡充していくが、以後共通する仕様は以下の通り。

グローバル定義
- HTML5のcanvasで描画することとし、canvasとそのコンテキストをグローバルオブジェクトとする
- その他、個体や群れの挙動に係るパラメータもグローバル定義する
個体のクラスCreature
- move()メソッドは、個々のCreatureインスタンスの一定時間後の位置をその現在位置と速度から決定し、新しい位置に変更する
- draw()メソッドは個々のCreatureインスタンスをcanvasに描く
- 初期段階から、Boidsの3つのルールに対応するメソッドの枠のみ用意し、順次実装していく
Boidsの実行
- 個体クラスのインスタンスをランダムな位置に複数発生させ、配列に格納する
- 以下を繰返す
  - 現在位置の全てのCreatureオブジェクトをdrawAll()関数で描画
  - 一定時間間隔で全てのCreatureオブジェクトの位置をmoveAll()関数で変更する
  - moveAll()の中で3つのルールに対応する関数を呼び出すが、初期段階では枠のみ用意し、順次実装していく

仕様

以下の仕様で、個体とその群の生成、基本動作のみを実装する。

操作
- ブラウザのテキストボックスに個体数を入力
- ボタンを押すごとに起動・停止を繰り返す
初期設定
- 初期状態で、ランダムな位置に個体を生成
- 各個体の速さは一定とし、速度ベクトルの向きはランダムに与える
挙動
- 各個体は与えられた速度で移動
- 上下左右の壁に当たった時は全反射
- 個体間の干渉は考慮しない(重なりを許す)

デモンストレーション

個体数

スクリプトの内容

グローバル定義部

アプリケーション全体で保持・利用する変数・オブジェクトを定義。

// 時間間隔は50ms
var TIME_SLICE = 50;

// 速度の最大値
var MAX_VELOCITY = 100;

// 個体群を格納する配列
var creatures;

// 描画用canvasとコンテキスト
var canvas;
var context;

// 起動・停止用のフラグ
var isRunning = false;

// setInterval()用の変数
var timer;

// 時間間隔は50ms

var TIME_SLICE = 50;

// 速度の最大値

var MAX_VELOCITY = 100;

// 個体群を格納する配列

var creatures;

// 描画用canvasとコンテキスト

var canvas;

var context;

// 起動・停止用のフラグ

var isRunning = false;

// setInterval()用の変数

var timer;

Creatureクラス

一つ一つの個体を表すCreatureクラスを以下の様に構築する。これらのコンストラクタやメソッドは、以後の拡張を通して変わらない。

/*
  個体のクラスのコンストラクタ
*/
function Creature() {}

/*
  位置のセッター
*/
Creature.prototype.setPosition = function( x, y ) {}

/*
  速度のセッター
*/
Creature.prototype.setVelocity = function( vx, vy ) {}

/*
  個体を描画するメソッド
*/
Creature.prototype.draw = function() {}


/*
  個体を移動させるメソッド
*/
Creature.prototype.move = function() {}

個体のクラスのコンストラクタ

function Creature() {}

位置のセッター

Creature.prototype.setPosition = function( x, y ) {}

速度のセッター

Creature.prototype.setVelocity = function( vx, vy ) {}

個体を描画するメソッド

Creature.prototype.draw = function() {}

個体を移動させるメソッド

Creature.prototype.move = function() {}

コンストラクタ

コンストラクタは、Creatureクラスのインスタンスを生成する。Creatureオブジェクトは、個々の座標と速度ベクトルの要素を保持する。

function Creature() {
  // 位置座標
  this.x = 0;
  this.y = 0
  // 速度ベクトル
  this.vx = 0;
  this.vy = 0;
}

function Creature() {

// 位置座標

this.x = 0;

this.y = 0

// 速度ベクトル

this.vx = 0;

this.vy = 0;

}

位置と速度のセッター

位置座標、速度ベクトルの要素を個体にセットする。

Creature.prototype.setPosition = function( x, y ) {
  this.x = x;
  this.y = y;
}


Creature.prototype.setVelocity = function( vx, vy ) {
  this.vx = vx;
  this.vy = vy;
}

Creature.prototype.setPosition = function( x, y ) {

this.x = x;

this.y = y;

}

Creature.prototype.setVelocity = function( vx, vy ) {

this.vx = vx;

this.vy = vy;

}

描画メソッド

自身をcanvasに描画する。ここでは位置座標を中心とする小円を描いている。canvasのコンテキストはグローバル変数contextに設定されている前提。

Creature.prototype.draw = function() {
  context.beginPath();
  context.arc( this.x, this.y, 4, 0, Math.PI * 2, true );
  context.fill();
}

Creature.prototype.draw = function() {

context.beginPath();

context.arc( this.x, this.y, 4, 0, Math.PI * 2, true );

context.fill();

}

移動メソッド

与えられた速度で移動する。上下・左右の壁に当たった時の反射処理を行っている。

Creature.prototype.move = function() {

  this.x += this.vx * TIME_SLICE / 1000;
  this.y += this.vy * TIME_SLICE / 1000;

  // 左右の壁の反射処理
  if ( this.x < 0 ) {
    this.x = 0;
    this.vx = -this.vx;
  } else if ( this.x > canvas.width ) {
    this.x = canvas.width;
    this.vx = -this.vx;
  }

  // 上下の壁の反射処理
  if ( this.y < 0 ) {
    this.y = 0;
    this.vy = -this.vy;
  } else if ( this.y > canvas.height ) {
    this.y = canvas.height;
    this.vy = -this.vy;
  }
}

Creature.prototype.move = function() {

this.x += this.vx * TIME_SLICE / 1000;

this.y += this.vy * TIME_SLICE / 1000;

// 左右の壁の反射処理

if ( this.x < 0 ) {

this.x = 0;

this.vx = -this.vx;

} else if ( this.x > canvas.width ) {

this.x = canvas.width;

this.vx = -this.vx;

}

// 上下の壁の反射処理

if ( this.y < 0 ) {

this.y = 0;

this.vy = -this.vy;

} else if ( this.y > canvas.height ) {

this.y = canvas.height;

this.vy = -this.vy;

}

実行関数群

以下の関数群のうち、createCreatures()はボタンが押されるたときに与えられた数の個体を生成。

boids()はボタンが押されるたびに実行・停止を切り替える。

他の関数は、実行時に群全体を異動させ、描画するための関数。

/*
  複数の個体を生成する関数
*/
function createCreatures( n ) {}

/*
  Boidsを起動・停止するメイン関数
*/
function boids() {}

/*
  タイマーで描画するための関数
*/
function animate() {}

/*
  全ての個体を移動させる関数
  個々の個体のmove()メソッドを呼び出しているだけ
*/
function moveAll() {}

/*
  全ての個体を描画する関数
*/
function drawAll() {}

複数の個体を生成する関数

function createCreatures( n ) {}

Boidsを起動・停止するメイン関数

function boids() {}

タイマーで描画するための関数

function animate() {}

全ての個体を移動させる関数

個々の個体のmove()メソッドを呼び出しているだけ

function moveAll() {}

全ての個体を描画する関数

function drawAll() {}

createCreatures()～個体の生成

与えられた数の個体をCreatureインスタンスとして生成し、グローバルな配列に格納する。

function createCreatures( n ) {
  creatures = new Array( n );

  for ( var i = 0; i < creatures.length; i++ ) {
    creatures[i] = new Creature();

    // ランダムな位置座標を発生
    var x = Math.floor( Math.random() * canvas.width );
    var y = Math.floor( Math.random() * canvas.height );

    // 速度の方向をランダムに発生
    var v = MAX_VELOCITY;
    var ang = Math.random() * Math.PI * 2;

    // 個体に位置と速度をセット
    creatures[i].setPosition( x, y );
    creatures[i].setVelocity( v * Math.cos( ang ), v * Math.sin( ang ) );
  }
}

function createCreatures( n ) {

creatures = new Array( n );

for ( var i = 0; i < creatures.length; i++ ) {

creatures[i] = new Creature();

// ランダムな位置座標を発生

var x = Math.floor( Math.random() * canvas.width );

var y = Math.floor( Math.random() * canvas.height );

// 速度の方向をランダムに発生

var v = MAX_VELOCITY;

var ang = Math.random() * Math.PI * 2;

// 個体に位置と速度をセット

creatures[i].setPosition( x, y );

creatures[i].setVelocity( v * Math.cos( ang ), v * Math.sin( ang ) );

}

`boids()`～メイン関数

ボタンが押されるたびに呼び出され、全体の実行／停止を制御する。

function boids() {
  canvas = document.getElementById( "canvas_boids" );

  if ( canvas.getContext ) {
    context = canvas.getContext( "2d" );

    if ( isRunning ) {
      clearTimeout( timer );
      isRunning = false;
    } else {
      // テキストボックスから個体数を取得
      var numCreatures =
        parseInt( document.getElementById( "txt_boids" ).value, 10 );

      // 数値としてパースできたときのみ実行
      if ( !isNaN( numCreatures ) ) {
        // 複数の個体を生成
        createCreatures( numCreatures );
        // 前個体を描画
        drawAll();
        // アニメーションをスタート
        animate();

        isRunning = true;
      }
    }
  }
}

function boids() {

canvas = document.getElementById( "canvas_boids" );

if ( canvas.getContext ) {

context = canvas.getContext( "2d" );

if ( isRunning ) {

clearTimeout( timer );

isRunning = false;

} else {

// テキストボックスから個体数を取得

var numCreatures =

parseInt( document.getElementById( "txt_boids" ).value, 10 );

// 数値としてパースできたときのみ実行

if ( !isNaN( numCreatures ) ) {

// 複数の個体を生成

createCreatures( numCreatures );

// 前個体を描画

drawAll();

// アニメーションをスタート

animate();

isRunning = true;

}

動画処理

タイマーにより個体を動かし、描画する。呼び出されるたびに、全ての個体を移動させ、描画する関数を呼び出す。

function animate() {
  moveAll();

  drawAll();

  timer = setTimeout( "animate()", TIME_SLICE );
}

function animate() {

moveAll();

drawAll();

timer = setTimeout( "animate()", TIME_SLICE );

}

個体の移動

配列に格納された個体に移動を指示する。

function moveAll() {
  for ( var i = 0; i < creatures.length; i++ ) {
    creatures[i].move();
  }
}

function moveAll() {

for ( var i = 0; i < creatures.length; i++ ) {

creatures[i].move();

}

個体の描画

配列に格納された個体に描画を指示する。

function drawAll() {
  context.clearRect( 0, 0, canvas.width, canvas.height );

  for ( var i = 0; i < creatures.length; i++ ) {
    creatures[i].draw();
  }
}

function drawAll() {

context.clearRect( 0, 0, canvas.width, canvas.height );

for ( var i = 0; i < creatures.length; i++ ) {

creatures[i].draw();

}

次の記事：基本コード

JavaScript Tips – 文字列の一括置換

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

String.prototype.replace()

以下の例は、文字列str中の”cd”を”CD”に一括置換し、結果は”abCDefabCDefabCDef”となる。

var str = "abcdefabcdefabcdef";
var newStr = str.replace( /cd/g, "CD" );

1 2	var str = "abcdefabcdefabcdef"; var newStr = str.replace( /cd/g, "CD" );

ただしこの方法では、//の間が直接文字列と評価されてしまうので、変数の内容を引き渡すことができない。

split/join

String.prototypeで定義されたsplit()メソッドとjoin()メソッドと用いて、文字列変数で引数を与えて一括置換ができる。

split

文字列操作のsplit()メソッドは、指定した文字列を検索して、それらで区切られた文字列を配列で返す。

var str = "abcdefabcdefabcdef";
var array = str.split( "cd" );

1 2	var str = "abcdefabcdefabcdef"; var array = str.split( "cd" );

上記の結果、配列arrayは以下の要素が格納される。

[ "ab", "efab", "efab", "ef" }

1	[ "ab", "efab", "efab", "ef" }

join

文字列操作のjoin()メソッドは、配列の要素を引数の文字列で繋いだ文字列を返す。

var newStr = array.join( "CD" );

1	var newStr = array.join( "CD" );

一つ上でsplit()の結果得られた配列に上記を適用すると、結果の文字列は以下のようになる。

abCDwfabCDef

1	abCDwfabCDef

一括置換

上記のsplit()、join()の機能・戻値を考慮して、以下の用法で文字列の一括置換が可能。

var newStr = str.split( "置換対象" ).join( "置換内容" );

1	var newStr = str.split( "置換対象" ).join( "置換内容" );

JavaScript Tips – スクリプト単位のスコープ

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

関数はスクリプト・ローカル

関数はスクリプト間で影響を与えない。同じ関数名を異なるスクリプトで用いても干渉しない。

以下のコードのうち外部スクリプトの内容は、それより上の二つのスクリプトの内容と同じ。スクリプトごとにmain()関数を実行しているが、それぞれのスクリプトで定義されたmain()関数が実行され、エラーや干渉は起きない。

<script>
main();

function main() {
  console.log( "First main() function" );
}
</script>


<script>
main();

function main() {
  console.log( "Second main() function" );
}
</script>


<script src="third_main_function.js">
</script>

main();

function main() {

console.log( "First main() function" );

}

</script>

main();

function main() {

console.log( "Second main() function" );

}

</script>

</script>

グローバル変数は干渉

以下のコードは、スクリプト間のグローバル変数の挙動を示している。

<script>
var grovalVariable="global";

main();

function main() {
  console.log( grovalVariable );
}
</script>


<script>
main();

function main() {
  console.log( grovalVariable );
}
</script>


<script>
var grovalVariable = "overwritten"
main();

function main() {
  console.log( grovalVariable );
}
</script>

var grovalVariable="global";

main();

function main() {

console.log( grovalVariable );

}

</script>

main();

function main() {

console.log( grovalVariable );

}

</script>

var grovalVariable = "overwritten"

main();

function main() {

console.log( grovalVariable );

}

</script>

上記コードの実行結果は以下のとおり。

global
global
overwritten

global

overwritten

あるスクリプトでグローバル定義された変数は、それ以後のスクリプトに残される
それ以後のスクリプトで、重ねてvar定義は可能で、その後はそれ以降の定義による

外部ファイルの注意点

クラスなどの資源を共有化するために、スクリプトを外部ファイルとする場合の注意点。

読み込みと実行
- head要素内でスクリプトファイルを読み込む場合、script要素を記述した順番に読み込まれる
- スクリプトファイルが読み込まれた時点で実行される
グローバル変数
- グローバル変数を定義していた場合、スクリプトファイル読み込み時に定義される
- 同じグローバル変数を異なるファイルで重複定義した場合、最後に読み込まれたスクリプトの定義結果が反映される(変数の重複宣言を参照)
クラス
- ローカルなインスタンス名は同じ名前でも干渉しない
- グローバルなインスタンスで重複定義されたオブジェクトは、最後に定義されたものが残る

以下に、クラス定義ファイルとインスタンス定義ファイルを別ファイルに分けた例を示す。

【HTMLファイル】

<!DOCTYPE html>

<html lang="ja">

<head>
<script src="myclass.js"></script>
<script src="instance1.js"></script>
<script src="instance2.js"></script>
</head>

<body>
<input type="button" value="Instance 1" onclick="instance1()"><br>
<input type="button" value="Instance 2" onclick="instance2()">
</body>

</html>

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

【クラス定義ファイル】

function MyClass( name ) {
  this.name = name;
}

function MyClass( name ) {

this.name = name;

}

【インスタンス定義ファイル】

var globalVariable = 1;
var globalInstance = new MyClass( "Global 1" );

function instance1() {
  var localInstance = new MyClass( "Local 1" );

  console.log( globalVariable );
  console.log( globalInstance.name );
  console.log( localInstance.name );
}

var globalVariable = 1;

var globalInstance = new MyClass( "Global 1" );

function instance1() {

var localInstance = new MyClass( "Local 1" );

console.log( globalVariable );

console.log( globalInstance.name );

console.log( localInstance.name );

}

【別のインスタンス定義ファイル】

var globalVariable = 2;
var globalInstance = new MyClass( "Global 2" );

function instance2() {
  var localInstance = new MyClass( "Local 2" );

  console.log( globalVariable );
  console.log( globalInstance.name );
  console.log( localInstance.name );
}

var globalVariable = 2;

var globalInstance = new MyClass( "Global 2" );

function instance2() {

var localInstance = new MyClass( "Local 2" );

console.log( globalVariable );

console.log( globalInstance.name );

console.log( localInstance.name );

}

上記の実行結果と挙動は以下の通り。

("Instance 1"ボタンを押下)
2
Global 2
Local 1
("Instance 2"ボタンを押下)
2
Global 2
Local 2

("Instance 1"ボタンを押下)

Global 2

Local 1

("Instance 2"ボタンを押下)

Global 2

Local 2

head要素で3つのjsファイルが読み込まれる
読み込まれた時点で、グローバルな変数とオブジェクトが定義される
以降、ボタンを押すごとに、それぞれの関数でローカルな変数とオブジェクトが定義・表示される
グローバルな変数・オブジェクトについては、最後に定義されたinstance2.jsの定義内容

変数、オブジェクトとも、グローバル・スコープのものについては、head要素内で最後に読み込まれたinstance2.jsの内容が保持される。読み込み順を入れ替えて最後にinstance1.jsを置くと、結果も変化する。

非同期実行の簡単な例

Promiseによる実行順序の保証

基本形

Promiseオブジェクト.then()

new Promise～then

Promiseオブジェクトを返す

resolveで値を渡す

thenのチェイン

reject

Promise.all～全ての実行を待機

概要

コンストラクタ

パスの追加

パスの操作

概要

結果概要

一般的な方針

参考

実行環境1

実行環境2

テストコード

概要

Boids 2.0～引力と斥力の導入

考え方

挙動と考察

デモンストレーション

Boids 2.1～直近個体に追随

考え方

挙動と考察

デモンストレーション

Boids 2.2～周辺個体に追随

考え方

挙動と考察

デモンストレーション

Boids 2.3～リーダーに追随

考え方

挙動と考察

デモンストレーション

概要

Boids 1.1～分離の導入

デモンストレーション

グローバル定義部

Creatureクラス

Boids 1.2～結合(Cohesion)の導入

デモンストレーション

グローバル定義部

群の中心の算出

Creatureクラス

Boids 1.3～整列(Alignment)の導入

デモンストレーション

グローバル定義部

群の平均速度の算出

Creatureクラス

概要

仕様

デモンストレーション

スクリプトの内容

グローバル定義部

Creatureクラス

コンストラクタ

位置と速度のセッター

描画メソッド

移動メソッド

実行関数群

createCreatures()～個体の生成

boids()～メイン関数

動画処理

個体の移動

個体の描画

String.prototype.replace()

split/join

split

join

一括置換

関数はスクリプト・ローカル

グローバル変数は干渉

外部ファイルの注意点

`boids()`～メイン関数