JavaScript比較演算子解説！10個のサンプルコードで完全理解

はじめに
●JavaScriptとは
●比較演算子の種類と基本
●JavaScriptにおける比較演算子の基本的な使い方とその重要性
●JavaScript比較演算子の応用的な使用方法
●注意点と対処法
まとめ

はじめに

この記事を読めば、JavaScriptの比較演算子を使いこなすことができるようになります。

JavaScriptに触れたことがない初心者でも、比較演算子の使い方や注意点、カスタマイズ方法を学ぶことができます。

●JavaScriptとは

JavaScriptは、ウェブページに動的な要素を追加するためのプログラミング言語です。

HTMLやCSSと連携して、ウェブページの見た目や動作を制御することができます。

●比較演算子の種類と基本

JavaScriptの比較演算子は、2つの値を比較し、真偽値（trueまたはfalse）を返す演算子です。

主な比較演算子には下記があります。

等しい（==）
厳密に等しい（===）
等しくない（!=）
厳密に等しくない（!==）
より大きい（>）
より小さい（<）
以上（>=）
以下（<=）

●JavaScriptにおける比較演算子の基本的な使い方とその重要性

比較演算子は、JavaScriptプログラミングにおいて基本的かつ重要な要素です。

これらの演算子は、変数や値の比較に使われ、条件分岐やループ制御など多くの場面で活躍します。

ここでは、JavaScriptにおける主要な比較演算子の使い方を例を交えて解説します。

○サンプルコード1：「等しい（==）」演算子の適切な使い方

JavaScriptで「等しい」を判断する際には、二重等号（==）が使われます。

この演算子は値が等しいかどうかをチェックしますが、型は考慮しません。

let x = 10;
let y = "10";

console.log(x == y); // true（型が異なっても値が同じなので真）

このコード例では、xとyは型が異なりますが、値は共に10なので結果はtrueとなります。

この柔軟な比較が必要な場合に便利です。

○サンプルコード2：「厳密に等しい（===）」演算子の効果的な活用

一方で、型も含めた完全な等価性をチェックするには、三重等号（===）が用いられます。

この演算子は値と型の両方が等しい場合にのみtrueを返します。

let x = 10;
let y = "10";

console.log(x === y); // false（型が異なるため偽）

この例では、xは数値型、yは文字列型なので、結果はfalseとなります。

JavaScriptでは、予期せぬ型の不一致によるバグを避けるためにこの演算子の使用が推奨されます。

○サンプルコード3：「等しくない（!=）」演算子の活用法

「等しくない」という判断をするためには、不等号（!=）が使用されます。

この演算子は、値が異なる場合にtrueを返しますが、ここでも型は考慮されません。

let x = 10;
let y = 20;

console.log(x != y); // true（値が異なるため真）

このコードでは、xとyの値が異なるため、結果はtrueとなります。

○サンプルコード4：「厳密に等しくない（!==）」演算子の適切な使用

より厳密な比較には、「厳密に等しくない（!==）」演算子が使われます。

これは、値または型のいずれかが異なる場合にtrueを返します。

let x = 10;
let y = "10";

console.log(x !== y); // true（型が異なるため真）

この場合、xとyは型が異なるため、結果はtrueです。

○サンプルコード5：「より大きい（>）」演算子の使い方

最後に、値の大きさを比較する場合に用いられるのが、「より大きい（>）」演算子です。

これは、左側の値が右側の値より大きい場合にtrueを返します。

let x = 10;
let y = 20;

console.log(x > y); // false（xはyより小さいため偽）

この例では、xはyより小さいので、結果はfalseとなります。

●JavaScript比較演算子の応用的な使用方法

JavaScriptの比較演算子は、単純な値の比較だけでなく、より複雑なロジックの実現にも不可欠です。

ここでは、実際のシナリオを想定した比較演算子の応用例をいくつか紹介します。

○サンプルコード6：成人かどうかを判定する条件式

ユーザーから入力された年齢を基に、成人か未成年かを判定する一般的な例です。

ここでは、>= 演算子が用いられています。

let age = prompt("年齢を入力してください");

if (age >= 18) {
  console.log("成人です");
} else {
  console.log("未成年です");
}

このコードは、入力された年齢が18歳以上であれば「成人」と表示し、そうでなければ「未成年」と表示します。

○サンプルコード7：複数の数値の中から最大値を見つける

こちらの例では、複数の変数の中から最大値を探す場合に比較演算子を使用しています。

let x = 10;
let y = 20;
let z = 30;

let max = x;
if (y > max) max = y;
if (z > max) max = z;

console.log("最大値は " + max + " です");

このコードは、x、y、zの3つの数値を比較し、最大の値を見つけ出します。

○サンプルコード8：配列から最小値を探す

配列内の最小値を見つけるためにも比較演算子が使われます。

let arr = [5, 10, 2, 15, 7];
let min = arr[0];

for (let i = 1; i < arr.length; i++) {
  if (arr[i] < min) min = arr[i];
}

console.log("最小値は " + min + " です");

このロジックでは、配列の最初の要素を仮の最小値とし、残りの要素と比較していきます。

○サンプルコード9：二分探索法を用いた配列の探索

二分探索は、ソートされた配列内で特定の値を効率的に探すアルゴリズムです。

ここでは比較演算子が重要な役割を果たします。

function binarySearch(arr, target) {
  let left = 0;
  let right = arr.length - 1;

  while (left <= right) {
    let mid = Math.floor((left + right) / 2);

    if (arr[mid] === target) {
      return mid;
    } else if (arr[mid] < target) {
      left = mid + 1;
    } else {
      right = mid - 1;
    }
  }

  return -1;
}

let sortedArr = [1, 3, 5, 7, 9, 11, 13, 15, 17];
console.log(binarySearch(sortedArr, 7)); // 3（インデックス3に7がある）

この関数は、目的の要素を効率的に探し出すために、< と > 演算子を用いています。

○サンプルコード10：成績に基づく評価の決定

最後に、学生の成績に基づいて評価を決定する例を見てみましょう。

function evaluateGrade(score) {
  if (score >= 90) {
    return "優";
  } else if (score >= 70) {
    return "良";
  } else if (score >= 50) {
    return "可";
  } else {
    return "不可";
  }
}

let studentScore = 75;
console.log("成績は " + evaluateGrade(studentScore) + " です");

この関数は、複数の比較演算子を用いて、入力された点数に基づいて適切な評価を返します。