カテゴリ: JavaScript 更新日: 2025/10/21

JavaScriptの条件式における比較演算子の使い方まとめ!初心者でもわかる基本ルールと活用法

JavaScriptの条件式における比較演算子の使い方まとめ
JavaScriptの条件式における比較演算子の使い方まとめ

先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptで条件を判定するときに使う記号って、どんなものがあるんですか?」

先生

「それは『比較演算子』と呼ばれるもので、値の大小や等しいかどうかを調べるために使います。色々な種類がありますよ。」

生徒

「例えば、どうやって使うんですか?数字だけですか?」

先生

「数字だけでなく文字列も使えます。では、基本的な比較演算子と使い方を順番に説明しますね。」

1. 比較演算子とは?条件式で使う「値を比べる記号」

1. 比較演算子とは?条件式で使う「値を比べる記号」
1. 比較演算子とは?条件式で使う「値を比べる記号」

比較演算子は、2つの値を比べて、その結果を「真(true)」か「偽(false)」で返す記号や言葉のことです。プログラムの条件分岐や繰り返し処理でよく使われます。

たとえば、5 > 3という条件は、「5は3より大きいか?」という意味で、これは真(true)になります。

2. 基本の比較演算子一覧と意味

2. 基本の比較演算子一覧と意味
2. 基本の比較演算子一覧と意味
比較演算子 意味
== 等しい(値だけを比較) 5 == "5" → true
=== 厳密に等しい(値と型も比較) 5 === "5" → false
!= 等しくない(値だけを比較) 5 != "3" → true
!== 厳密に等しくない(値か型が違う) 5 !== "5" → true
> より大きい 7 > 3 → true
< より小さい 2 < 5 → true
>= 以上(大きいか等しい) 5 >= 5 → true
<= 以下(小さいか等しい) 3 <= 4 → true

3. 比較演算子の違いをわかりやすく解説

3. 比較演算子の違いをわかりやすく解説
3. 比較演算子の違いをわかりやすく解説

=====の違いは特に重要です。==は「ゆるい等価」と言って、値だけを比べます。一方、===は「厳密な等価」で、値とデータの種類(型)も同じでなければなりません。

例えば数字の5と文字の"5"は、==なら等しいと判断されますが、===だと違うものとみなされます。

4. 実際にコードで比較演算子を使ってみよう

4. 実際にコードで比較演算子を使ってみよう
4. 実際にコードで比較演算子を使ってみよう

簡単な例をいくつか示します。


// ==(値だけ比較)
console.log(5 == "5"); // true

// ===(値と型も比較)
console.log(5 === "5"); // false

// !=(値が違うか)
console.log(5 != 3); // true

// !==(値か型が違うか)
console.log(5 !== "5"); // true

// 大小比較
console.log(7 > 3);   // true
console.log(2 < 1);   // false
console.log(5 >= 5);  // true
console.log(3 <= 2);  // false

5. 比較演算子は文字列でも使える?

5. 比較演算子は文字列でも使える?
5. 比較演算子は文字列でも使える?

はい、文字列にも比較演算子は使えます。ただし、比較は辞書のアルファベット順のような順序で行われます。

たとえば、"apple" < "banana" は真(true)です。これは「アップルはバナナより辞書で前にある」という意味です。


console.log("apple" < "banana"); // true
console.log("cat" === "cat");    // true
console.log("dog" != "cat");     // true

6. 比較演算子を使うときの注意点

6. 比較演算子を使うときの注意点
6. 比較演算子を使うときの注意点
  • 型変換に注意
    ==は値だけを見るため、文字列と数字を比べるときに予期せぬ結果になることがあります。なるべく===を使うのがおすすめです。
  • 文字列の大小比較はアルファベット順
    数字とは違うルールなので気をつけてください。
  • NaN(Not a Number)は比較で注意
    JavaScriptの特殊な値NaNは、どんな値とも等しくない(NaN === NaNもfalse)ため、直接比較は使いません。

7. まとめないかわりにポイントのおさらい

7. まとめないかわりにポイントのおさらい
7. まとめないかわりにポイントのおさらい
  • 比較演算子は値や型を比べて真偽を返す。
  • =====の違いは特に重要で、基本的には===を使うこと。
  • 大きい・小さいなどの比較は数値だけでなく文字列にも使える。
  • 型の違いや特殊な値には注意が必要。
カテゴリの一覧へ
新着記事
New1
JavaScript
JavaScriptの正規表現で繰り返し指定(* + ? {n,m})を学ぼう
New2
TypeScript
TypeScriptとESNextの連携を完全ガイド!最新機能を使いこなす設定と対応法
New3
JavaScript
JavaScriptの正規表現で任意の1文字(.)や文字クラスを使う方法
New4
TypeScript
TypeScriptで非同期イテレーター(for await of)を活用する
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
JavaScript
JavaScriptの日時操作Tips!実務で役立つテクニック集
No.3
Java&Spring記事人気No3
JavaScript
JavaScriptプログラムの実行方法まとめ!ブラウザ・Node.js・コンソールの使い方
No.4
Java&Spring記事人気No4
TypeScript
TypeScriptのif文の使い方を完全ガイド!初心者でもわかる条件分岐
No.5
Java&Spring記事人気No5
TypeScript
TypeScriptでESLintとPrettierを導入!コード整形ルールを自動で統一する方法
No.6
Java&Spring記事人気No6
TypeScript
TypeScriptでコメントを書く正しい書き方と使い分け【初心者向けにやさしく解説】
No.7
Java&Spring記事人気No7
JavaScript
JavaScriptの配列の要素にアクセスする方法(インデックス番号の使い方)
No.8
Java&Spring記事人気No8
JavaScript
JavaScriptの正規表現で文字列を置換する方法(replaceメソッド)