【JavaScrip基礎】条件分岐if文の使い方

2023年4月4日2023年5月2日

URLをコピーしました！

JavaScript

前回、JavaScriptの繰り返し処理for文の使い方を勉強しました。

if文の基礎

if文の基本的な使い方としてはこんな感じです。

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

最初の条件を「if(条件式)」で分岐させ、他の条件を「else if(条件式)」で分岐させる。

またそれ以外の条件を「else」で分岐させます。

もちろん一度に全部使う必要はなく、必要な分だけ使って大丈夫です。

ifのみで条件分岐

まずは「if(条件式)」だけで分岐させてみます。

var num = 10;

if(num >= 5){
    console.log(num + ' is more than 5')
}

実行結果
10 is more than 5

これで「var num = 10;」を「var num = 3;」に変更してみます。

var num = 3;

if(num >= 5){
    console.log(num + ' is more than 5')
}

実行結果

「var num = 3;」では条件に合わないので、if文の中の処理は行われませんでした。

次に「if…else if」を試してみます。

var num = 10;

if(num >= 5){
    console.log(num + ' is more than 5')
}else if(num < 5){
    console.log(num + ' is less than 5')
}

実行結果
10 is more than 5

「var num = 10;」を「var num = 3;」に変更してみます。

var num = 3;

if(num >= 5){
    console.log(num + ' is more than 5')
}else if(num < 5){
    console.log(num + ' is less than 5')
}

実行結果
3 is less than 5

確かに二つの条件で分岐できています。

if…elseで条件分岐

次に「if…else」を試してみましょう。

var num = 10;

if(num >= 5){
    console.log(num + ' is more than 5')
}else{
    console.log('other')
}

実行結果
10 is more than 5

これも「var num = 10;」を「var num = 3;」に変更してみます。

var num = 3;

if(num >= 5){
    console.log(num + ' is more than 5')
}else{
    console.log('other')
}

実行結果
other

if…else if…elseで条件分岐

また「if…else if…else」と全てを組み合わせることも可能です。

var num = 10;

if(num >= 5){
    console.log(num + ' is more than 5')
}else if(num >= 0 && num < 5){
    console.log(num + ' is less than 5, but more than 0')
}else{
    console.log(num + ' is less than 0')
}

実行結果
10 is more than 5

「var num = 10;」を「var num = 3;」に変更するとこうなります。

var num = 3;

if(num >= 5){
    console.log(num + ' is more than 5')
}else if(num >= 0 && num < 5){
    console.log(num + ' is less than 5, but more than 0')
}else{
    console.log(num + ' is less than 0')
}

実行結果
3 is less than 5, but more than 0

さらに「var num = 3;」を「var num = -5;」に変更するとこうなります。

var num = -5;

if(num >= 5){
    console.log(num + ' is more than 5')
}else if(num >= 0 && num < 5){
    console.log(num + ' is less than 5, but more than 0')
}else{
    console.log(num + ' is less than 0')
}

実行結果
-5 is less than 0

ここで「else if」の部分では複数の条件が指定されており「&&」で繋がれている表現がいきなり出てきました。

前回for文を勉強した時に「複数の条件を同時に満たす、もしくはどちらか一方を満たすなどを繰り返し条件とするには論理演算子というものが必要」ということをお話ししました。

実はこの「&&」というのが論理演算子で、この場合は両方の条件を満たす場合、つまり「AかつB」の条件になります。

ということで次回はこの論理演算子の勉強をしてみましょう。