条件分岐

JavaScriptは、条件によって処理を分岐させることができます。

本ページでは、条件分岐について説明します。

条件分岐とは

条件分岐とは、条件によって異なる処理をさせることです。

条件分岐の説明

例えば、数字の合計が10の時だけ「おめでとう」と表示して、それ以外では「残念」と表示することができます。

また、条件を追加して合計が9の時は「惜しい」と表示したりもできます。

次からは、条件分岐を行うif文switch文条件演算子の構文や使い方を説明します。利用例を示す時にx、y、zを変数として使っていますが、事前に宣言されているものとします。

if文

if文は、条件と処理を記述して実行させます。構文は、以下のとおりです。

【ifの構文】
if ( 条件式 ) {
  条件式がtrueの時の処理
} else {
  条件式がfalseの時の処理
}

条件式は、例えばx + y === 10などと記述します。xとyの合計が10であればtrueが返されて、「条件式がtrueの時の処理」が実行されます。

xとyの合計が10でなければfalseが返されて、「条件式がfalseの時の処理」が実行されます。

つまり、trueの時とfalseの時で処理が分岐します。

条件式は、xなど変数だけ記述することもできます。let x = 2などと値が代入されていた場合は、trueになります。let xで宣言して値が代入されていない場合は、falseになります。

次からは、if文の利用例を示します。

if文の簡単な利用例

以下は、xとyの合計が10だったら、zに「おめでとう」を代入させる例です。

【if文の例】
if ( x + y === 10 ) {
  z = "おめでとう";
}

このように、elseがなくてもif文は使えます。

次は、elseも利用する例です。

【if elseの利用例】
if ( x + y === 10 ) {
  z = "おめでとう";
} else {
  z = "残念";
}

xとyの合計が10でない場合は、zが「残念」になります。

else if

条件式がfalseの場合、さらに条件式を追加して処理をすることができます。

【else ifの利用例】
if ( x + y === 10 ) {
  z = "おめでとう";
} else if ( x + y === 9 ) {
  z = "惜しい";
} else {
  z = "残念";
}

xとyの合計が9の場合は、zが「惜しい」になります。else ifは、xとyの合計が10以外の時だけ処理されます。

ネスト(入れ子)

if文は、ネストできます。

【if文をネストする例】
if ( x === 1  ) {
  if ( x + y === 10 ) {
    z = "おめでとう";
  } else if ( x + y === 9 ) {
    z = "惜しい";
  }
    else {
    z = "残念";
  }
} else {
  z = "残念";
}

上記は、xが1でxとyの合計が10の時に、zが「おめでとう」になります。xが1でx + yが9の時は、zが「惜しい」になります。それ以外では、「残念」になります。

switch文

if文はtrueかfalseで分岐しますが、switch文は複数のパターンに分岐させることができます。構文は、以下のとおりです。

【switchの構文】
swicth ( 式 ) {
  case 値1:
    値1の時の処理
    break;
  case 値2:
    値2の時の処理
    break;
  default:
    その他の処理
}

式は、例えばx + yなどと記述します。

caseに続く値は、10など数字や"りんご"などの文字列です。文字列の場合は、ダブルクォーテーション(")かシングルクォーテーション(')で囲む必要があります。式の結果がこの値に一致すると、すぐ下の処理が実行されます。

breakは、switch文を抜けることを意味します。これがない場合、後続の処理が継続されます(例えば、値1の処理の後に値2などの処理も行われます)。

defaultは、値が一致しなかった時の処理です。

次からは、switch文の利用例を示します。

switch文の簡単な利用例

以下は、switch文の簡単な利用例です。

【switch文の利用例】
switch ( x + y ) {
  case 10:
    z = "おめでとう";
    break;
  case 9:
    z = "惜しい";
    break;
  default:
    z = "残念";
}

上記は、xとyの合計が10だったら、zに「おめでとう」、9の時は「惜しい」、それ以外では「残念」を代入します。

複数の値で同じ処理をさせる

以下は、複数の値で同じ処理ができます。

【switch文で複数の値で同じ処理をさせる例】
switch ( x ) {
  case "いちご":
  case "りんご":
  case "みかん":
    z = "くだもの";
    break;
  case "サバ":
  case "イワシ":
  case "ハマチ":
    z = "さかな";
}

上記は、xが"いちご"、"りんご"、"みかん"だった場合、zに「くだもの」が代入されます。途中にbreakがないためです。

xが"サバ"、"イワシ"、"ハマチ"の場合は、zに「さかな」が代入されます。

defaultがないため、xがその他の値の場合は処理が行われません。

条件演算子

条件演算子(または三項演算子)は、値がtrueかfalseで処理を分けることができます。構文は、以下のとおりです。

【条件演算子の構文】
( 条件式 ) ? 条件式がtrueの時の処理 : 条件式がfalseの時の処理

次からは、条件演算子の利用例を示します。

条件演算子の簡単な利用例

以下は、条件演算子の簡単な利用例です。

【条件演算子の簡単な利用例】
let z = ( x + y === 10 ) ? "おめでとう" : "残念";

上記は、xとyの合計が10の時はzが「おめでとう」になり、それ以外では「残念」になります。

これは、if文でも同じ条件分岐ができますが、複雑な分岐でない場合は条件演算子の方が記述が簡単です。

複数の条件演算子を使う

条件演算子は、以下のように複数使うこともできます。

【複数の条件演算子を使う例】
let z = ( x + y === 10 ) ? "おめでとう"
 : ( x + y === 9 ) ? "惜しい"
 : "残念";

上記は、xとyの合計が10の時はzが「おめでとう」になり、9の時は「惜しい」、それ以外では「残念」になります。

if文のelse ifと同じような条件分岐になりますが、やはりこちらの方が記述が簡単です。