JavaScript 条件分岐

JavaScriptの条件分岐

指定した条件式が成立した場合や、成立しなかった場合によって実行する処理を分岐したり指定した条件式の値によって処理を分岐する制御文について解説します。

条件分岐の制御文一覧

if文

if文は、条件によって処理を分岐させる場合に使用する制御文です。

設定した条件式の返り値が真（true）の場合に設定した命令文を実行します。

if文の書式

if (条件式) 命令文;
【条件が成立したとき実行する処理が複数ある場合】
if (条件式）{
    命令文1;
    命令文2;
・・・・・・・・・・・・・・・・・・・
}

設定値の説明

• 条件式
  条件式は戻り値が真(true)または偽(false)になる比較演算子や論理演算子を使用して設定します。
• 命令文
  条件式の戻り値がtrueの場合の処理を記述します。命令文が複数ある場合は{}で囲んでブロック文にします。

if文のコード例

変数「name」が空文字（長さ0の文字列）の場合、警告メッセージを表示する例

var name = "";
if (name =="") alert("名前を入力してください。");

コードの解説

1行目【var name = “”;】
var【ﾊﾞｰ】キーワードを使用して、変数「name」の宣言をし、代入演算子の「=」を使用して変数「name」に長さ0文字の文字列「””」を代入します。

2行目【 if (name ==””) alert(“名前を入力してください。”);】
if文を使用して条件が成立した場合の処理を記述します。条件式は(name ==””)比較演算子の「==」を使用して左辺の変数nameと右辺の「””」（長さ0文字の文字列）が等しい場合を定義します。

条件が成立した場合、つまり戻り値が真（true）の場合、window【ｳｲﾝﾄﾞｳ】オブジェクトの
alert【ｱﾗｰﾄ】メソッドを使用して警告メッセージを表示します。

実行結果

else文

else【ｴﾙｽ】文はif【ｲﾌ】文の条件が成立しなかったときの処理を実行することができます。

else文の書式

if (条件式) 条件がtrueの場合の命令文;
else 条件がfalseの場合の命令文;
【命令文が複数ある場合】
if (条件式) {
     条件がtrueの場合の命令文1;
     条件がtrueの場合の命令文2;
    ・・・・・・・・・・・・・・
} else {
     条件がfalseの場合の命令文1;
     条件がfalseの場合の命令文2;
    ・・・・・・・・・・・・・・
}

else文のコード例

var name = "たろう";
 if (name =="") alert("名前を入力してください。");
 else alert(name+"さんこんにちは");

コードの解説

1行目【var name = “たろう”;】
varキーワードを使用して変数「name」を定義し、文字列の「たろう」を代入します。

2行目【if (name ==””) alert(“名前を入力してください。”);】
if文を使用して、条件式に変数nameが「””」（長さ0文字の文字列）と等しい場合を定義して戻り値がTrueの場合、window【ｳｲﾝﾄﾞｳ】オブイェクトのalert【ｱﾗｰﾄ】メソッドを使用して
警告メッセージを表示します。

3行目【else alert(name+”さんこんにちは”);】
else文を使用して、if文の戻り値がfalseだった場合つまり、変数「name」に格納されている値が「長さ0文字の文字列」ではない場合の処理を記述します。window【ｳｲﾝﾄﾞｳ】オブイェクトのalert【ｱﾗｰﾄ】メソッドを使用して警告メッセージを表示します。

実行結果

else if文

else if文は、if文の条件以外にも判断したい条件式がある場合に使用します。

else if文の書式

if (条件式) 命令文;
else if (条件式) 命令文;
else 戻り値がFalseの場合の命令文;
【命令文が複数ある場合】
if (条件式) {
   命令文1;
   命令文2;
}
else if (条件式) {
   命令文1;
   命令文2;
} else {
   戻り値がFalseの場合の命令文;
}

else if文のコード例

　var name = "はなこ";
   if (name =="") alert("名前を入力してください。");
   else if (name == "たろう") alert("たろうさんこんにちは")
   else alert("正しい名前を入力してください")

コードの解説

1行目【var name = “はなこ”;】
varキーワードを使用して変数「name」を定義し文字列の「はなこ」を代入します。

2行目【 if (name ==””) alert(“名前を入力してください。”);】
if文を使用して、条件式に変数nameが「””」（長さ0文字の文字列）と等しい場合を定義して戻り値がTrueの場合、window【ｳｲﾝﾄﾞｳ】オブイェクトのalert【ｱﾗｰﾄ】メソッドを使用して
警告メッセージを表示します。

3行目【else if (name == “たろう”) alert(“たろうさんこんにちは”)】
else if文を使用してもう一つの条件式を設定します。変数nameが「”たろう”」の文字列と
等しい場合を定義して戻り値がTrueの場合、window【ｳｲﾝﾄﾞｳ】オブイェクトのalert【ｱﾗｰﾄ】メソッドを使用して警告メッセージを表示します。

4行目【 else alert(“正しい名前を入力してください”)】
else文ですべての条件式を戻り値がfalseの場合（条件が不成立の場合）を定義して、window【ｳｲﾝﾄﾞｳ】オブイェクトのalert【ｱﾗｰﾄ】メソッドを使用して警告メッセージを表示します。

実行結果

switch文

JavaScriptには、if文と同様に条件によって処理を分岐するswitch【ｽｲｯﾁ】文があります。if文では、条件式の結果がtrue（条件が成立）を判断して処理を実行しますが、switch文は「式」で評価された値がcaseに設定された値と等しいかどうかを上から順に比較していきます。

式と等しい値が見つかった場合は「break」キーワードが現れるまで、処理を実行します。「break」に到達した場合はswitch文を抜けて後続の処理を実行します。「break」キーワードが無い場合は、次のCase文またはdefault文も実行しますので注意が必要です。このことを「フォールスルー」といいます。

式の値がすべてのCaseの値と一致しない場合は、default【ﾃﾞﾌｫﾙﾄ】文の処理が実行されます。default文の処理が必要ない場合はdefault文は省略可能です。

if文とswitch文の比較イメージ図

switch文の書式

switch(式){
         case 値1:
             式の値が値1の場合の命令文1;
　　　　　break;
         case 値2:
             式の値が値2の場合の命令文1;
　　　　　break;
         default:（省略可）
            　式の値がどのcaseの値にも一致しない場合の命令文;
             }

switch文のコード例

var youbi = "日曜日";
   switch(youbi){
     case "月曜日":
     　　　alert("月曜日です。");
     break;
     case "火曜日":
          alert("火曜日です。");
     break;
     default:
          alert("日曜日です。");

実行結果

以上で、JavaScript の条件分岐についての解説を終了します。ありがとうございました。