条件分岐－２
ステップ11では、条件に応じて処理を３つ以上に分ける条件分岐について学習します。そのほか、複数の条件式をつなぐ論理演算子やswitch文の利用方法も学習します。
11.1 else if で処理を３つ以上に分岐させる
ステップ10では、if文で条件分岐を行う方法を学習しました。ただし、if文で分岐できる処理は「真」と「偽」の２つまでです。処理を３つ以上に分ける場合は、以下のようにelse ifを利用する必要があります。
ここでは、上のJavaScriptを例に3つ以上の条件分岐について、その仕組みを見ていきましょう。この条件分岐の流れは以下のようになります。
・条件①
最初のif文により「i」が3より小さいか判定されます。3より小さかった場合は【処理A】が実行されます（【処理B】縲怐y処理C】は実行されません）。
・条件②
「i」が３以上であった場合は【処理A】が実行されず、次のelse ifで「i」が３と等しいか判別されます。３と等しかった場合は【処理B】が実行されます（【処理C】【処理D】は実行されません）。
・条件③
「i」が３と等しくなかった場合は【処理B】が実行されず、次のelse ifで「i」が５より小さいか判定されます。５より小さかった場合は【処理C】が実行されます（【処理D】は実行されません）。
・その他
「i」が条件①～③のいずれも満たさなかった場合、【処理D】が実行されます。
これを処理別にまとめると以下のようになります。
【処理A】･････「i」が3より小さい場合に実行される
【処理B】･････「i」が3と等しい場合に実行される
【処理C】･････「i」が3以上で５より小さい場合に実行される
【処理D】･････「i」が5以上の場合に実行される
■変数「i」と実行される処理の関係
11.2 論理演算子
続いては、変数「i」の値が”3以上かつ5以下”など、少し複雑な条件を指定する方法を学習します。このような条件分岐の解決策の１つとしては、以下のようにif文を入れ子して記述する方法が考えられます。
しかし、変数「i」の値が”3以下または5以上”といった条件では、この方法を用いることができません（※）。このような場合は、論理演算子を使って2つの条件を連結させます。JavaScriptでは以下の3種類の論理演算子を利用できます。
※この条件を先ほどの例と同様に記述すると、「i」が3より大きい場合、最初のif文で「偽」とあるため、次のif文が実行されません。よって、”または5以上”の条件を反映できなくなります。
■JavaScriptで使用できる論理演算子
| 演算子 | 記述例 | 意味 |
|---|---|---|
| && | i>=3 && i<=5 | 左右の条件式が両方とも満たされる場合のみ「真」になります（AND）。 それ以外の場合は、全て「偽」になります。 記述例の場合、「i」が3以上かつ5以下の場合、が条件になります。 |
| || | i<=3 || i>=5 | 左右の条件式のいずれかが満たされれば「真」になります（OR）。 左右の条件式をどちらも満たさない場合は「偽」になります。 記述例の場合、「i」が3以下または5以上の場合、が条件になります。 |
| ! | !(i<=3) | 「真」と「偽」を入れ替えます（NOT）。 よって、条件式を満たす場合が「偽」、満たさない場合が「真」になります。 記述例の場合、「i」が3以下でない場合、が条件になります。 |
たとえば論理演算子を使って”5以上または3以下”という条件を指定したif文は以下のようになります。
11.3 switch文で処理を分岐させる
3つ以上の条件分岐を行う場合は、else ifの代わりにswitch文を利用することも可能です。switch文は、変数の値ごとに実行する処理を指定できる命令で、以下のように記述を行います。
switch（変数）{
case 値A:
【変数の値がAであった場合の処理】
break;
case 値B:
【変数の値がBであった場合の処理】
break;
case 値C:
【変数の値がCであった場合の処理】
break;
default:
【上記以外の場合の処理】
}
switch文のカッコ内には、条件分岐の判定に使用する変数名を記述します。以降の{………}は条件分岐により実行される処理となり、caseに記述した値で実行する処理を分けていきます。ここでは、値A、値B、値Cの3つについて処理を指定していますが、これを４つ、５つ、…と増やしていくことも可能です。この時、各処理の最後に必ずbreak;を記述するのを忘れないでください（breakについては、ステップ12で詳しく解説します。）なお、最後のdefaultは、いずれのcaseにも一致しなかった場合の処理を記述する部分となります。defaultの記述は必須ではないため、省略しても構いません。
たとえば、変数「i」の値により３つの条件分岐を行う場合、switch文の記述は以下のようになります。
▼Sample11_1.html
ワンポイント
switch文で文字を条件分岐の判定に使用する場合は、caseに記述するも文字を「"」（ダブルクォーテーション）または「'」（シングルクォーテーション）で挟む必要があります。
ワンポイント
switch文の利点は、見た目にわかりやすい条件分岐を記述できることです。ただし、“数値（または文字に一致する場合）”という条件しか指定できないのが弱点です。○○以上や△△以下などの範囲で条件を指定する場合は、else ifで条件分岐を実行しなければいけません。
演習
（１）「Sample11_1.html」を参考に、switch文で以下のようなホームページを作成してみましょう。
問題
日本で最も面積が大きい“県”は何県でしょうか?
※ボタンのクリックが2回までの間はヒントが表示されます。
※ボタンを3回以上クリックすると、答えが表示されます。
※ボタンをクリックすると、関数「kotae()」を実行します。
※関数「kotae()」では、ボタンをクリックした回数に応じて表示するメッセージを以下のように変化させます。
※ボタンをクリックした回数を数えるために変数「i」を用意し、変数「i」の値に応じて条件分岐を行います。
（２）STEP10.4の「Sample10_1.html」を参考に、以下のようなホームページを作成してみましょう。
問題
次の二次方程式を満たす解を求め、そのボタンをクリックしなさい。
x2－5x=－6
※答えは2つあります。
※関数「hantei()」の条件分岐では、以下のような条件を指定します。
①「x」が1以下であれば「不正解！」と表示（それ以外は②へ進む）
②「x」が3以下であれば「正解！」と表示（それ以外は③へ進む）
③それ以外の場合は「不正解！」と表示
（３）論理演算子を利用し、演習（２）の条件分岐を１つのif～elseで記述してみましょう。
※「x」が２または３であれば「正解！」、それ以外の場合は「不正解！」と表示します。
※ここに直接入力できます。↓↓(テキストボックスのサイズは、右下の角をドラッグすると調節できます。)
→STEP10へ
→STEP12へ