if文を使って条件を細かく設定してみる

2015年10月29日

複数のif else文を組み合わせることで、より細かい条件判断を行うことができます。その場合はサンプルコードのような書き方になります。サンプルコードでは月を入力して入力した月で季節を判定するプログラムです。

「||」「&&」演算子とif else文の組合せについて

「||」はどれかがtrueならtrueとなる

サンプルコードをご覧ください。
サンプルコードの実行結果はこちら

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>IF分複数分岐</title>
</head>
<body>
    
<script>
    
var month;
    
    month = prompt("月を入力してください");
    
    if( month == 12 || month == 1 || month == 2){
        document.write("<h1>冬</h1>");
    }else if( month >= 3 && month <= 5 ){
        document.write("<h1>春</h1>");
    }else if( month >= 6 && month <= 8 ){
        document.write("<h1>夏</h1>");
    }else if( month >= 9 && month <= 11 ){
        document.write("<h1>秋</h1>");
    }else{
        document.write("<h1>1～12までの数値を入力して下さい</h1>");        
    }
</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>IF分複数分岐</title>

</head>

<body>

var month;

month = prompt("月を入力してください");

if( month == 12 || month == 1 || month == 2){

document.write("<h1>冬</h1>");

}else if( month >= 3 && month <= 5 ){

document.write("<h1>春</h1>");

}else if( month >= 6 && month <= 8 ){

document.write("<h1>夏</h1>");

}else if( month >= 9 && month <= 11 ){

document.write("<h1>秋</h1>");

}else{

document.write("<h1>1～12までの数値を入力して下さい</h1>");

}

</script>

</body>

</html>

if( month == 12 || month == 1 || month == 2)

今回は新たに「||」という演算子が出てきました。これは、左右の比較演算式のどちらかが「true」(真)ならば、「true」を返す演算子です。このような真偽値に対する演算のことを論理和(OR)といいます。

上記の場合、３つの指揮を並べた場合は、３つの内１つでも「true」なら「true」を返します。ということは、この条件式では、変数monthの値が「12」「1」「2」のどれかであれば「true」となります。例えば、変数monthの値が「2」の場合、右の演算が「true」となるので、条件式全体がtrueとなります。

「&&」は全てがtrueならtrueとなる

}else if( month >= 3 && month <= 5 ){ この箇所で使用している「&&」は、左右の比較演算式がどちらも「true」の場合のみ「true」を返す演算子です。この演算のことを論理積(AND)と言います。この場合だと変数monthの値が「3以上かつ5以下」の場合にtrueとなります。

論理演算子の優先順位について

「||」や「&&」のような、trueとfalseというブール値に対して使用する演算子のことを論理演算子と呼びます。論理演算子は、「>=」「==」といった条件演算子より優先順位が下です。　左右の比較演算式を括弧「()」で囲まなくても大丈夫です。ただ、書いたコードを見やすくするために括弧をあえて書く人もいます。