いっしー@Webエンジニア
Webツールプログラミング言語プログラミング学習ITニュースIT用語辞典ポートフォリオ

【JavaScript】比較演算子の書き方と使い方の基本

JavaScriptで2つの値を比べる「比較演算子」の基本的な使い方を解説します。==や>などの使い方をサンプルコード付きで学びます。特に重要な、値だけを比べる==とデータ型まで厳密に比べる===の違いや、if文と組み合わせて条件によって処理を分ける方法も理解できます。

作成日: 更新日:

開発環境

  • OS: Windows10
  • Editor: Visual Studio Code
  • JavaScript: ES6以降

JavaScriptの比較演算子（等価演算子と関係演算子）とは

比較演算子とは、2つの値を比べるための記号です。 演算子を真ん中にして、その左側にある値（左辺）と右側にある値（右辺）を比較する式で使われます。

この比較の結果は、「true（トゥルー）」または「false（フォルス）」という特別な値で返されます。 これらは真偽値（しんぎち）と呼ばれ、プログラムの世界での「はい」か「いいえ」を表します。

  • true: 比較した結果が正しい（条件が成立する）ことを意味します。
  • false: 比較した結果が正しくない（条件が成立しない）ことを意味します。

例えば、「もし変数の値が10以上なら特定の処理をする」といったように、プログラムの流れを条件によって変えたい場合（条件分岐）に、この比較演算子が使われます。

サンプルコード

この章では、JavaScriptにおける「比較演算子」について学びます。比較演算子とは、2つの値を比べて、その関係が正しいか（true）、正しくないか（false）を判断するための記号です。プログラムが条件に応じて異なる動きをするために、非常に重要な役割を果たします。

javascript/chapter06/index.html

このHTMLファイルは、これから作成するJavaScriptファイル（script01.jsからscript09.js）をブラウザで実行するための土台です。<script>タグを使って、各JavaScriptファイルを順番に読み込んでいます。

1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>JavaScriptチュートリアル</title>
7  </head>
8
9  <body>
10    <h1>JavaScriptチュートリアル</h1>
11    <script src="./script01.js" defer></script>
12    <script src="./script02.js" defer></script>
13    <script src="./script03.js" defer></script>
14    <script src="./script04.js" defer></script>
15    <script src="./script05.js" defer></script>
16    <script src="./script06.js" defer></script>
17    <script src="./script07.js" defer></script>
18    <script src="./script08.js" defer></script>
19    <script src="./script09.js" defer></script>
20  </body>
21</html>
22

javascript/chapter06/script01.js

==（等価演算子）は、2つの値が等しいかどうかを比較します。値が同じであればtrue（真）、異なればfalse（偽）を返します。

1// 等しいかどうか（==）
2let result = (3 == 3);  // 3と3が等しいかを比較
3console.log("3 == 3 の結果:", result);  // trueを返す
4
5result = (3 == 2);
6console.log("3 == 2 の結果:", result);  // falseを返す

javascript/chapter06/script02.js

===（厳密等価演算子）は、2つの値がデータ型を含めて完全に同一かどうかを比較します。値が同じでもデータ型が違う場合（例えば、数値の3と文字列の'3'）はfalseを返します。意図しないバグを防ぐため、通常はこちらの===を使うことが推奨されます。

1// 同一かどうか（===）
2result = (3 === 3);  // 3と3が同じ型であり、かつ等しいかを比較
3console.log("3 === 3 の結果:", result);  // trueを返す
4
5result = (3 === '3');  // 数値の3と文字列の'3'が同じ型であり、かつ等しいかを比較
6console.log("3 === '3' の結果:", result);  // falseを返す

javascript/chapter06/script03.js

!=（不等価演算子）は、==の反対で、2つの値が等しくないかどうかを比較します。値が異なればtrue、同じであればfalseを返します。

1// 等しくないかどうか（!=）
2result = (3 != 4);  // 3と4が等しくないかを比較
3console.log("3 != 4 の結果:", result);  // trueを返す
4
5result = (3 != 3);
6console.log("3 != 3 の結果:", result);  // falseを返す

javascript/chapter06/script04.js

!==（厳密不等価演算子）は、===の反対で、2つの値がデータ型または値が同一でないかどうかを比較します。データ型が違うか、値が違う場合にtrueを返します。こちらも!=よりも!==の使用が推奨されます。

1// 同一でないかどうか（!==）
2result = (3 !== '3');  // 数値の3と文字列の'3'が同じ型でないか、または等しくないかを比較
3console.log("3 !== '3' の結果:", result);  // trueを返す
4
5result = (3 !== 3);  // 数値の3と数値の3が同じ型でないか、または等しくないかを比較
6console.log("3 !== 3 の結果:", result);  // falseを返す
7

javascript/chapter06/script05.js

>（大なり）は、左辺の値が右辺の値より大きいかどうかを比較します。

1// より大きいかどうか（>）
2result = (5 > 3);  // 5が3より大きいかを比較
3console.log("5 > 3 の結果:", result);  // trueを返す
4
5result = (3 > 5);  // 3が5より大きいかを比較
6console.log("3 > 5 の結果:", result);  // falseを返す

javascript/chapter06/script06.js

<（小なり）は、左辺の値が右辺の値より小さいかどうかを比較します。

1// より小さいかどうか（<）
2result = (3 < 5);  // 3が5より小さいかを比較
3console.log("3 < 5 の結果:", result);  // trueを返す
4
5result = (5 < 3);  // 5が3より小さいかを比較
6console.log("5 < 3 の結果:", result);  // falseを返す

javascript/chapter06/script07.js

>=（大なりイコール）は、左辺の値が右辺の値より大きいか、または等しいかどうかを比較します。

1// より大きいかまたは等しいかどうか（>=）
2result = (5 >= 3);  // 5が3より大きいか、または等しいかを比較
3console.log("5 >= 3 の結果:", result);  // trueを返す
4
5result = (5 >= 5);  // 5が5より大きいか、または等しいかを比較
6console.log("5 >= 5 の結果:", result);  // trueを返す
7
8result = (3 >= 5);  // 3が5より大きいか、または等しいかを比較
9console.log("3 >= 5 の結果:", result);  // falseを返す

javascript/chapter06/script08.js

<=（小なりイコール）は、左辺の値が右辺の値より小さいか、または等しいかどうかを比較します。

1// より小さいかまたは等しいかどうか（<=）
2result = (3 <= 5);  // 3が5より小さいか、または等しいかを比較
3console.log("3 <= 5 の結果:", result);  // trueを返す
4
5result = (5 <= 5);  // 5が5より小さいか、または等しいかを比較
6console.log("5 <= 5 の結果:", trueを返す
7
8result = (5 <= 3);  // 5が3より小さいか、または等しいかを比較
9console.log("5 <= 3 の結果:", result);  // falseを返す

javascript/chapter06/script09.js

ここでは、これまで学んだ比較演算子（>=）を使った実践的な例を見てみましょう。if文という条件分岐の構文と組み合わせることで、条件がtrueの場合とfalseの場合で処理を分けることができます。このコードでは、年齢を判定し、成人か未成年かで表示するメッセージを変えています。

1// 年齢による成人判定の練習問題
2
3// 成人判定のための年齢を設定
4const adultAge = 20;
5
6// 判定したい年齢を設定
7const checkAge = 18;
8
9// 年齢を比較して成人かどうかを判定
10if (checkAge >= adultAge) {
11  // 20歳以上なら成人と判定
12  console.log(`${checkAge} 歳は成人です。`);
13} else {
14  // 20歳未満なら未成年と判定
15  console.log(`${checkAge} 歳は未成年です。`);
16}
17

おわりに

今回は、JavaScriptで値を比べる比較演算子の基本的な使い方を学びました。特に、値だけを比べる==とデータ型まで厳密に比べる===の違いは非常に重要で、意図しないバグを避けるためにも普段から===を使う習慣をつけましょう。if文と組み合わせることで、比較結果がtrueかfalseかによって処理を分ける、プログラミングの基本的な流れを実装できました。この条件分岐はあらゆるプログラムで使われる重要な土台となるので、ぜひ繰り返し練習してみてください。

【JavaScript】比較演算子の書き方と使い方の基本 | いっしー@Webエンジニア