基礎第三回
このページの最終更新日：
条件分岐
条件分岐とは、場合場合によって処理を変えるということです。次のサンプルを見てみましょう。
a = 5;
if(a == 3){
alert("test");
}実行してみると、alert("test");という行があり、「test」とアラートが表示されるはずなのに、表示されません。
a = 5;の行は何かわかっているので、if(a == 3){と}の行が関係がありそうです。
これはifという関数をa == 3という引数で呼び出そうとしているわけではありません。
これはif文です。
if文は、次のような書き方の文です。
if( 式 ){
文（いくつでも）
}（ここで「おや、この定義は違うじゃないか、{ 〜 }の部分はBlockであってif文の定義には含まれない」などと思った人は、基礎なんか読んでないでさっさと第一章に進んでください。）
意味は、「式の値が真ならば、{ 〜 }の中の文を処理する」というものです。逆に、偽ならば処理しません。
真であるとは、どういうことかというと、それが正しいということです。逆に、偽であるとは、それが正しくないということです。
では、その式ですが、「a == 3」とあります。この==ですが、実は新しい演算子です。代入演算子の「=」とは直接関係ありません。
この演算子、左オペランド（左側の値）と右オペランド（右側の値）が等しければ、trueを返し、そうでなければfalseを返します。（ただし、いろいろと面倒な事情が裏にあります。詳細なことは基礎編ではやりませんが、詳しくは九章第七回を参照してください。）
ここで、trueとfalseという単語が出てきました。これは、変数の名前ではなく、値の名前です。
これらは文字列と数値に続く第三の種類の値で、trueとfalseの2つをあわせて真偽値といいます。trueは真（正しいこと）を表し、falseは偽（正しくないこと）を表します。プログラムにtrueなどと書いた場合、変数trueではなく、trueという値を指していることになります。ちなみに、このように何らかの値を直接指し示す書き方をリテラルといいます。trueやfalseは真偽値リテラルです。他の種類のリテラルもすでに登場しています。3などの数値リテラル、"あいう"などの文字列リテラルです。
さて、if文に話を戻しましょう。上の例は次のように実行されます。
if(a == 3){
↓
if(false){aはいま5なので、5と3は等しくないので==はfalseが返しました。
式がfalse（偽）となったので、{ 〜 }の中は実行されません。if文の先にはもう何もないので、プログラムはそこで終了します。結果、何も起こらないというわけです。
もし、a=5;をa=3;にした場合、a == 3はtrueを返すので、{ 〜 }の中が飛ばされずに実行され、アラートが表示されます。
関係演算子
==は、関係演算子の一種です。これは、算術演算子・代入演算子に続く、演算子の新しい種類です。
関係演算子はその名の通り、2つの値の関係を調べるものです。
==のほかに、!=><<=>=などがあります。
!=は==の反対で、等しくないときにtrueを返します。逆に等しいときはfalseを返します。
><は、見た目の通り不等号です。>は左が右より大きいときに、<は右が左より大きいときに、それぞれtrueを返します。
>=<=は、つまり「≧」「≦」です。それぞれ、大きいとき以外に等しいときもtrueを返します。
ちなみに、===と!==という、==などに似ている関係演算子もあります。意味も==などと似ていますが、説明はやや難しいのでここではしません。ただ、JavaScriptができる人は==よりも===を好んで使います。（===についての説明は第九章第七回を参照してください。）
else
elseは、if文とセットで使われるもので、偽の場合の処理を記述します。つまり、ifとelseを使うことで、「真の場合はこの処理、偽の場合はこの処理」といったことが可能になります。次のサンプルを見てみましょう。
a = 20;
if(a >= 10){
alert(a + "は10以上です");
}else{
alert(a + "は10より小さいです");
}やってみると、a >= 10はtrueを返すので、「20は10以上です」というアラートが出ます。aの値をいろいろ変えて試してみましょう。
これは、
if(a >= 10){
alert(a + "は10以上です");
}と
else{
alert(a + "は10より小さいです");
}の部分に分けて考えることができます。
ちなみに、{ 〜 }の中が右に寄っているのは、左側に半角スペースを並べて右に寄せています。これはインデントというもので、プログラムを見やすくするための方法です。一般に、{ 〜 }の中は一段インデントします。
ifの部分はa >= 10、つまりaが10以上のときの処理で、elseの部分はそうでないときの処理です。ifの部分の処理をしたときは、当然elseの部分の処理は飛ばされます。
今まで見てきたように、elseの部分はなくても構いません。
加算演算子による文字列の連結
上のサンプルで、alert(a + "は10以上です");のような処理があります。alertの引数がa + "は10以上です"なのはいいですが、少し不可解な部分があります。
aの中身は数値ですが、右にあるのは明らかに文字列です。今までの説明では+演算子は足し算をする演算子でしたから、オペランドは数値同士でないといけないはずです。
実は、+はもうひとつ機能があります。それは、2つの文字列を連結する機能も持っています。例えば"abc" + "def"は"abcdef"という文字列を返します。
今回は左のaは文字列ではなく数値ですが、この場合は数値が文字列に変換されて文字列どうしになります。数値から文字列への変換というのは、例えば3は"3"に、5は"5"にというような処理です。変換前は数値、変換後は文字列になっていることを理解してください。
このように+は、オペランドのどちらか一方が文字列なら文字列連結機能を発揮し、そうでなければ通常の足し算機能を発揮するという特殊な演算子なのです。
上のサンプルでは、aが15なら「15は10以上です」、aが25なら「25は10以上です」といった文ができるわけです。
else if
実はif文にはまだバリエーションがあります。それはelse ifです。これはelseとifの合わせ技で、次のように書きます。
a = 18;
if(a >= 20){
alert(a + "は20以上です");
}else if(a >= 15){
alert(a + "は15以上です");
}else if(a >= 10){
alert(a + "は10以上です");
}else if(a >= 5){
alert(a + "は5以上です");
}else{
alert(a + "は5より小さいです");
}if(...){ 〜 }とelse{ 〜 }の間に、else if(...){ 〜 }が3つ挟まっています。
この書き方により、ifで偽だった場合に再び条件分岐することが可能になります。
流れとしては、まず最初のifの式を判断します。真だった場合その中の処理を実行し、一連の処理を終わります。
偽だった場合、次のelse ifの式を判断し、同じように真だった場合は処理を実行して終わります。
こうして真になるまでどんどん進んでいき、最終的にずっと偽でelseまでたどり着いた場合にelseの処理を実行します。
もちろん、ifとelse ifだけでelseが無いという形でも構いません。
（ちなみに、else ifは文法上はelse節のBlockの代わりにif文を入れた形になります。何を言っているのか気になる人は調べてみましょう。しかし、調べなくても上に書いてあることが分かればこの先問題ないでしょう。）