JavaScriptの比較演算子とは?==と===の違いもわかりやすく解説

JavaScript

JavaScriptで「もし〜なら」という条件分岐(if文)を書くとき、必ずセットで使うのが 「比較演算子」 です。

「AとBは等しいか?」「AはBよりも大きいか?」といった問いに対して、コンピューターは true(真) または false(偽) という2つの答え(真偽値)を返します。このシンプルな仕組みが、複雑なWebアプリの動的な動きを支えています。

しかし、JavaScriptには ===== という「似て非なる記号」が存在し、これが多くの初心者を混乱させています。本記事では、すべての比較演算子の基本から、型まで意識した使い分けまで詳しく解説します。

比較演算子とは?「真偽値(boolean)」を導き出す記号

比較演算子は、2つの値を比べて、その結果を true(正しい) false(間違い)のどちらかで教えてくれる記号です。

コンピューターの「はい」と「いいえ」

プログラミングの世界では、この true / false のことを「真偽値(しんぎち)」または「Boolean(ブーリアン)」と呼びます。

  • 比較が正しい場合:true
  • 比較が間違っている場合:false

比較演算子一覧表

まずは、よく使う記号を一覧で確認しましょう。

演算子     意味
===厳密の等しい(型まで同じ)10 === “10” → false
==等しい(ゆるい比較)10 == “10” → true
!=等しくない(ゆるい比較)10 != “10” → false
!==厳密に等しくない10 !== “10” → true
>より大きい10 > 5 → true
<より小さい10 < 5 → false
>=以上(その数も含む)10 >= 10 → true
<=以下(その数も含む)10 <= 5 → false

【最重要】「==」と「===」の決定的な違い

JavaScript初心者が最もハマり、かつ現場で最も厳しくチェックされるのがこの違いです。

「==(等価演算子)」は忖度する

== は、比較する2つのデータの種類(型)が違っても、JavaScriptが気を利かせて勝手に型を変換して比較してしまいます。

console.log(10 == "10"); // true (数値と文字列だけど「中身は一緒だね」と判断)

「===(厳密等価演算子)」は嘘をつかない

=== は、値だけでなく「データ型」まで完全に一致しているかをチェックします。

console.log(10 === "10"); // false (数値と文字列なので「別物」と判断)

なぜ「===」を使うべきなのか?

実務では、特別な理由がない限り === を使うのが鉄則です。
==
の「勝手な型変換」は、時に予期せぬバグを引き起こします。例えば、 0 == “” (から文字)や 0 == false はすべて true になってしまいます。意図しない判定を防ぐため、常に「厳密な比較」を心がけましょう。

大小を比べる演算子:数値の境界線を引く

数値の大きさを比較する演算子は、主にショッピングサイトの「在庫数チェック」や「年齢制限」などで多数されます。

「より大きい・小さい」と「以上・以下」

  • >(より大きい):その数自体は含まない(10 > 10は false)
  • >=(以上):その数自体を含む(10 >= 10は true)

数学の記号と似ていますが、ではなく、キーボードで打てるように >= と2文字で書く点に注意しましょう。

文字列の比較もできる?

実は文字列同士も比較できますが、これは「辞書順(文字コード順)」での比較になります。

console.log("apple" < "banana"); // true (aはbより先なので小さい)

数値以外の比較は直感的でない結果になることがあるため、基本は数値に対して使うものだと覚えておきましょう。

「!」を使った否定の比較:逆の条件を判定する

「Aではない時:という条件を作りたい時は、 ! (エクスクラメーション)を使います。

等しくないことを表す「!==」

等しいを意味する === の最初の = ! に変えることで、「等しくない」という意味になります。

const password = "password123";

if (password !== "admin") {
  console.log("管理者ではありません。");
}

ここでも、ゆるい比較の != ではなく、厳密な比較である !== を使うのがスタンダードです。

条件を複雑にする「論理演算子」との組み合わせ

比較演算子は、「論理演算子(&&, ||)」と一緒に使うことで、より高度な条件分岐が可能になります。

かつ(&&):両方の条件を満たす

// 20歳以上、かつ、男性
if (age >= 20 && gender === "male") { ... }

または(||):どちらかの条件を満たす

// 日曜日、または、祝日
if (day === "Sunday" || isHoliday === true) { ... }

【関連記事】:条件をさらにスマートに書く方法は、「JavaScriptの三項演算子とは?if文との違いと使い方を初心者向けに解説」で詳しく解説しています。

特殊な値:「null」と「undefined」の比較

JavaScript特有の「空っぽ」を意味する値、null undefined。これらを比較する際にも、 == === の違いが顕著に現れます。

console.log(null == undefined);  // true (ゆるい比較では仲間扱い)
console.log(null === undefined); // false (厳密には別のデータ型)

実務では、この2つを区別せずに「値がないこと」をチェックしたい場合に限り、あえて == null という書き方(ゆるい比較)をすることもありますが、初心者のうちは一貫して === を使う方が安全です。

実践演習:入力フォームのバリデーション(入力チェック)

これまでの知識を使って、ユーザーが入力した内容が正しいかチェックする簡単なプログラムを作ってみましょう。

/**
 * 入力チェックプログラム
 * 1. ユーザー名が入力されているか(空ではないか)
 * 2. 年齢が18歳以上か
 */

const inputName = "なると";
const inputAge = "25"; // フォームからは文字列で送られてくることが多い

// 厳密な比較を行うための準備
const age = Number(inputAge); // 数値に変換

if (inputName !== "" && age >= 18) {
  console.log("登録可能です!");
} else {
  console.log("入力内容に不備があります。");
}

このように、文字列で届いた値を数値に変換してから === >= で比較するのが、バグを防ぐ王道の書き方です。

まとめ:常に「厳密さ」を意識しよう

今回は、JavaScriptの条件分岐の要である「比較演算子」について詳しく解説しました。

  • 比較演算子は、結果を true false で返す。
  • == ではなく === を使う:型まで含めた厳密な比較が、安全なコードへの第一歩。
  • > < は、その数を含むかどうか(=の有無)に注意する。
  • ! は否定を意味し、条件を反転させることができる。
  • 複雑な条件は &&(かつ)||(または) で繋ぐ。

「動けばいい」というコードから「安全で読みやすい」コードへのステップアップは、この比較演算子の正しい理解から始まります。まずは自分のコードの中にある == === に書き換えるところから意識してみてください。

タイトルとURLをコピーしました