javascript(jQuery)で始めるプログラム基礎 3

前回は、プログラムで扱えるデータの型についてお伝えしました。
また、配列やオブジェクトといった物も紹介しました。

今日は、プログラムでも重要な要素の一つである、分岐を紹介します。
分岐とは、「もし○○が、▲▲であったら、◇◇を行う」というように、何かの条件に応じて、処理を振り分けることを言います。
分岐のことを条件分岐とも呼びます。

1.はじめてのif文

条件分岐で、もっともよく使う構文は、if文と呼ばれる書き方です。
以下の様な文法で書きます。

if(条件){
処理
}


()の中の条件が成り立つ時(trueの時、真の時と呼んだりします)、{}で括られた処理を実行してください。という意味になります。

簡単な条件分岐を書いてみます。
前回同様、htmlファイルに直接scriptタグで書いていきます。

var kazu = 10;

if(kazu>5){
console.log("変数kazuは、5より大きい");
}


//->「変数kazuは、5より大きい」が出力される

まず最初に、変数kazuに対して10を入力しています。

そして、分岐のコードです。
まず()の中の条件を見てみます。
kazu>5
これは、「変数kazuが5よりも大きかったら」という意味です。
この条件が成り立つ時のみ、{}の中の処理を行います。
今は、変数kazuには10が代入されており、条件は成り立ちます。
なので、{}の中の処理が実行され、consoleに「変数kazuは、5より大きい」が出力されます。
試しに、変数kazuに色々な数値を入れてみてください。
5以下の数値を入れた場合は、なにも出力されないはずです。

この様に、条件に合わせて処理をしたりしなかったりをコントロールする事ができます。
これを、条件分岐と言います。

2.if文を拡張(「そうじゃなかったら〜」の処理を追加)

if文は、もう少し拡張する事ができます。
前述のif文は、条件が一つだけで、それが成り立たなかったら何もしません。
そうではなくて、「そうじゃなかったらこの処理をして下さい」という書き方が出来ます。

if(条件){
処理A
}else{
処理B
}


以上のコードは、
「条件」が成り立つときは、「処理A」をして下さい。
そうじゃなかったら、「処理B」をして下さい。
という意味になります。
実際のコードで挙動を確かめます。
先ほどのコードを以下の様に書き換えます。

var kazu = 10;

if(kazu > 5){
console.log("変数kazuは、5より大きい");
}else{
console.log("変数kazuは、5未満");
}


このコードにすれば、kazuにどんな数値を代入しても、どちらかの処理は必ず実行されます。

3.条件を複数指定

前回までは、条件が一つしかありませんでしたが、複数の条件をつけることも可能です。

if(条件1){
処理1
}else if(条件2){
処理2
}

この様に、else if(条件){処理}を増やすことで、途中に何個も条件をつける事が出来ます。


var kazu2 = 10;

if(kazu2 > 20){
console.log('変数kazu2は、20より大きいです');
}else if(kazu2 > 5){
console.log('変数kazu2は、5より大きいです');
}
//->「変数kazu2は、5より大きいです」を出力

変数kazu2には、10が代入されているから、1つめの条件である、kazu2 > 20は、成り立ちません。
ですが、2つめの条件である、kazu2 > 5は成り立ちます。
よって、console.log('変数kazu2は、5より大きいです');が、実行されます。

今のコードの場合、kazu2に代入する値が5以下の場合は何も実行しません。
ですが、以下の様に最後にelse文を付けることも可能です。

var kazu2 = 3;

if(kazu2 > 20){
console.log('変数kazu2は、20より大きいです');
}else if(kazu2 > 5){
console.log('変数kazu2は、5より大きいです');
}else{
console.log('変数kazu2は、5以下です);
}



尚、条件が複数入るときは、記述する順番に対して、注意しなければなりません。

if(条件1){
処理1
}(条件2){
処理2
}


以上の書き方で、仮に、条件1と条件2が、両方成り立ちうる書き方をした場合、最初の方が優先され、処理1を実行して終わりです。
処理2は実行されません。

var kazu3 = 15;

if(kazu3 > 5){
console.log('変数kazu3は、5より大きいです');
}else if(kazu3 > 10){
console.log('変数kazu3は、10より大きいです');
}


このコードの場合、両方の条件が成り立ちますが、処理されるのは、最初の処理である、
console.log('変数kazu3は、5より大きいです');
の部分だけです。

複数の条件を入れるときは、なるべく同時に成り立たない様な条件を考える必要があります。
どうしても、同時に成り立ってしまう場合は、成り立ちにくい順に書く必要があります。
例えば、以下の貯金箱みたいなものをイメージするとわかりやすいかもしれません。



コインの通る道に、各々のコインの大きさに合わせた穴が空いており、その穴に該当するコインが分けられる仕組みだと思うのですが、もし、一番大きい500円玉用の穴が、コインの通る道の一番最初にあった場合、すべてのコインが500円の所に落ちてしまいます。
という事で、成り立ちにくい条件から書いていく必要があります。

4.まとめ

今回は、条件分岐について紹介しました。
今回紹介したif文は、条件分岐の中でもとてもスタンダードな物です。
Javascriptだけではなく、様々なプログラムで使えます。多少文法が違う可能性はありますが考え方は同じなので、しっかり反芻しておきましょう。

なお、if文の他にも、条件分岐の方法はいくつかあります。
ですが、まずはif文に慣れてみて下さい。