JavaScript if文による条件分岐

JavaScriptで条件分岐を行う場合、いくつか方法はありますが、今回はif文を使用する方法を説明します。

if文の構文

JavaScriptでif文を使用する場合、以下のように記述します。

if (条件式) {

 処理1

} else {

 処理2

}

(条件式)が成立(真:true)すれば、ifの後ろに続くブロックと呼ばれる「{}」で囲われた処理(処理1)が実行されます。

(条件式)が不成立(偽:false)の場合、elseの後ろに続くブロック内の処理(処理2)が実行されます。

 

if文の例:条件が成立する

if文で、条件が成立するときの例です。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>かいけつプログラム</title>
</head>
<body>
<p>if文のサンプル</p>
<script>
 var syohizei = 0.1;
 if (syohizei == 0.1) {
  alert(‘消費税率10%です’);
 } else {
  alert(‘消費税率10%ではありません’);
 }
</script>
</body>
</html>

ブラウザで開くと、ポップアップで以下のメッセージが表示されます。

ifの条件式「syohizei == 0.1」ですが、「==」は演算子の一つで、左右の値が等しいかを判断し、真偽値(true, false)を返します。

 

if文の例:条件が成立しない

if文で、条件が成立しないときの例です。

syohizeiの値を0.08に変更します。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>かいけつプログラム</title>
</head>
<body>
<p>if文のサンプル</p>
<script>
 var syohizei = 0.08;
 if (syohizei == 0.1) {
  alert(‘消費税率10%です’);
 } else {
  alert(‘消費税率10%ではありません’);
 }
</script>
</body>
</html>

ブラウザで開くと、ポップアップで以下のメッセージが表示されます。

これは、「syohizei == 0.1」の結果がfalseになり、「else」の後ろの処理が実行されました。

 

if文の例:comfirm関数を使用する

comfirm関数は、JavaScriptがあらかじめ用意している関数です。

alert関数と似ていますが、alert関数が値を返さないのに対し、confirm関数は実行後に真偽値を返します。

confirm関数は、「OK」を押下すると「true」、「キャンセル」を押下すると「false」を返します。

if文とcomfirm関数を使用した例です。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>かいけつプログラム</title>
</head>
<body>
<p>if文のサンプル</p>
<script>
 if (confirm(‘この処理を実行しますか?’)) {
  alert(‘OKが選択されました’);
 } else {
  alert(‘キャンセルが選択されました’);
 }
</script>
</body>
</html>

ブラウザで開くと、ポップアップで以下のメッセージが表示されます。

「この処理を実行しますか?」メッセージに「OK」と「キャンセル」ボタンが表示されています。

「OK」ボタンを押下します。

「キャンセル」ボタンを押下します。

 

複数の条件式で処理を分岐する

複数の条件式で処理を分岐させる場合、以下のように記述します。

if (条件式1) {

 処理1

} else if (条件式2) {

 処理2

} else if (条件式3) {

 処理3

  :

} else  {

 処理4

}

2つ目以降の条件式は「else if (条件式)」と記述します。

「else」は条件分岐の最後に記述しますが、必要がなければ記述しなくてもよいです。

まとめ

JavaScriptでif文を使用して条件分岐をする方法について説明しました。

if文の条件式には真偽値(true,false)となる式を渡します。comfirm関数のように関数を渡すこともできます。

confirm関数は実行後に真偽値を返します。

条件式は1つでもよいですが、複数記述することもできます。

以上、JavaScriptでif文を使用した条件分岐の説明でした。