JavaScript 条件分岐処理まとめ

本記事では、プログラミングJavaScriptでの条件分岐処理について紹介します。

文法

JavaScriptは、他のプログラミング言語とさして変わりはありません。

if文

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

ブロックは、波括弧{}で囲みます。

条件というところで、処理をさせたい条件を指定します。

処理では、可読性を高めるためインテンドしましょう。インテンドはTabキーでできます。

else ifでは、最初にifでの条件ではない条件で処理をさせたい場合に用いります。

elseとifは、くっつけず、スペースを空けましょう。SyntaxErrorとなります。

elseでは、上記の条件に全て合わない場合の処理をしたい場合に用いります。

else if やelseは、必ず使う必要はありません。必要に応じて使いましょう。

JavaScriptでは、コードの末にセミコロン;を記述しますが、波括弧の最後には、セミコロンはいりません。

また、if文以外にswitch文もあります。

switch文

switch(条件(変数)){
    case 値１:
        処理
        break;
    case 値２:
        処理
        break;
    case 値３:
        処理
        break;
    default:
        処理
        break;
}

switchの括弧の中に変数を入れ、改行及びインテンドしましょう。

caseの後に値を入れて、コロンを記述します。改行し、インテンドし、ここにその値の時の処理を記述します。

処理の最後にbreakと記述しましょう。これをしないとその次のcaseの処理も実行してしまいます。

このような形で追加していきます。

defaultは、上で記述した条件に合わない場合に実行する処理を記述します。

JavaScriptでは、コードの末にセミコロン;を記述しますが、波括弧の最後には、セミコロンはいりません。

具体例

const number =1;
if(number%2===0){
    console.log(`${number}is even number.`);
}else if(number%3===0){
    console.log(`${number}is odd number.`);
}else{
    console.log(number);
}

定数numberが2の倍数であれば、$number is even number、3の倍数であれば、$number is odd numberと出力し、それ以外では、$numberのみを出力しています。

const color = "赤";
switch (color){
    case "赤":
        console.log("red");
        break;
    case "青":
        console.log("blue");
        break;
    case "黄":
        console.log("yallow");
        break;
    case "緑":
        console.log("green");
        break;
    default:
        console.log("unknown");
        break;       
}

定数colorが赤の場合、red、青の場合、blue、黄色の場合、yallow、緑の場合、greenと出力する条件分岐です。その条件に合わない場合は、unknownと出力します。

基本的にswitch文で出来ることはif文でできます。

if文とswitch文の使い分けですが、条件の分岐が多いかつある式のみ比較して分岐する場合、if文よりswitch文を用いることで可読性が向上します。