JavaScriptの分岐処理(if文)を完全ガイド!初心者でもわかる基本
新人
「JavaScriptで、ある条件に応じて処理を分ける方法ってどうやるんですか?」
先輩
「それはif文を使います。if文を使うと、条件に応じて異なる処理を実行できます。」
新人
「具体的にはどのように使うんですか?」
先輩
「では、if文を使った基本的な例を見ていきましょう!」
1. if文とは?
JavaScriptのif文は、条件式に基づいて異なる処理を実行するための構文です。if文は「もし条件が真なら、この処理を実行」といった流れで動きます。
基本的な構文は以下の通りです:
<script>
if (条件) {
// 条件が真のときに実行する処理
}
</script>
次に、具体的な例を見てみましょう。
2. if文の基本的な使い方
以下の例では、数値が10より大きいかどうかを確認し、その結果に応じてメッセージを表示しています。
<script>
let number = 15;
if (number > 10) {
document.write("numberは10より大きいです。"); // 条件が真のとき実行される
}
</script>
ブラウザ表示
このコードでは、変数numberが10より大きい場合に「numberは10より大きいです。」というメッセージを表示します。
3. if文にelseを使う
if文は、条件が偽の場合に実行する処理を指定するために、elseを使うことができます。elseを使うと、条件が偽のときに実行される別の処理を指定できます。
次のコードでは、numberが10より大きい場合と小さい場合で異なるメッセージを表示しています。
<script>
let number = 5;
if (number > 10) {
document.write("numberは10より大きいです。");
} else {
document.write("numberは10以下です。"); // 条件が偽の場合に実行される
}
</script>
ブラウザ表示
このコードでは、変数numberが10より小さいため、「numberは10以下です。」と表示されます。
4. if文にelse ifを使う
else ifを使うと、複数の条件を順番にチェックすることができます。これにより、異なる複数の条件に対して異なる処理を行うことができます。
次のコードでは、numberの値に応じて異なるメッセージを表示します。
<script>
let number = 15;
if (number > 20) {
document.write("numberは20より大きいです。");
} else if (number > 10) {
document.write("numberは10より大きく20以下です。");
} else {
document.write("numberは10以下です。");
}
</script>
ブラウザ表示
このコードでは、numberが15なので、「numberは10より大きく20以下です。」が表示されます。
5. 条件式の書き方
JavaScriptでは、さまざまな条件式を使ってif文を作成できます。例えば、数値の比較や論理演算子を使って複雑な条件を指定することができます。
次のコードでは、論理演算子&&を使って、2つの条件を両方とも満たす場合に処理を実行する例を示します。
<script>
let number = 15;
if (number > 10 && number < 20) {
document.write("numberは10より大きく、20より小さいです。");
}
</script>
ブラウザ表示
このコードでは、numberが15なので、条件が満たされ、「numberは10より大きく、20より小さいです。」が表示されます。