条件分岐/JavaScript

JavaScriptは、条件によって処理を分岐させる事が出来ます。

本項では、条件分岐について説明します。

条件分岐の概要

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

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

現実とJavaScriptのif文対比

 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)とつなげて行けば、パターン分け出来るためです。

if分とswitch分比較

 但し、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)と記述しても結果は同じです。()で括った方が、先に判定される事が分かり易いかもしれません。

次のページループ処理

  • このエントリーをはてなブックマークに追加

その他

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)