カテゴリ: JavaScript 更新日: 2025/02/24

JavaScriptの分岐処理(if文)を完全ガイド!初心者でもわかる基本

JavaScriptの分岐処理(if文)
JavaScriptの分岐処理(if文)

新人と先輩の会話形式で理解しよう

新人

「JavaScriptで、ある条件に応じて処理を分ける方法ってどうやるんですか?」

先輩

「それはif文を使います。if文を使うと、条件に応じて異なる処理を実行できます。」

新人

「具体的にはどのように使うんですか?」

先輩

「では、if文を使った基本的な例を見ていきましょう!」

1. if文とは?

1. if文とは?
1. if文とは?

JavaScriptのif文は、条件式に基づいて異なる処理を実行するための構文です。if文は「もし条件が真なら、この処理を実行」といった流れで動きます。

基本的な構文は以下の通りです:


<script>
    if (条件) {
        // 条件が真のときに実行する処理
    }
</script>

次に、具体的な例を見てみましょう。

2. if文の基本的な使い方

2. if文の基本的な使い方
2. if文の基本的な使い方

以下の例では、数値が10より大きいかどうかを確認し、その結果に応じてメッセージを表示しています。


<script>
    let number = 15;
    if (number > 10) {
        document.write("numberは10より大きいです。");  // 条件が真のとき実行される
    }
</script>
ブラウザ表示

このコードでは、変数numberが10より大きい場合に「numberは10より大きいです。」というメッセージを表示します。

3. if文にelseを使う

3. if文にelseを使う
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を使う

4. if文にelse ifを使う
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. 条件式の書き方

5. 条件式の書き方
5. 条件式の書き方

JavaScriptでは、さまざまな条件式を使ってif文を作成できます。例えば、数値の比較や論理演算子を使って複雑な条件を指定することができます。

次のコードでは、論理演算子&&を使って、2つの条件を両方とも満たす場合に処理を実行する例を示します。


<script>
    let number = 15;
    if (number > 10 && number < 20) {
        document.write("numberは10より大きく、20より小さいです。");
    }
</script>
ブラウザ表示

このコードでは、numberが15なので、条件が満たされ、「numberは10より大きく、20より小さいです。」が表示されます。

コメント
コメント投稿は、ログインしてください

まだ口コミはありません。

カテゴリの一覧へ
新着記事
Java の複数の引数を扱う方法を完全ガイド!カンマで区切る基本を初心者向けに解説
Java の void メソッドとは?戻り値がない場合の使い方を初心者向けに徹底解説
Javaのメソッドのメリットを完全解説!処理の整理と再利用で初心者でも読みやすいコードに
Javaの戻り値とは?初心者でもわかるメソッドの基本と値を返す仕組み
人気記事
No.1
Java&Spring記事人気No1
SQLのINSERT文を完全ガイド!初心者でもわかるデータの追加方法
No.2
Java&Spring記事人気No2
Modelとは?メソッド引数のModelの使い方を初心者向けに解説!
No.3
Java&Spring記事人気No3
SQLのサブクエリを完全ガイド!入れ子クエリの使い方を初心者向け解説
No.4
Java&Spring記事人気No4
HTMLのセレクトボックス(プルダウン)の使い方を完全ガイド!selectとoptionの基本を覚えよう