JavaScriptの条件分岐に関して

トモジ

条件分岐って何？
詳しく知りたい・・・

本記事は、
上記のような方に向けて記事を書いています。

こんにちは、トモジです。

私はプログラミング未経験から独学で勉強して、
簡易的な動的サイト・ゲーム・サービスが作れる状態になりました。

本記事は、条件分岐に関して要点をわかりやすく説明しております。

JavaScriptの条件分岐に関して

JavaScriptでの条件分岐は、
if文とswitch文の2種類になります。

そして、非常に使用する機会が多い
構文になるので順番に見ていきましょう。

if文のフローチャート

if文とは、指定した条件での処理を記述して
該当する処理のみを行う命令文になります。

if文の記述方法

if文の記述方法は、条件式とtrue(真)・false(偽)
の処理内容を記述します。

そして、条件に当てはまらない項目は
全てelse側の処理になります。

else ifで条件分岐を増やす

else ifは条件分岐を増やすために必要で、
その結果に応じた処理を記述する事が可能です。

var x = 15;

if(x > 50){
    console.log("変数は50以上");
}else if(x > 20){
    console.log("変数は20以上");
}else if(x > 10){
    console.log("変数は10以上");
}else{
    console.log("変数は10未満");
}

たくさん条件式を書くと
可読性が悪くなるので注意

if文の省略記法

ブロック内の命令が1文である場合には、
中括弧{}を省略する事ができます。

var x = 15;

if(x > 50)
    console.log("変数は50以上");
else if(x > 20)
    console.log("変数は20以上");
else if(x > 10)
    console.log("変数は10以上");
else
    console.log("変数は10未満");

可読性が悪くなりバグも発生しやすいのでオススメはしません

ネストしたif文

if文は、ネスト(多重構造)で条件を指定する事が
可能です。

switch文

複数の条件式を使う場合には、
switch文を利用する事をオススメします。

同値演算子による多くの分岐に特化した
命令文になり、同じような条件式を繰り返し
記述しなくて良いので
コードがすっきりと
読みやすくなるのが特徴です。

switch文の記述方法

switch文の記述方法は、
条件式とそれに該当するcaseを記述し
breakは、条件にあった処理をした後にswitch文
から抜ける役割があります。

var num = 1;

switch(num) {
    case 0 :
        console.log("numは0です。");
        break;
    case 1 :
        console.log("numは1です。");
        break;
    case 2 :
        console.log("numは2です。");
        break;
    default :
        console.log("numは不明です。");
        break;
}

breakがない場合の動き

breakは、caseブロックから抜け出す命令になり
付けないと次のcase命令に進んでしまいます。

まとめ

最後にこの記事のポイントをまとめておきます。