今回は、JavaScriptを基礎からの続きで「条件分岐」について見ていきたいと思います。
条件分岐とは、
Aである場合A+する。
または、Bである場合はB+する。
そのどちらでもなければC+する。
などのように提示した条件が、「真（正しい）」もしくは「偽（正しくない）」場合によってその後の処理を変えていく方法になります。
その中でも一般的なものは「if文」と呼ばれる「if○○であったなら△△する。そうでなければ××する。」という構文があります。
基本的な書き方は下図のようになります。
では、実際に条件を提示して見ていきましょう。
条件サンプル1
変数（hensu）に数値の「100」を代入し、if(もし)変数(hensu)の値が「50より大きい場合」「CLEAR!」と出力する。そうでなければ「AGAIN!」と出力する。
|
1 2 3 4 5 6 |
var hensu = 100; if(hensu > 50){ console.log("CLEAR!"); }else{ console.log("AGAIN!"); } |
このように記述すると、
変数（hensu）に100が代入されているので「CLEAR!」と表示されます。
条件サンプル2
また、変数（hensu）に数値の「30」を代入し、if(もし)変数(hensu)の値が「50より大きい場合」「CLEAR!」と出力する。そうでなければ「AGAIN!」と出力する。
|
1 2 3 4 5 6 |
var hensu = 30; if(hensu > 50){ console.log("CLEAR!"); }else{ console.log("AGAIN!"); } |
このように記述すると、
変数（hensu）に30が代入されているので「AGAIN!」と表示されます。
条件サンプル3
次は、条件を複数指定したい場合は、「if～else if～else～」と指定することができます。
変数（hensu）に数値の「60」を代入し、if(もし)変数(hensu)の値が「70より大きい場合」「CLEAR!」と出力する。「70より大きくはなく50より大きい場合」「MORE!」と出力し、そうでなければ「AGAIN!」と出力する。
|
1 2 3 4 5 6 7 8 |
var hensu = 60; if(hensu > 70){ console.log("CLEAR!"); }else if(hensu > 50){ console.log("MORE!"); }else{ console.log("AGAIN!"); } |
このように記述すると、
このように、変数に値を代入してそれを何かと条件比較して処理を切り替えていきます。
比較演算子
比較するのに用いる記号を「比較演算子」と言いますが、以下のような種類があります。
| > | ～より大きい |
| < | ～より小さい |
| >= | ～以上 |
| <= | ～以下 |
| ===(==) | ～と等しい |
| !==(!=) | ～と等しくない |
論理演算子
また論理的にAかつB、AもしくはB、Aではない、などの「論理演算子」には以下のようなものがあります。
| && | AND（かつ） |
| || | OR(または) |
| ! | NOT(ではない) |
このような比較演算子を用いて、状況に応じた条件を提示し処理を切り分けていきます。
真偽値
値によって何が「真」であり「偽」であるかを見ていきます。
| 文字列 | 空文字以外であればtrueである |
| 数値 | 0かNaN(Not a Number)以外であればtrueである |
| object | null以外であればtrueである |
| undefined,null | false |
例えば、
|
1 2 3 |
if(x){ //ここの処理をする } |
この条件式は下記と同じ意味になります。
|
1 2 3 |
if(x !== ''){ //ここの処理をする } |
三項演算子
変数「a,b,c」があるとします。条件が真であった場合a=bであり、そうでない場合a=cである。
|
1 2 3 4 5 6 |
var a, b, c; if(条件) { a = b; }else { a = c; } |
これは、下記のように書き換えることができます。
|
1 |
a = (条件) ? b : c; |
三項演算子は、少しややこしいですが意味は理解できるようにしておいた方がいいでしょう。