複数の条件式を組み合わせる(if..else if)

広告

if..else文を使うと条件式に応じていずれかの文を実行することができました。さらにelse句の後で実行する文として別のif文を記述することでより複雑な条件式を記述できます。 

if (条件式1){
  実行する文1;
  ...
}else{
  if (条件式2){
    実行する文2;
    ...
  }else{
    実行する文3;
    ...
  }
}

この場合、条件式1がtrueならば文1を実行します。条件式1がfalseだった場合にはさらに条件式2を評価し、条件式2がtrueならば文2を実行しfalseならば文3を実行します。

なお条件式1がfalseだった場合に実行されるのは条件式2のif文の1つだけです。文が1つだけだった場合はブロックは記述する必要がありませんので次のように記述することができます。 

if (条件式1){
  実行する文1;
}else
  if (条件式2){
    実行する文2;
  }else{
    実行する文3;
  }

さらにif文を追加し分岐を増やしていくと次のようになります。 

if (条件式1){
  実行する文1;
}else
  if (条件式2){
    実行する文2;
  }else
    if (条件式3){
      実行する文3;
    }else{
      実行する文4;
    }

このように記述しても構いませんが読みにくいため通常は次のよう記述します。(単にelse句の後に改行を行わずに次の文を空白を1つ空けて記述するように変更しただけです)。 

if (条件式1){
  実行する文1;
}else if (条件式2){
  実行する文2;
}else if (条件式3){
  実行する文3;
}else{
  実行する文4;
}

一般にはこの書式をif..else if文と呼びます。ただ実際はここまで書いたようにif..else文を拡張しただけです。ではどのように分岐が行われるのまとめてみます。 

    +-------- 文1を実行
    |  true
条件式1
    |             +-------- 文2を実行
    |  false      |  true
    +-------- 条件式2
                  |             +-------- 文3を実行
                  |  false      |  true
                  +-------- 条件式3
                                |
                                |  false
                                +-------- 文4を実行

最後のelse句は必要無ければ記述しなくても構いません。その場合は全ての条件式がfalseの場合には何も実行しません。

では具体的な例を見てみます。 

var seiseki = 90;

if (seiseki > 80){
  alert("合格です");
}else if (seiseki > 70){
  alert("追試です");
}else{
  alert("不合格です");
}

このサンプルではまず変数の値が80より上かどうかを判別します。もしも80以下だったら今度は70よりも上かどうかを判別します。この2つの条件の評価に従ってどの文を実行するのかを決定します。

サンプルコード

では簡単なサンプルで試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>
</head>
<body>

<script type="text/javascript" src="./js/script3_1.js">
</script>

</body>
</html>

var seiseki = [80, 72, 94, 68]

document.write("<p>");

for(var i = 0; i < seiseki.length; i++){
  document.write(seiseki[i] + "点は");

  if (seiseki[i] > 80){
    document.write("合格です<br />");
  }else if (seiseki[i] > 70){
    document.write("追試です<br />");
  }else{
    document.write("不合格です<br />");
  }
}

document.write("</p>");

上記を実際にブラウザ見てみると次のように表示されます。

p3-1

サンプルでは配列を使っています。配列についてはまた別のページで解説します。

( Written by Tatsuo Ikura )