今更聞けないJavaScript講座第2回「条件分岐」

どうも、シノだ。

この前、ちょっと番外編ということで、そもそもHTMLやCSS、JavaScriptがどう表示されているのか、ということを解説した。

ここら辺の話は理解しておくとよりプログラミングもしやすくなるものなので、よかったら見ておいて欲しい。

さて、今回は通常回だ。JavaScriptを解説していく。

内容は、条件分岐だ。その名の通り、ある条件によって処理を変えていこうと思う。

で、それに必要な真偽値と、比較演算子、論理演算子というものについても解説する。

ちょっと長くなるが、気楽に見て欲しい。

前回の復習

前回は、変数というものを扱った。値を入れておいて、別の場所で使えるものだ。

これはほぼ常に使うと思ってくれていいだろう。是非、マスターしてほしい。

条件分岐

さて、本題だ。

条件分岐とは、その名の通り、ある条件を指定してあげて、それに合致したら処理を行う、というような記述のことだ。

基本的な書き方は以下の通り。

if(真偽値){
    真偽値がtrueなら行う処理
}

これだけだ。英語で「もし～なら、…だ。」というのを、「If ～, ….」と言うだろう。そのifだ。これをif文という。

で、なんか初めて見る真偽値というやつが登場している。まずはこいつについて解説していこう。

真偽値

真偽値とは、真「true」、偽「false」のことだ。要するに、〇か×か。

このように、プログラムでは通常、真偽値が用意されている。

ちなみに、このtrueとfalseは、リテラルだ。リテラルって何？という方は前回の内容を見て欲しい。

で、リテラルということは、これも変数に格納することができる。

例えば、以下のようなJavaScriptを実行すると、コンソールにtrueと表示される。

var torf = true;
console.log(torf);

…と解説してきたが、このようにプログラム上ではtrueやfalseというものがそのまま書かれることはそんなに多くない。

どう使われるかというと、比較演算子や論理演算子の結果として使われるのだ。

これらについても解説していこう。

比較演算子

比較演算子とは、二つのものについて、それらを比較した結果を真偽値として返すもののこと。

言葉だとわかりづらいだろう。具体的なもので見ていく。

2つの値が等しいことを確認する「==」

まず、一つ目。イコール二つだ。

これを書くと、その左側、右側の値が一致する場合に、その両辺を含めてtrueに置き換わる。異なると、両辺含めfalseになる。

具体例を出すと、以下のような感じだ。

var res1 = (1 == 1);
var res2 = (2 == 3);
console.log(res1);
console.log(res2);

1行目では、数字の1と1を比較している。これはもちろん等しいので、結果はtrueになる。で、そのtrueが変数res1に代入されるので、3行目ではtrueと出力される。

2行目、今度は数字の2と3を比較。これは異なるので、結果はfalse。それがres2に代入されるので、4行目での出力はfalseだ。

2つの値が異なることを確認する「!=」

二つ目。上のイコール二つが、今度はビックリマークとイコールになっている。

ちなみに、ビックリマークは正式名称「エクスクラメーションマーク」という。これは別に覚えなくていい。

これは、上のイコール二つと逆で、異なった場合にtrue、一致した場合にfalseとなる。

上の具体例で、==を!=に変えてみよう。

var res1 = (1 != 1);
var res2 = (2 != 3);
console.log(res1);
console.log(res2);

こうすると、さっきとtrue、falseが逆転する。

2つの値の大小関係を確認する4つの比較演算子

これは主に数字の比較でよく使う。まあ、数学と同じイメージを持ってくれていい。

4つもあるので、箇条書きで説明しよう。なお、trueの場合だけ書くが、trueにならなかったらfalseになると思ってほしい。

• <：左が右より小さい場合にtrue
• <=：左が右以下の場合にtrue
• >=：左が右以上の場合にtrue
• >：左が右より大きい場合にtrue

数式でイメージして、その関係が正しければtrue、正しくなければfalseだ。直感的にわかると思う。

なお、1つ目と4つ目は、両辺が一致してもfalseだ。注意しよう。逆に、2つ目と3つ目は両辺が一致したらtrueだ。

比較演算子はこんなものだろう。次に、論理演算子というやつを解説していく。

論理演算子

論理演算子とは、基本的に2つの真偽値の組み合わせによって、真偽値を返すものだ。

言葉で書くとわかりづらいが、これも具体的なものを見るとイメージが湧くと思う。

AND

ANDは、&&を使う。

二つの真偽値について、両方ともtrueなら結果としてtrueに、どちらか一方でもfalseなら結果としてfalseになる。

例えば、以下のようなものを書いたとしよう。

var1 && var2

このとき、それぞれの変数の真偽値によって、ここの部分全体の真偽値は以下のようになる。

OR

ORは、||を使う。こいつはバーティカルバーといって、多分キーボードのバックスペース左のキーをShift付きで押せば出てくると思う。それを2つ重ねる。

これは、二つの真偽値どちらか一方でもtrueなら結果がtrue、両方falseのときのみ結果もfalseになる。

ANDの時と同じ例を出そう。

var1 || var2

このときの結果は以下の通り。

NOT

上までは2つの真偽値について見ていた。でも、こいつは一つの真偽値に対する論理演算子だ。

NOTは!を使い、真偽値の前につけると、その真偽値のtrue、falseを入れ替える。

!var1とすると、var1がtrueならfalseに、falseならtrueになる。

さて、ここまできてやっとif文の解説に戻れる。

if文具体例

さてさて、ようやくだが本題に戻って、if文の具体例を見ていこう。

やりたいこととして、変数numの値が60以上なら「合格！」、60未満(60は含まない)なら「不合格…」と表示してみよう。

このソースコードは以下のようになる。

var num = 60;
if(num >= 60){
    console.log("合格！");
}
if(num < 60){
    console.log("不合格…");
}

これをそのまま実行すると、「合格！」とコンソールに表示される。数字を変えて確かめてみよう。

else if

さて、上の例の場合、1つ目の条件に当てはまらなかったら2つ目の条件を確認する、というふうに変えてみよう。

これには、else ifを使う。以下のように書き換えよう。

var num = 60;
if(num >= 60){
    console.log("合格！");
}else if(num < 60){
    console.log("不合格…");
}

二つ目のif文の形が変わった。このように、if文の後ろにelse if(真偽値){と続けると、一つ目のif文の条件に合致しなかったら、二つ目が実行されるようになる。

この書き方はいくつでも並べることができ、そこまでのif文全部が実行されなかったときに、初めてそこが判定されるようになる。

つまり、一か所trueになった時点で、そこ以降は無視されるようになるのだ。

else

…と書いたが、60以上でなければ、必ず60未満になるだろう。つまり、一つ目のif文がfalseだった場合に、二つ目の処理をしたい。

そんな書き方も用意されている。以下のように直してみる。

var num = 60;
if(num >= 60){
    console.log("合格！");
}else{
    console.log("不合格…");
}

二つ目のif文の真偽値がごっそり消えてしまった。でも、問題なく動く。

このように、elseだけ書くと、そこまでのif文全てがfalseの場合に行う処理を書くことができる。

もちろん、上のelse ifと組み合わせることもできる。

オマケ：余りを求める

さて、直接if文と関係があるわけではないが、よく一緒に使うものをご紹介しよう。

例えば、ある数字について、それが奇数か偶数かを判定したいとする。よくあるプログラミングの問題だ。

このとき、余りを求める計算が定義されている。それが、%だ。

a % bとすると、aをbで割った余りを求めることができる。

具体的なソースを書いてみる。

var num = 60;
if(num % 2 == 1){
    console.log("奇数");
}else{
    console.log("偶数");
}

こう書くと、numを2で割った余りが1なら…つまり、numが奇数なら、という条件が書けるのだ。

よく使うものの一つなので、覚えておいて欲しい。

まとめ

いかがだっただろうか。今回は、条件分岐を行うif文と、それに使える真偽値、そして真偽値を扱う比較演算子、論理演算子を紹介した。

これで、やっとプログラミングらしくなってきた。

次回は、繰り返し処理を解説する。これも、プログラムには欠かせないものの一つだろう。これができれば本当に基礎の部分だが、一通りできるようになる。

是非、マスターしてほしい。

更新情報はTwitterでも呟いている。ページ下部のTwitterアイコンから覗いていってくれると嬉しい。

それでは。