JavaScriptで条件分岐する方法/if文、else、switch文、caseの使い方

soundboard IT

JavaScriptでIf文を使う方法です。定番のif/elseの他、Switch文の書き方についても言及します。

Advertisements

完成品

次のようなものを作ります(何度かクリックしてください)。

何をしているか

処理としては次のようなことをしています。
値が0の変数xを作成し、ボタンを押すたびにxの値を1増加。
・数字が1の場合は、数字をそのまま表示
・数字が2の場合は、数字+「を突破」と表示
・数字が3の場合は、数字+「が上限です」と表示
・いずれにも該当しない場合は、xの値を1減少(元に戻る)
この「数字が●の場合」を実現するのが、If文、またはSwitch文です(どちらでも実装できます)。

If文の使い方

If文での条件分岐
If(条件式){
//条件に合えば実行
}

たとえばxが5より小さい場合に実行したいのであれば、

If(x < 5){
}

となります。
しかしこれだけではひとつの条件が○か×かだけしか判定できません。もし最初の条件に合わなかった場合、もう一度判定するような仕組みが欲しいところです。これを実装したのがif~else文です

If~else文での条件分岐
If(条件式){
//条件に合えば実行
}

else if(条件式){//最初の条件が合わなかった場合
//条件に合えば実行
}

else{
//条件がどれも合わなかった場合に実行
}

else ifはいくつでも増やすことができますし、省略することも可能です。最初の式をこれにあてはめて、

・数字が1の場合は、数字をそのまま表示
・数字が2の場合は、数字+「を突破」と表示
・数字が3の場合は、数字+「が上限です」と表示
・いずれにも該当しない場合は、xの値を1減少(元に戻る)

をid="test"のdiv要素に出力する場合、例えば次のように記述することが可能です(scriptは省略)。

var x = 0;
x++;//xを1増やす
iftest = document.getElementById("test");//id"test"の要素をJS用に"iftest"に代入
if(x == 1){
iftest.innerHTML = x;
}else if(x == 2){
iftest.innerHTML = x + "を突破";
}else if(x == 3){
iftest.innerHTML = x + "が上限です";
}else{//どれも当てはまらない場合の処理
x--;//xを1減らす
}

上のコードをボタンに実装したものが下記となります。

ちなみにxが1と等しい場合は上のようにx == 1です。=だけだと代入の意味になって式がうまく動きません。

Advertisements

Switch文の使い方

JavaScriptでの条件分岐にはもうひとつ、Switch文というのがあります。If文とSwitch文はどちらが優れているとかはなく、片方でできることはもう片方でもできますが、両方知ってるほうがベターです。

Switch文での条件分岐
switch(変数名){

case 値:
//条件に合えば実行
break;

default:
//どれも当てはまらない場合の処理
break;
}

Switch文では変数を最初に指定し、変数の値が指定した値と一致した場合の処理を下に書いていきます。たとえばxが1なら、


switch(x){
case 1:
//処理
break;
}

という具合になります。いずれにも当てはまらない場合は、defaultを最後に置いておけば実行できます。
breakを付けることでswitch文の判定を終了します。これは基本的に全てのcaseとdefaultに付けます。意図的に判定を連続させることもできますが、プログラムが複雑化しやすいため、それぞれ独立させるほうが無難です。
Switch文で下の条件を記述してみましょう。

・数字が1の場合は、数字をそのまま表示
・数字が2の場合は、数字+「を突破」と表示
・数字が3の場合は、数字+「が上限です」と表示
・いずれにも該当しない場合は、xの値を1減少(元に戻る)
var x = 0;
x++;//xを1増やす
switchtest = document.getElementById("test");//id"test"の要素をJS用に"switchtest"に代入
switch(x){
case 1:
switchtest.innerHTML = x;
break;
case 2:
switchtest.innerHTML = x + "を突破";
break;
case 3:
switchtest.innerHTML = x + "が上限です";
break;
default:
x--;//xを1減らす
break;
}

これを実装すると一番最初のボタン(完成品)になります。必ずしも両方マスターする必要はありませんが、こういうひとつひとつ値が決まっているような処理はswitch、一定の値の幅がある場合などはifという風に、場面に合わせてわかりやすいコードが書けるのが理想的です。

JavaScriptの使い方・メソッド・プロパティまとめ
HTML/CSSとセットでフロントエンドエンジニア三種の神器のひとつ、JavaScript系の記事まとめです。

コメント