比較演算子
このレッスンで分かること
===(厳密等価) は型と値の両方が一致したときだけtrueを返します==ではなく===を使うのが現代 JavaScript の鉄則です- 最小例は
return a === bの 1 行でisEqualが完成します
比較演算子 とは
===と!==で値を厳密に比べ、ふたつの値が等しいかをbooleanで判定しよう。
比較演算子で「等しい / 違う」を判定する
JavaScript のプログラムは、結局のところ「値を比べて、結果に応じて動きを変える」ことの繰り返しです。年齢が 18 以上か、入力されたパスワードが正しいか、合計金額が 0 より大きいか。こうした判定をすべて任せられるのが比較演算子です。比較演算子はふたつの値を受け取り、true または false の boolean を返します。
比較の結果は if 文や三項演算子、while ループの条件などに渡せます。つまり比較演算子をマスターすると、「分岐」と「繰り返し」の両方が一気に書けるようになる、というおいしい入口です。
比較演算子は値を変えません。あくまでも値同士を見比べて
true/falseを返すだけの「審判」です。
6 つの基本比較演算子
まずは基本となる 6 種類をまとめて整理します。
| 演算子 | 意味 | 例 | 結果 |
|---|---|---|---|
=== | 厳密等価 (型も値も同じ) | 3 === 3 | true |
!== | 厳密非等価 | 3 !== "3" | true |
> | より大きい | 10 > 5 | true |
< | より小さい | 3 < 5 | true |
>= | 以上 | 10 >= 10 | true |
<= | 以下 | 5 <= 5 | true |
実際に JavaScript のコードで動きを見てみます。
JavaScript
console.log(3 === 3); // true
console.log(3 === "3"); // false 型が違う
console.log(3 !== 4); // true
console.log(10 > 5); // true
console.log(10 <= 10); // true
console.log("abc" === "abc"); // true 文字列同士でも OK=== は 型まで含めて 一致するかをチェックします。3 === "3" が false になるのは、左が number で右が string だからです。数値と文字列が混ざるシーンは Web 入力で頻発するので、最初から === を使う癖をつけておくと安全です。
== ではなく === を使う理由
JavaScript には == という「ゆるい等価」演算子もあります。== は比較する前に勝手に型変換を行うため、人間の直感とズレた結果になりがちです。
JavaScript
console.log(0 == ""); // true 0 と空文字が等しいことになる
console.log(0 == "0"); // true
console.log("" == "0"); // false ここで矛盾が起きる
console.log(null == undefined); // true これは便利だが知らないと混乱する上の結果は「等しさ」の推移律が壊れていて、追跡が非常に困難です。だから現代の JavaScript では、原則として === と !== を使います。ESLint のデフォルト設定にも eqeqeq ルールが含まれていて、== を見つけると警告されることが多いです。
「迷ったら
===」が現場の合言葉です。==を使ってよい数少ない例外は== nullのチェック (nullとundefinedを同時に弾きたいとき) くらいです。
Mermaid で判定フローを追う
今回の課題では「2 つの値が 厳密に等しい とき true、そうでないとき false」を返します。流れを図にすると次のとおりです。
図の流れを順序リストで書き直すと、次の通りです。
- 関数開始、引数
abを受け取る a === bを評価する (型も値も比較)- 真であれば
trueを返す - 偽であれば
falseを返す - (実用的には
return a === bの 1 行で済む)
図のとおり、a === b の結果はすでに boolean です。だから if (a === b) return true; else return false; のように書くと冗長で、return a === b; の 1 行で完結 します。「式そのものが答え」になる感覚は JavaScript を書く上でとても大事です。
文字列同士の比較
比較演算子は数値だけでなく文字列にも使えます。> < は辞書順 (正確には UTF-16 のコードポイント順) で比較されます。
JavaScript
console.log("apple" === "apple"); // true
console.log("apple" < "banana"); // true a が b より前
console.log("abc" < "abd"); // true 最後の文字で差がつくただし、日本語や絵文字、大文字小文字が混在する文字列の並び替えには localeCompare を使ったほうが安全です。比較演算子は 同じ文字列か を判定する用途で使うのが基本です。
よくある間違い
比較演算子は単純そうで、初心者が引っかかるポイントが意外と多いです。
=と==と===の混同 —=は代入、==はゆるい等価、===は厳密等価です。if (x = 5)と書くとxに5を代入してからtrue扱いになり、いつまでも条件が満たされる無限ループを生みます- 数値と文字列を
===で比べる —"3" === 3は必ずfalseです。formから取り出した値は文字列なので、比較する前にNumber(value)で数値化するか、文字列同士で揃えてください NaNの比較 —NaN === NaNはfalseになります。これは仕様で、NaN同士の比較はNumber.isNaN(x)で行います
「
NaNは宇宙でいちばん寂しい値」と覚えてください。自分自身とすら等しくないので、x === NaNではなくNumber.isNaN(x)を使うのがお作法です。
ここまでの要点
等価は === (厳密)、== は使わない。比較演算子はすでに boolean を返すので return a === b の 1 行で済む。NaN だけは Number.isNaN で判定する。
やってみよう
それでは課題に取り組みましょう。isEqual(a, b) を完成させて、a と b が === で等しいかどうかを返してください。
書き方の方針は次のとおりです。
return a === b;だけで完成する 1 行解if (a === b) return true; return false;と書いてみてから、上のシンプル版に書き直す- テストに
1と"1"の比較が含まれることに注意して、===を==に変えてしまわないように気をつける
比較演算子の感覚が身に付くと、次の章の論理演算子・条件分岐がぐっと読みやすくなります。短いコードですが、=== の世界を体に染み込ませる大事な一歩です。
よくある質問
Q. と = は何が違いますか？
A. JavaScript の は型変換してから比較するため 0 '0' が true になります。= は型も値も一致した場合のみ true で、こちらが基本です。Python には = はなく、 は値、is は同一オブジェクトか（メモリ位置）の判定なので使い分けてください。
Q. 文字列の大小比較はどうなりますか？
A. ほとんどの言語で辞書順（文字コード順）に比較されます。'apple' < 'banana' は true、'10' < '9' は文字列としては true（'1' < '9' のため）になるので、数値比較したいときは必ず Number()/int() で変換してから比較しましょう。
Q. 浮動小数点の比較で要注意な点は？
A. 0.1 + 0.2 0.3 は多くの言語で false になります。誤差を許容するため abs(a - b) < 1e-9 のように差の絶対値で比較するのが定石です。お金の計算は浮動小数を避け、整数（円単位の int）や Decimal 型を使ってください。
次のレッスン
次は 論理演算子 で、=== と !== で値を厳密に比べ、ふたつの値が等しいかを boolean で判定しよう を学びます。
事前確認 — 進む前に次の 3 つができることを確認しましょう。
- 比較演算子 の要点を自分の言葉で説明できる
- このレッスンの最小コード (または操作手順) を見ずに書ける
- 練習問題やクイズで間違えた箇所を読み直して理解した
理解度チェック (30 秒)
Q. 比較演算子 とは何か、1 文で説明してください。
A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。
関連レッスン
要件
- 関数名は
isEqual、引数はaとbの 2 つにすること - 比較には
==ではなく===を使うこと - 戻り値は必ず
boolean(trueまたはfalse) にすること
入出力例
test-cases.txt
isEqual(3, 3) → true
isEqual(3, 4) → false
isEqual(1, "1") → false
isEqual("hello", "hello") → true
isEqual(true, 1) → false