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

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

完成品

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

何をしているか

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

If文の使い方

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

If(x < 5){
}

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

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

を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です。=だけだと代入の意味になって式がうまく動きません。

Switch文の使い方

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

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

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

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

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系の記事まとめです。

sunagitsune.com

2019.02.23