条件分岐/JavaScript

条件分岐の概要

　JavaScriptを記述していて、条件を満たした時だけ処理をさせたい事があります。

　例えば、トランプのブラックジャックのように、2つの数字を足し算して21になると「ブラックジャック」と表示するプログラムを作りたいとします。これは、「もし2つの数字を足して21に等しければ、"ブラックジャック"と表示する」とスクリプトを記述します。

　21にならなかった時にもう1枚カードを引くか聞きたい時は、追加で「21以外では、カードを引くか聞く」とプロブラムを記述する事も出来ます。

　これを条件分岐と言います。21の条件を満たすか、満たさないかで処理が分岐するためです。

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の条件を満たさない時に、再度条件式を記述出来ます。

<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以下なら「カードを引きますか？」と表示させてみます。

<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の時に、条件式例で示す式が返す結果を記述しています。

　もう1つの例は、論理演算子です。

　&&は両方を満たすという意味なので、左右両方がtrueであれば結果はtrueになり、どちらかでもfalseであれば結果はfalseとなります。記述例では、x == 10もy == 11もtrueなので、結果はtrueです。

　||はどちらかを満たすという意味なので、左右どちらかがtrueであれば結果はtrueになり、両方がfalseであれば結果はfalseとなります。記述例では、x == 20もy == 21もfalseなので、結果はfalseです。

　尚、比較演算子は論理演算子より先に評価されます。又、&&の方が||より先に評価されます。この順番を変えたい時は()で括ります。

　2つの例は、赤字以外は同じですが、評価順が異なるため結果が異なっています。

　因みに、1つ目の例では、(x == 10 && y == 11) || (x == 9 && y == 8)と記述しても結果は同じです。()で括った方が、先に判定される事が分かり易いかもしれません。

次のページ「ループ処理」