uhyohyo.net

JavaScript初級者から中級者になろう

基礎第三回

条件分岐

条件分岐とは、場合場合によって処理を変えるということです。次のサンプルを見てみましょう。

a = 5;
if(a == 3){
    alert("test");
}

実行してみると、「alert("test");」という行があり、「test」とアラートが表示されるはずなのに、表示されません。

「a=5;」の行は何かわかっているので、「if(a==3){」と「}」の行が関係がありそうです。

「if」という関数を「a==3」という引数で呼び出そうとしているように見えますが、実は違います

これは構文と呼ばれるもので、文法上の決まりのようなものです。つまり、ifはJavaScriptの決まった書き方の1つなのです。

さて、それではどういう書き方なのかですが、こうなっています。

if(  ){
    文(いくつでも)
}

意味は、「の値がならば、{ 〜 }の中の文を処理する」というものです。逆に、ならば処理しません。

真であるとは、どういうことかというと、それが正しいということです。逆に、偽であるとは、それが正しくないということです。

では、その式ですが、「a == 3」とあります。この==ですが、実は新しい演算子です。代入演算子の「=」とは直接関係ありません。

この演算子、左オペランド(左側の値)と右オペランド(右側の値)が等しければtrueを返し、そうでなければfalseを返します。

ここで、trueとfalseという単語が出てきました。これは、変数の名前ではなく、一つの固有の値です。

文字列数値に続く第三の値で、trueとfalseの2つをあわせて真偽値といいます。trueは正しいことを表し、falseは正しくないことを表します。

さて、ここでtrueがそのまま真に、falseが偽に対応します。つまり、次のようになります。

if(a == 3){
  ↓
if(false){

aはいま5なので、5と3は等しくないのでfalseが返されます。

式は偽ということになるので、{ 〜 }の中は飛ばされてしまいます。飛ばされた先にはもう何もないので、そこで終了します。結果、何も起こらないというわけです。

もし、「a=5;」を「a=3;」にした場合、「a==3」はtrueを返すので、{ 〜 }の中が飛ばされずに実行され、アラートが表示されます。

関係演算子

==は、関係演算子の一種です。算術演算子・代入演算子に続く、演算子の新しい種類です。

その名の通り、2つの値の関係を確かめるものです。

==」のほかに、「!=」「>」「<」「<=」「>=」などがあります。

!=」は「==」の反対で、等しくないときにtrueを返します。逆に等しいとfalseを返します。

「>」「<」は、見た目の通り不等号です。「>」は、左が右より大きいとき、「<」は、右が左より大きいとき、それぞれtrueを返します。

「>=」「<=」は、つまり「≧」「≦」です。それぞれ、大きいとき以外に等しいときもtrueを返します。

ちなみに、===!==という、==などに似ている演算子もあります。意味も==などと似ていますが、型チェックをするかどうかという違いがあります。しかし難しいので、詳しくはまた今度解説します。

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の中身は数値ですが、右にあるのは明らかに文字列です。数値と文字列を足すということは不可能なはずです。例えば実際に「3+『あ』=」なんて問題を出されたら答えようがありません。

では何をやっているのかというと、加算演算子+は、2つの文字列を連結する機能も持っています。連結するとは、くっつけるということです。だから、例えば"abc" + "def""abcdef"を返します。

今回は数値と文字列という組み合わせですが、実は、片方が文字列の場合、数値が文字列に変換されて文字列どうしになります。変換といっても、3だったなら"3"、5だったなら"5"というような単純なものです。

したがって、上のサンプルでは、aが15なら「15は10以上です」、aが25なら「25は10以上です」といった文ができるわけです。

else if文

実はまだ種類があります。else if文です。空白で2つに分かれていますが、2つでセットにします。

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つ挟まっています。また、else ifの括弧の中にもifと同じように式が記述されています。

else if文とは、ifで偽だった場合に再び条件分岐するというものです。

流れとしては、まず最初のifの式を判断します。だった場合その中の処理を実行し、一連の処理を終わります。

だった場合、次のelse ifの式を判断し、同じように真だった場合は処理を実行して終わります。

こうして真になるまでどんどん進んでいき、最終的にずっと偽でelseまでたどり着いた場合にelseの処理を実行します。

もちろん、ifとelse ifだけでelseが無いという形でも構いません。

このelse if文についてはもっと詳しい文法的説明もできるのですが、ここではしません。そういうものだと覚えておきましょう。