条件分岐の概要
JavaScriptを記述していて、条件を満たした時だけ処理をさせたい事があります。
例えば、トランプのブラックジャックのように、2つの数字を足し算して21になると「ブラックジャック」と表示するプログラムを作りたいとします。これは、「もし2つの数字を足して21に等しければ、"ブラックジャック"と表示する」とスクリプトを記述します。
21にならなかった時にもう1枚カードを引くか聞きたい時は、追加で「21以外では、カードを引くか聞く」とプロブラムを記述する事も出来ます。
これを条件分岐と言います。21の条件を満たすか、満たさないかで処理が分岐するためです。
if文
if文は、条件と処理を記述して実行させます。又、条件を満たさない時の処理も記述出来ます。
先ほどのブラックジャックの例ですが、条件を満たさない時の処理も含めて記述すると以下になります。
【if文の例】
<script>
var x = 10;
var y = 11;
if ( x + y == 21 ) {
document.write("ブラックジャック");
} else {
document.write("カードを引きますか?");
}
</script>
赤字部分が条件式です。xとyを足して21に等しい(==)と次の{}で囲まれた範囲の処理をします。青字のelseには、条件式に一致しなかった時の処理を記述しますが、青字部分はなくても動作します。その場合、条件式に一致しないと何もしません。
上記は以下のように表示されます。
もしxが10ではなく3だった場合、x + y = 14なので条件式と一致せず、「カードを引きますか?」と表示されます。
if文は、条件式がtrueかfalseかで処理が分岐します。例えばx = 10、y = 11の時、document.write(x + y == 21);と記述するとtrueと表示されます。x = 3になるとfalseと表示されます。つまり、if文は条件式によって返されるtrue、falseにより、処理を分岐させています。
elseに続いてifを記述する事も出来ます。これにより、ifの条件を満たさない時に、再度条件式を記述出来ます。
【else ifの例】
<script>
var x = 10;
var y = 10;
var z = 3;
if ( x + y == 21 ) {
document.write("ブラックジャック");
} else if ( x + y + z > 21 ) {
document.write("バスト");
} else {
document.write("カードを引きますか?");
}
</script>
上記では、最初のif文は満たさないので赤字のelse ifが判定されます。x + y + zは23(10+10+3)で21より大きいため、「バスト」と表示されます。もしyが10ではなく3だった場合、x + y + zは16でelse ifの条件を満たさないため、最後のelseにより「カードを引きますか?」と表示されます。
else ifは、ifとelseの間で何回も使えるため、複雑な条件分岐をする事が出来ます。
switch文
もう1つの条件分岐はswitchです。switchは、パターン1ならAの処理をする、パターン2ならBの処理をすると言った、場合分けが出来ます。
if文の時と同様に、21なら「ブラックジャック」、20以下なら「カードを引きますか?」と表示させてみます。
【switch文の例】
<script>
var x = 10;
var y = 11;
switch (x + y) {
case 21:
document.write("ブラックジャック");
break;
default:
document.write("カードを引きますか?");
}
</script>
赤字で示した式の結果が21であれば、青字で示した21と一致するため、すぐ下の処理が行われます。この結果、上記のJavaScriptでは「ブラックジャック」と表示されます。caseはcase 10;、case 20;等複数記述出来ます。
緑字のbreak;はswitch文を抜けるという意味です。break;なしでcase文が複数あると、次に記述されたcaseの条件に一致しなくても処理が実行されます。つまり、swicthの処理を途中で終わらせるには、break;が必要です。
オレンジ色のdefault:はどれにも一致しなかった時の処理で、省略も出来ます。例えば、xが3だった場合はx + yは14になるためcase 21;に一致せず、「カードを引きますか?」と表示されます。
以下の使い方も出来ます。
【複数のパターンで同じ処理をさせる】
<script>
switch (x) {
case "太郎":
case "次郎":
document.write("男性です。");
}
</script>
上記では、xが太郎でも次郎でも「男性です。」と表示されます。2つのcaseの間にbreak;がないためです。このように、break;を入れずに複数のパターンで同じ処理をさせる事も出来ます。
if文とswitch文の使い分け
switch文と同じ事は、if文でelse ifを多様すると出来ます。if (x + y == 10)、else if (x + y == 11)、else if (x + y == 12)とつなげて行けば、パターン分け出来るためです。
但し、else if (x + y == 結果)と似た条件式を何度も記述するため、条件が複雑になると煩雑になります。x + y、x + z等異なる式で分岐させる必要があれば、if文でelse ifを使う必要がありますが、x + y等同じ式で分岐するのならswitchの方が分かり易く記述出来ます。
同じ式で結果毎にパターン分けする時はswitch文、異なる条件によりtrueとfalseで分岐させる時はif文を使うのが一般的です。
演算子
条件式で利用されるのは演算子です。以下に、条件式で利用される比較演算子の例を示します。結果例の欄は、x = 10、y = 11の時に、条件式例で示す式が返す結果を記述しています。
【比較演算子の例】
演算子 |
意味 |
条件式例 |
結果例 |
== |
右と左が等しい |
x + y == 21 |
true |
!= |
右と左が異なる |
x + y != 21 |
false |
> |
左が右より大きい |
x + y > 21 |
false |
>= |
左が右以上 |
x + y >= 21 |
true |
< |
左が右より小さい |
x + y < 21 |
false |
<= |
左が右以下 |
x + y <= 21 |
true |
もう1つの例は、論理演算子です。
【論理演算子の例】
演算子 |
意味 |
記述例 |
結果例 |
&& |
両方を満たす(AND条件) |
x == 10 && y == 11 |
true |
|| |
どちらかを満たす(OR条件) |
x == 20 || y == 21 |
false |
&&は両方を満たすという意味なので、左右両方がtrueであれば結果はtrueになり、どちらかでもfalseであれば結果はfalseとなります。記述例では、x == 10もy == 11もtrueなので、結果はtrueです。
||はどちらかを満たすという意味なので、左右どちらかがtrueであれば結果はtrueになり、両方がfalseであれば結果はfalseとなります。記述例では、x == 20もy == 21もfalseなので、結果はfalseです。
尚、比較演算子は論理演算子より先に評価されます。又、&&の方が||より先に評価されます。この順番を変えたい時は()で括ります。
【論理演算子の優先順位】
例 |
意味 |
結果例 |
x == 10 && y == 11 || x == 9 && y == 8 |
xが10、且つyが11かを判定し、xが9、且つyが8かを判定後、どちらかの判定がtrueであればtrue |
true |
x == 10 && (y == 11 || x == 9) && y == 8 |
yが11、又はxが9のどちらかを満たすか判定し、xが10かを判定、yが8かを判定、この3つの判定が全てtrueであればtrue |
false |
2つの例は、赤字以外は同じですが、評価順が異なるため結果が異なっています。
因みに、1つ目の例では、(x == 10 && y == 11) || (x == 9 && y == 8)と記述しても結果は同じです。()で括った方が、先に判定される事が分かり易いかもしれません。