JavaScript
9. 条件分岐
条件分岐とは、プログラムにおいてある場合とある場合で処理を分けることをいいます。
ここでは繰返しと組み合わせて図形を描画してみます。
色を交互に変える
条件分岐を実現する方法の1つにif〜else文があります。
if〜else文の書式は、以下のようになります。
if( 条件式 ) {
条件式が真（true）の時の処理;
} else {
条件式が偽（false）の時の処理;
}
例えば、以下のように書くと、線を21本、2色の色で交互に、描くことになります。
window.addEventListener( "load", loadFunc, false );
function loadFunc() {
var canvas = document.getElementById( "stage" );
var ctx = canvas.getContext( "2d" );
for( var i = 0; i < 21; i++ ) {
if( i % 2 == 0 ) {
ctx.strokeStyle = "#339933";
} else {
ctx.strokeStyle = "#ffcc00";
}
ctx.beginPath();
ctx.moveTo( 50 + i * 20, 50 );
ctx.lineTo( 50 + i * 20, 450 );
ctx.closePath();
ctx.stroke();
}
}
ほぼ繰返しで線を21本描いたプログラムと同じですが、色の指定をfor文の繰返し処理の中に移し、if文を使っています。
10行目、ifの後の()の中で条件を指定しています。== は、その左右の値や式が等しいかどうかを判断します。
i % 2はiを2で割った余りを求めていますので、iが整数である以上、0か1になります。i % 2 == 0は、iを2で割った余りが0と等しいかどうか判断しているということです。つまり、iの値が偶数か奇数かを判断しています。
条件に値が適っている場合、この場合であればiを2で割った余りが0の場合、この条件は真（true）であるといいます。逆に適わなかった場合、この場合であればiを2で割った余りが1だった場合、この条件は偽（false）であるといいます。
その後に続く{から次の}（この場合は12行目の行頭）の間（11行目）に条件が真のときに行いたい処理を書きます。
続くelseの後の{から次の}（この場合は14行目）の間（13行目）に条件が偽のときに行いたい処理を書きます。
もちろんいずれの処理も複数行書くことができます。またelse以降が必要ない場合は書かなくても構いません。
10〜14行目の処理をまとめると、iの値が偶数の場合、線の描画色を"#339933"にし、iの値が奇数の場合、線の描画色を"#ffcc00"にする、ということになります。
iの値は1ずつ増えていくので、結果として2色の線が交互に描かれることになります。
異なる図形を交互に描く
条件分岐の例として、「8. 繰返し」で円を描いたプログラムを少し変えて、円と矩形を交互に描いてみます。
window.addEventListener( "load", loadFunc, false );
function loadFunc() {
var canvas = document.getElementById( "stage" );
var ctx = canvas.getContext( "2d" );
ctx.strokeStyle = "#339933";
for( var i = 0; i < 9; i++ ) {
for( var j = 0; j < 9; j++ ) {
if( i % 2 == 0 ) {
ctx.beginPath();
ctx.arc( 50 + j * 50, 50 + i * 50, 20, 0, Math.PI*2, false );
ctx.stroke();
} else {
ctx.strokeRect( 30 + j * 50, 30 + i * 50, 40, 40 );
}
}
}
}
13〜19行目、iの値が偶数か奇数かによって処理を分岐し、偶数の場合には円を、奇数の場合には矩形を描画しています。
円と矩形では描画の基準となる点が異なるので（円は中心で、矩形は左上です）、描き始めの座標が少し異なっています（円は50で、矩形は30）。
上記のプログラムをちょっと変えて、iとjを足した値が偶数の場合と奇数の場合で処理を分けると、以下のようになります。
window.addEventListener( "load", loadFunc, false );
function loadFunc() {
var canvas = document.getElementById( "stage" );
var ctx = canvas.getContext( "2d" );
ctx.strokeStyle = "#339933";
for( var i = 0; i < 9; i++ ) {
for( var j = 0; j < 9; j++ ) {
var k = i + j;
if( k % 2 == 0 ) {
ctx.beginPath();
ctx.arc( 50 + j * 50, 50 + i * 50, 20, 0, Math.PI*2, false );
ctx.stroke();
} else {
ctx.strokeRect( 30 + j * 50, 30 + i * 50, 40, 40 );
}
}
}
}
13行目、i+jの値を新しい変数kに保存をし、15行目、if文の条件では、kが偶数か奇数かで処理を分岐させています。
結果として、以下のようになります。
多少細かい補足ですが、上記のような描画を実現しようとして、上記のプログラムの13〜21行目を、以下のように書いてしまうこともありがちですが、上記の書き方の方がシンプルです。
if( i % 2 == 0 ) {
if( j % 2 == 0 ) {
ctx.beginPath();
ctx.arc( 50 + j * 50, 50 + i * 50, 20, 0, Math.PI*2, false );
ctx.stroke();
} else {
ctx.strokeRect( 30 + j * 50, 30 + i * 50, 40, 40 );
}
} else {
if( j % 2 == 1 ) {
ctx.beginPath();
ctx.arc( 50 + j * 50, 50 + i * 50, 20, 0, Math.PI*2, false );
ctx.stroke();
} else {
ctx.strokeRect( 30 + j * 50, 30 + i * 50, 40, 40 );
}
}
プログラムは工夫によってシンプルになったり、プログラムの工夫にはパズルを解くような要素があったりするという実例かと思います。