【JavaScript】比較演算子の全パターン解説とオブジェクト比較の落とし穴

2026年1月22日

概要

プログラムの制御フロー（if文など）において、2つの値が「等しいか」「どちらが大きいか」を判定するために使用するのが比較演算子です。

JavaScriptには、型変換を許容する「等価演算子（==）」と、型まで厳密にチェックする「厳密等価演算子（===）」の2種類が存在します。

本記事では、基本的な数値・文字列の比較から、初心者が必ずつまずく「配列（オブジェクト）の比較」までを解説します。

仕様（入出力）

入力: 数値、文字列、配列などのデータ
出力: 比較結果としての真偽値（true または false）

基本の使い方

比較演算子は、左辺と右辺を比較し、その結果を boolean 型で返します。

比較演算子一覧

演算子	意味	補足
`==`	等価	値が等しければ true（型変換あり）
`===`	厳密等価	値も型も等しければ true（推奨）
`!=`	不等価	値が等しくなければ true（型変換あり）
`!==`	厳密不等価	値または型が異なれば true（推奨）
`<`	より小さい	左辺が右辺より小さければ true
`>`	より大きい	左辺が右辺より大きければ true
`<=`	以下	左辺が右辺と同じか小さければ true
`>=`	以上	左辺が右辺と同じか大きければ true

コード全文（HTML / JavaScript）

HTML (index.html)

結果確認用のコンソール誘導画面です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>比較演算子デモ</title>
    <script src="comparison-demo.js" defer></script>
</head>
<body>
    <div class="container">
        <h1>Consoleを確認してください</h1>
        <p>比較結果（true/false）が出力されています。</p>
    </div>
</body>
</html>

JavaScript (comparison-demo.js)

基本の比較に加え、配列の比較（参照の比較）についての挙動を確認できるコードです。

/**
 * 比較演算子の動作確認デモ
 */
const runComparisonDemo = () => {
    console.log('--- 1. 基本的な値の比較 ---');
    
    // 文字列の比較（一致するか）
    console.log('"鈴木" == "鈴木":', "鈴木" == "鈴木"); // true
    
    // 数値の大小比較
    console.log('10 < 30:', 10 < 30);   // true
    console.log('20 >= 30:', 20 >= 30); // false


    console.log('--- 2. 配列（オブジェクト）の比較の罠 ---');
    
    // パターンA: 中身は同じだが「別の箱」に入っている場合
    const array1 = [1, 2, 3];
    const array2 = [1, 2, 3];
    
    // JavaScriptではオブジェクト同士の == は「メモリ上の場所」を比較します
    // 中身が同じでも場所が違うため false になります
    console.log('別々の配列 [1,2,3] == [1,2,3]:', array1 == array2); // false


    // パターンB: 「同じ箱」を指している場合（参照渡し）
    const array3 = [1, 2, 3];
    const array4 = array3; // array3の場所情報をコピー
    
    // 同じ場所を指しているため true になります
    console.log('参照コピーした配列 == 元の配列:', array3 == array4); // true


    console.log('--- 3. 厳密等価演算子 (===) の重要性 ---');
    
    const num = 100;
    const str = "100";
    
    // == は勝手に型変換して比較する（バグの温床）
    console.log('100 == "100":', num == str);  // true
    
    // === は型が違う時点で false （安全）
    console.log('100 === "100":', num === str); // false
};

// 実行
runComparisonDemo();

カスタムポイント

== と === の使い分け:特別な理由がない限り、常に ===（厳密等価） を使用してください。== は "1" == 1 が true になるなど、直感的でない挙動によりバグを生みやすいためです。
否定の演算子:等しくないことを判定する場合も同様に、!= ではなく !== を使用しましょう。

注意点

オブジェクトの比較（参照比較）:配列やオブジェクトは、中身のデータが全く同じでも、定義した場所（メモリのアドレス）が異なれば === は false を返します。中身が同じかどうかを判定したい場合は、後述の「応用」の方法を使う必要があります。
小数の比較:0.1 + 0.2 === 0.3 は false になります（浮動小数点数の誤差のため）。小数の等価比較は、差分が許容範囲内（イプシロン）に収まるかどうかで判定する必要があります。

応用

配列やオブジェクトの中身を比較する

中身のデータを文字列化（JSON化）して比較するのが最も簡易的な方法です。

const listA = [1, 2, 3];
const listB = [1, 2, 3];

// 文字列に変換してから比較する
const isSameContent = JSON.stringify(listA) === JSON.stringify(listB);
console.log(isSameContent); // true