JavaScript 条件分岐

スポンサーリンク
スポンサーリンク

JavaScriptの条件分岐

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

条件分岐の制御文一覧

制御文内容
if【イフ】条件式が成立(true)したとき設定した処理を実行します。
else【エルス】if文の条件式が不成立(false)だったときの処理を設定します。
else if【エルスイフ】if文の条件式以外にも判断したい条件式がある場合に使用します。
switch【スイッチ】条件式の値によっていくつかの異なる処理から
1つの処理を選択して実行します。

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 の条件分岐についての解説を終了します。
ありがとうございました。

スポンサーリンク
スポンサーリンク

フォローする

スポンサーリンク
スポンサーリンク