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

JavaScriptの比較演算子を完全ガイド!初心者でもわかる基本

JavaScriptの比較演算子
JavaScriptの比較演算子

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

新人

「JavaScriptで、2つの値を比較して、どちらが大きいか小さいかを調べる方法ってどうやるんですか?」

先輩

「それには、比較演算子を使います。比較演算子を使うと、値や型を比較して結果を得ることができますよ。」

新人

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

先輩

「では、比較演算子を使った例を見ていきましょう!」

1. 比較演算子とは?

1. 比較演算子とは?
1. 比較演算子とは?

JavaScriptの比較演算子は、2つの値を比較して、条件が満たされるかどうかを調べるために使います。比較の結果は、真(true)または偽(false)のいずれかになります。

主な比較演算子は以下の通りです:

  • ==: 値が等しいか
  • ===: 値と型が等しいか
  • !=: 値が等しくないか
  • !==: 値もしくは型が等しくないか
  • <: より小さいか
  • >: より大きいか
  • <=: 以下か
  • >=: 以上か

2. 値と型が等しい(===)

2. 値と型が等しい(===)
2. 値と型が等しい(===)

「値と型が等しいか」を調べる場合は、===を使います。===は、値だけでなく、データ型も一致しているかどうかを比較します。

次のコードでは、2つの変数が値と型の両方で等しいかどうかを比較しています。


<script>
    let x = 5;
    let y = 5;
    if (x === y) {
        document.write("xとyは値も型も等しいです。");
    } else {
        document.write("xとyは等しくありません。");
    }
</script>
ブラウザ表示

このコードでは、xyが値も型も等しいので、「xとyは値も型も等しいです。」が表示されます。

3. 値が等しい(==)

3. 値が等しい(==)
3. 値が等しい(==)

「値が等しいか」を調べる場合は、==を使います。==は、値が等しいかを比較しますが、型の違いは自動的に変換されて比較されます。

次のコードでは、2つの変数が値で等しいかどうかを比較しています。


<script>
    let x = "5";  // 文字列型
    let y = 5;    // 数値型
    if (x == y) {
        document.write("xとyは値が等しいです。");
    } else {
        document.write("xとyは値が等しくありません。");
    }
</script>
ブラウザ表示

このコードでは、文字列型のxと数値型のyは値が等しいため、「xとyは値が等しいです。」が表示されます。

4. 値もしくは型が等しくない(!==)

4. 値もしくは型が等しくない(!==)
4. 値もしくは型が等しくない(!==)

「値もしくは型が等しくないか」を調べる場合は、!==を使います。この演算子は、値または型のどちらかが異なる場合にtrueを返します。

次のコードでは、2つの変数が値または型が異なるかどうかを比較しています。


<script>
    let x = 5;
    let y = "5";  // 型が違う
    if (x !== y) {
        document.write("xとyは値もしくは型が等しくないです。");
    } else {
        document.write("xとyは等しいです。");
    }
</script>
ブラウザ表示

このコードでは、xyは型が異なるため、「xとyは値もしくは型が等しくないです。」が表示されます。

5. より小さい(<)

5. より小さい(<)
5. より小さい(<)

「より小さいか」を調べる場合は、<を使います。この演算子は、左辺の値が右辺より小さい場合にtrueを返します。

次のコードでは、2つの変数を比較して、左辺が右辺より小さいかどうかを調べています。


<script>
    let x = 3;
    let y = 5;
    if (x < y) {
        document.write("xはyより小さいです。");
    }
</script>
ブラウザ表示

このコードでは、xyより小さいので、「xはyより小さいです。」が表示されます。

6. より大きい(>)

6. より大きい(>)
6. より大きい(>)

「より大きいか」を調べる場合は、>を使います。この演算子は、左辺の値が右辺より大きい場合にtrueを返します。

次のコードでは、2つの変数を比較して、左辺が右辺より大きいかどうかを調べています。


<script>
    let x = 10;
    let y = 5;
    if (x > y) {
        document.write("xはyより大きいです。");
    }
</script>
ブラウザ表示

このコードでは、xyより大きいため、「xはyより大きいです。」が表示されます。

7. 以下(<=)

7. 以下(<=)
7. 以下(<=)

「以下か」を調べる場合は、<=を使います。この演算子は、左辺の値が右辺より小さいか、等しい場合にtrueを返します。

次のコードでは、2つの変数を比較して、左辺が右辺以下かどうかを調べています。


<script>
    let x = 5;
    let y = 5;
    if (x <= y) {
        document.write("xはy以下です。");
    }
</script>
ブラウザ表示

このコードでは、xy以下なので、「xはy以下です。」が表示されます。

8. 以上(>=)

8. 以上(>=)
8. 以上(>=)

「以上か」を調べる場合は、>=を使います。この演算子は、左辺の値が右辺より大きいか、等しい場合にtrueを返します。

次のコードでは、2つの変数を比較して、左辺が右辺以上かどうかを調べています。


<script>
    let x = 10;
    let y = 5;
    if (x >= y) {
        document.write("xはy以上です。");
    }
</script>
ブラウザ表示

このコードでは、xy以上なので、「xはy以上です。」が表示されます。

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

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

カテゴリの一覧へ
新着記事
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の基本を覚えよう