HTML5テクニカルノート

条件分岐を考える

ID: FN1601001
Technique: HTML5 / JavaScript
Library: EaselJS 0.8.1 / TweenJS 0.6.1

つぎのサンプル001は、Grant Skinner氏のサイトgskinner labに掲げられた作例「Arc Rainbow」にもとづいて、コードの構造をわかりやすく整えたものです。[Mode]のリンククリックで円弧の配色の決め方が、[monochrome](単色)、[hue shift](色相の変化)、[rainbow](虹の7色)、[random](ランダム)の順に切り替わります。そのための条件分岐の組み立て方について考えてみます。なお、この作例のコードについては「設定のオン・オフを切り替える－トグルボタンの論理組み立て」と「CreateJS 15/05/21: Graphicsコマンドでトゥイーンアニメーションを描く」でも、それぞれ異なる事項を採り上げて解説しています。

サンプル001■CreateJS 15/05/21: Arc Rainbow

01 gskinner labの作例におけるモード変更の条件分岐

gskinner labの作例では、[Mode]のリンククリックで関数(redraw())が呼び出され、つぎの抜き書きのようなif条件の分岐により円弧の配色が変わります。なお、変数modeにはモードに応じて、0から3までの整数が納められています。modeの変数値が2([rainbow])の場合が、他と少し毛色の違った処理になっています。そのため、条件分岐も入り組んでしまっているようです。でも、ていねいに見ていけば、もっとわかりやすい組み立てにできるでしょう。


var total = 10;

function redraw() {
	
	var rainbow = (mode == 2);
	total = Math.random() * 15 + 10 | 0;
	if (rainbow) {
		total = colors.length;
	}

	var hue = Math.random() * 360;
	var lum = 50;
	for (var i = 1; i < total; i++) {

		if (mode == 0) {
			lum = i / total * 50 + 10;
		}
		if (mode == 1) {
			hue = i / total * 255;
		}
		if (mode == 3) {
			hue = Math.random() * 360;
			lum = Math.random() * 100;
		}
		var color = createjs.Graphics.getHSL(hue, 100, lum);
		if (rainbow) {
			color = colors[i];
		}

	}

}

まず、初めの方の変数totalの値を決めるif文です。一旦値をランダムに定めておいて、変数modeの値が2の場合に、値を書き替えています。けれど、つぎのように変数modeの値を条件とした方が端的です。


var rainbow;
if (mode == 2) {
	total = colors.length;
	rainbow = true;
} else {
	total = Math.random() * 15 + 10 | 0;
	rainbow = false;
}

つぎに、変数colorの値を決めるあとの方の条件分岐です。変数modeの値は一意ですから、if文を並べるのでなく、else ifと組み合わせるべきでしょう。つぎのように変数rainbowがtrue(変数modeの値が2)の場合を初めのif条件にすれば、見やすく組み立てられます。数が少ないとはいえ、forループの中の処理なので、無駄は省きたいところです。


var color;
if (rainbow) {
	color = colors[i];
} else {
	if (mode == 0) {
		lum = i / total * 50 + 10;
	} else if (mode == 1) {
		hue = i / total * 255;
	} else if (mode == 3) {
		hue = Math.random() * 360;
		lum = Math.random() * 100;
	}
	color = createjs.Graphics.getHSL(hue, 100, lum);
}

02 サンプル001で定めたモード変更の条件分岐

前掲サンプル001では、モード変更の条件分岐を以下のように定めました。まず、変数totalの値を条件によって変えるのは代入文になりますから、条件演算子? :を用いました。これで、記述が少し短くなります。

つぎに、変数colorの値を定める処理は、関数(getColor())に切り分けました。処理は変数modeの値によって分岐するので、switch文を用いています。変数hueの初期値には、ランダムな値を与えました。この値を使うのは変数modeの値が0のときのみです。けれど、forループの外で設定しますので、あえて条件は加えず、必要に応じて書き替えるかたちにしました。

	
function redraw() {

	var hue = Math.random() * 360;
	var total = (mode == 2) ? colors.length : (Math.random() * 15 + 10 | 0);

	for (var i = 1; i < total; i++) {
		var color = getColor(mode, total, hue, i);

	}

}

function getColor(mode, total, hue, i) {
	var lum;
	switch (mode) {
		case 0:
			lum = i / total * 50 + 10;
			break;
		case 1:	
			hue = i / total * 255;
			lum = 50;
			break;
		case 2:
			return colors[i];
		case 3:
			hue = Math.random() * 360;
			lum = Math.random() * 100;
			break;
	}
	return createjs.Graphics.getHSL(hue, 100, lum);
}

作成者: 野中文雄
作成日: 2016年1月25日