今回は、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文は実行されないからです。