if文を使ってみよう

今回は、if文の解説をします。

if文の使い方

script.jsを以下のように書き換えてください。

const x = 10;

if (x === 10) {
    console.log('xは10です。');
}

書き換えたら、コンソールを確認してください。「xは10です。」と表示されているはずです。

次に、x === 10を、x === 9に書き換えてみてください。

const x = 10;

if (x === 9) {
    console.log('xは9です。');
}

コンソールには何も表示されません。

ifの後には括弧()があり、その括弧の中がtrueであれば、波括弧{}の中のコードが実行されます。

逆に、括弧内の式がfalseの場合、波括弧内のコードは実行されません。

次に、以下のように書き換えてみてください。

const x = 10;

if (x < 12 && x > 8) {
    console.log('xは12より小さく、かつ8より大きい');
}

コンソールを確認すると、「xは12より小さく、かつ8より大きい」と表示されます。

&&を使うことで、複数の条件を書くことができます。

&&は両方が真である場合、trueになります。どちらか片方の条件が偽だった場合は、falseになります。

x < 12、x > 8のどちらも真なので、コードが実行されました。

もしxの値が6だった場合、x > 8はfalseになるのでコードは実行されません。

次に、以下のように書き換えてみてください。

const x = 10;

if (x === 8 || x === 10) {
    console.log('xは8、または10です。');
}

コンソールを確認すると、「xは8、または10です。」と表示されます。

||で複数の条件を指定した場合、1つでも真であればtrueを返します。

xは8ではありませんが、x === 10が真なのでtrueになります。

elseの使い方

script.jsを以下のように書き換えてみてください。

const x = 10;

if (x === 9) {
    console.log('xは9です。');
} else {
    console.log('xは9ではありません。');
}

コンソールを確認すると、「xは9ではありません。」と表示されます。

elseは、if文と繋げる形で記述します。ifの括弧内がfalseの場合、else {} の中のコードが実行されます。

else ifの使い方

script.jsを以下のように書き換えてみてください。

const x = 10;

if (x === 9) {
    console.log('xは9です。');
} else if (x === 10) {
    console.log('xは10です。');
} else {
    console.log('xは9または10のどちらでもありません。');
}

コンソールを確認すると、「xは10です。」と表示されます。

このように、else if で別の条件を追加することができます。

まず上から、x === 9の判定が行われ、それがfalseだったため、次のelse if (x === 10)の判定が行われます。

ここではxは10なのでtrueとなり、console.log('xは10です。');が実行されます。

ちなみに、if文がtrueだった場合、それ以降のelse if文の判定は行われません。

const x = 10;

if (x === 10) {
    console.log('xは10です。');
} else if (x > 5) {
    console.log('xは5より大きいです。');
}

xは5よりも大きいですが、コンソールには「xは10です。」だけが表示されます。

上にあるif文がtrueだったため、その後に続くelse if文は実行されないからです。