JavaScript初心者向け：比較演算子、論理演算子、条件演算子の基礎解説

本日は、React.js入門を始める前にJavaScript初心者の方向けに、条件付きの論理に関する学習に焦点を当てます。

具体的には、三項演算子、比較演算子、および論理演算子の使用方法を学びます。

なお、代入演算子については説明を省略させていただきます。

ご理解いただくために、これらの用語に関して別途説明を用意しています。

ステートメント

JavaScriptでは、多くのステートメントと式を含むことがあります。ステートメントと式は、プログラム内で非常に重要な概念です。

コンピュータプログラムは、コンピュータによって実行される命令のリストです。プログラミング言語では、これらの命令をステートメントと呼びます。JavaScriptにおいても、プログラムはステートメントのリストで構成されています。

ステートメントは、特定の動作を実行するための指示や命令です。

JavaScriptプログラムでは、要素の配列でのループ、コメント、条件分岐、変数の宣言、関数の作成など、さまざまなステートメントが使われます。これらのステートメントを組み合わせることで、プログラムのフローを制御します。

JavaScriptでは、現在11種類のステートメントがサポートされています。

その中でも、ifステートメントはReactコンポーネントでの条件付きレンダリングに非常に役立ちます。ifステートメントは、指定した条件に基づいて特定のコードブロックを実行するかどうかを判断するための文です。

ステートメントは一般的に日本語では「文」と呼ばれますので、ifステートメントはif文とも言います。したがって、if文はReactコンポーネントでの条件付きレンダリングに非常に役立ちます。

ここからは、一般的なif文として解説してきます。

演算子

JavaScriptでは様々な操作に演算子を必要とします

そしてJavaScriptには、8種類の演算子があります。

・ 算術演算子

・ 代入演算子

・ 文字列演算子

・ 比較演算子

・ 論理演算子

・ 条件演算子

・ ビット演算子

そしてJavaScriptには7つのデータ型が存在します。

・ null

・ undefined

・ boolean

・ string

・ number

・ object

・ symbol

これらの演算子は、JavaScriptのデータ型を判定するためにtypeof演算子と組み合わせて使用されます。

そして、演算子は、単項演算子、二項演算子、三項演算子の3つのタイプに分けることができます。

最初に、条件式を扱うためには比較演算子を理解する必要があります。

比較演算子

比較演算子は、関係演算子とも呼ばれることがあります。

比較演算子は、論理ベースの別個の演算子として理解してください。

算術演算子や代入演算子など、さまざまな演算には多くの演算子記号が使用されています。

数値の等式、例えば (10 == 10) や不等式 (2 > 5) や (5 <= 10) などがあります。

これらの演算子は、2つのオペランド間の条件付き関係が成り立つかどうかに応じて、trueまたはfalseと評価されます。

オペランド（operand）とは、演算子ではなく、被演算子のことを指します。つまり、値や変数などです。

IT用語の一つであり、オペランドという用語そのままで解説していきたいのですが、分かりづらいかもしれません。

ここから先は、値や変数として言い換えて説明します。

JavaScriptのコアメカニズムでは、真(true)の値と偽(false)の値を区別する機能があります。

JavaScriptの標準では、true値とfalse値を、JavaScriptのブール(boolean)値と呼ばれる一意のデータ型として定義しています。

JavaScriptのブール値は、プリミティブ型となっています。

オブジェクトとしてわざわざ明示的に作成する必要はありません。

予約済みのキーワードであるtrueかfalseを使用して、変数にブール値を割り当てます。

JSONでブール値を表現する場合でも、同じロジックが適用され、if文などで頻繁に使用されます。

比較演算子の表は以下となります。

種類	比較式	概要
==	x==y	値または変数が等しい場合(true)を返すがチェックするのは値のみ
===	x===y	値または変数が厳密に等しく値と型が同じの場合(true)を返す
!=	x!=y	値または変数が等しくない場合(true)を返す
!==	x!==y	値または変数が厳密に等しくないか、型が同じでない場合に(true)を返す
>	x > y	左辺の値が右辺の値より大きい場合(true)を返す
<	x < y	左辺の値が右辺の値より小さい場合(true)を返す
>=	x>=y	左辺の値が右辺の値より大きいまたは等しいかの場合(true)を返す
<=	x<=y	左辺の値より右辺の値の方が大きいまたは等しいかの場合(true)を返す

※ NOT (!) は論理演算子の論理否定であり、付け足すことで返ってくる結果が反転します。

if…else文

JavaScriptでは、条件分岐のために if 文、else if 文、else 文の3つの制御構文が利用されます。

if (条件式1) {
  // 条件1が成り立つ場合の処理
} else if (条件式2) {
  // 条件1が成り立たず、条件2が成り立つ場合の処理
} else {
  // 条件1および条件2が成り立たない場合の処理
}

・ if

if文は指定された条件が真（true）の場合に、特定のコードブロックを実行します。

・ else if

else if文は、最初の条件が偽（false）となった場合に、別の条件を指定して新たなコードブロックを実行します。

・ else

else文は、最初の条件とelse if文の条件がすべて偽（false）となった場合に、別のコードブロックを実行します。

このように、条件ごとにif文とelse if文を使い分け、最後にelse文を使って条件がどの条件にも該当しない場合の処理を定義します。

各条件は、それぞれの条件式が成り立つかどうかを判定して、該当する処理ブロックが実行されます。

簡単なif文の条件は次のとおりです。

以下は、ユーザーに対話形式で質問し、入力された値に応じてメッセージを表示するプログラムです。

let year = prompt('Hatenablogが正式にリリースされたのは何年ですか？', '');

year = parseInt(year); // 入力された値を数値に変換

if (year < 2013) {
  alert('年が早いです');
} else if (year > 2013) {
  alert('年が遅いです');
} else {
  alert('正解です！');
}

このコードではいたって単純となっております。

最初の行で、prompt関数を使用してユーザーに質問を表示し、ユーザーの入力を取得します。

質問は「Hatenablogが正式にリリースされたのは何年ですか？」です。

次の行で、入力された値を整数に変換します。

parseInt関数を使用して文字列から整数に変換され、変換された値は変数yearに代入されます。

そして、if文を使用して、変数yearの値を比較します。

最初の条件year < 2013では、入力された年が2013年よりも小さい場合に実行されます。この場合、alert関数を使用してメッセージ「年が早いです」が表示されます。

2つ目の条件year > 2013では、入力された年が2013年よりも大きい場合に実行されます。この場合、alert関数を使用してメッセージ「年が遅いです」が表示されます。

それ以外の場合、つまり入力された年が2013年と等しい場合、最後のelseブロックが実行されます。alert関数を使用してメッセージ「正解です！」が表示されます。

このプログラムでは、ユーザーが入力した年に応じて、正解かどうかを判定し、メッセージを表示します。

論理演算子

JavaScriptには3つの論理演算子があります

・ 否定演算子（!）

・ 論理積（AND）

・ 論理和（OR）

順番に学んでいきましょう。

論理否定

「!」は単項演算子であり、正しい表現は「否定演算子 （ ! ）」となります。

論理演算子の否定演算子（ ! ）は、基本的に値の前に置かれます。

値をブール値に変換してから否定が行われます。

以下に、正しい構文と例を示します。

alert(!0); // true

alert(!true); // false

これらの例では、単一の引数を受け取り、値の否定（!0）の結果が返されます。

否定演算子（!true）では、値をまずブール値に変換し、その後に反転します。

二重否定演算子（!!）を連続して使用することも可能です。

この場合、値を評価してブール値に変換し、その後に再度反転します。

以下は二重否定の例です。

alert(!!'string'); // true

alert(!!null); // false

否定演算子（ ! ）は、論理演算などでブール値が必要な場合に使用されます。

ついでに、以下にいくつかの一般的な二項演算子とそれらの使用例を示します。

以下は、加算演算子 (+)および減算演算子(-)で2つの値を加算と減算として新しい値を生成しています。

const increment = 5 + 3;
console.log(increment); // 結果: 8

const decrement = 10 - 4;
console.log(decremen); // 結果: 6

以下の、比較演算子は2つの値を比較し、真偽値を返します。

const result1 = 5 < 10;
console.log(result1); // 結果: true

const result2 = 8 >= 8;
console.log(result2); // 結果: true

const result3 = "apple" == "orange";
console.log(result3); // 結果: false

これらは一般的な二項演算子の例です。

つまり、二項演算子は、2つのオペランド（引数）を取り、それらを結合して新しい値を生成する演算子です。

二項演算子は、算術演算子（加算、減算、乗算、除算など）、比較演算子（等号、不等号など）、論理演算子（論理積、論理和など）など、さまざまな演算のために使用されます。

重要な点として、二重否定演算子（ !! ）は単項演算子の形式であり、二項演算子ではありません。

論理積(AND)

AND演算子は一般的に「論理積」と呼ばれます。

論理和（OR）では、値または変数のいずれかの式がtrueであればtrueとなりますが、

&&演算子では、両方の値がtrue（および他のすべての場合）である場合にのみtrueが返されます。

以下にサンプルコードを示します。

let x = 10;

console.log(x > 20 && x < 40); // false

let x = 20;

console.log(x > 10 && x < 30); // true

let x = 20;

console.log(x > 0 && 'yes'); // yes

これらのように、論理積を使用した式ではtrueやfalseだけでなく、さまざまな値が返される場合もあります。

条件式などの論理値が必要な場所では、返された値はtrueまたはfalseとして扱われますので、あまり気にする必要はありません。

論理和（OR）

OR演算子（||演算子）は、2つの縦線（||）記号で表され、論理的なOR演算を行います。

プログラミングにおいて、OR演算は主にブール値の操作に使用されます。

OR演算子は2つの値または変数を受け取り、少なくとも1つがtrueの場合にtrueを返し、両方がfalseの場合にfalseを返します。

値がブール値でない場合は、評価のために厳密なブール値への変換が行われます。

具体的には、0、NaN、null、undefined、空の文字列（""）およびfalseは「偽」として評価され、それ以外の値は「真」として評価されます。

OR演算子はif文だけでなく、変数への代入や条件式の評価など、さまざまな文脈で使用されます。

以下に例を示します。

const a = true;
const b = true;
const c = false;
const d = false;

console.log(a || b); // true
console.log(a || c); // true
console.log(c || a); // true
console.log(c || d); // false
console.log(d || c); // false

if (c >= a || a === b) {
  console.log('条件がtrueです');
}

OR演算子（||演算子）にはいくつかの注意点があります。

短絡評価（Short-circuit evaluation）

OR演算子は左側の式から評価を開始し、左側の式がtrueと評価された場合、右側の式は評価されません。

これは短絡評価と呼ばれます。短絡評価により、効率的な処理やエラーの回避が可能となります。

例えば、以下のコードでは、変数xが0以上の数値であるかを判定しています。

const x = 10;
if (x > 0 || calculateSomeValue()) {
  // xが0以上の場合、右側の式は評価されません
  console.log('xは0以上です');
}

上記の例では、xが0より大きい場合には直ちに条件式はtrueとなり、calculateSomeValue()関数は呼び出されません。これにより、処理の効率性が向上します。

型の異なる値の比較

OR演算子はブール値以外の値を操作する場合、評価前にブール値に変換します。

異なる型の値を比較する場合には、意図しない結果が生じる可能性があります。

例えば、以下のコードでは、文字列の長さと数値を比較しています。

const text = 'Hello';
const number = 5;
if (text.length || number > 0) {
  // 文字列の長さと数値の比較は異なる型で行われるため注意が必要
  console.log('条件がtrueです');
}

上記の例では、text.lengthは文字列の長さを表しますが、数値として評価されます。

したがって、文字列の長さが0でない場合、条件はtrueとなります。型の異なる値を比較する場合には、明確な型変換や適切な比較方法を使用する必要があります。

評価の順序

複数のOR演算子が組み合わさっている場合、評価順序に注意する必要があります。

演算子の優先順位やカッコの使用によって評価結果が変わる場合があります。明確な評価順序を表すために、必要に応じてカッコを使用する必要があります。評価順序は演算子の優先順位によって決まりますが、括弧を使用することで明示的に評価順序を指定することができます。

例として、以下のコードを考えてみましょう。

const a = true;
const b = false;
const c = true;

const result = a || b && c;

console.log(result);

上記のコードでは、OR演算子（||）とAND演算子（&&）が組み合わさっています。

この場合、AND演算子の方が優先度が高く、先に評価されます。しかし、評価順序を明確にするために括弧を使用して評価順序を指定することができます。

const result = a || (b && c);

上記のような括弧を使用することで、AND演算子の評価が先に行われることが明確になります。

評価順序が曖昧な場合には、括弧を使って明示的に評価順序を指定することで、意図した結果を得ることができます。

以上が複数のOR演算子が組み合わさっている場合の評価順序に関する注意点です。適切な括弧の使用は、コードの意図を明確にし、予期しない結果を避けるために重要です。

ここまでの学習で、if構文での扱い方を理解してきたかと思いますが、現在ではif構文よりも少し新しい方法があります。

それはJavaScriptの機能の一つである三項演算子です。　

三項演算子

三項演算子は、単純な条件の評価に使用されることが一般的ですが、複雑な条件を作成するためにも使用することができます。

三項演算子は、ある条件に基づいて値を返す式です。

通常、値を返すif...else構文と同等と言えます。

以下は、三項演算子の基本的な形式の例です。

const age = 30;

const drink = (age >= 20) ? "I can drink beer!" : "No beer";

console.log(drink);

上記の例では、条件がtrueの場合に"I can drink beer!"が返されます。条件がfalseの場合は"No beer"が返されます。

もう一つの例を見てみましょう。

const age = 19;

const drink = (age === 20) ? "I can drink beer!" : "No beer";

console.log(drink);

この場合、条件はfalseとなるため、"No beer"が返されます。

三項演算子は、条件がtrueの場合に実行する式と、falseの場合に実行する別の式の2つの値を持ちます。

なお、三項演算子には否定論理演算子（!）を組み合わせることもできます。以下は例です。

const age = 19;

const drink = (age !== 20) ? "I can drink beer!" : "No beer";

console.log(drink);

この場合、否定論理演算子を使用することで、条件がfalseの場合に"I can drink beer!"が返されます。

ただし、三項演算子は単純な条件の評価や値の代入に適していますが、複雑な条件や複数の処理が必要な場合には可読性が低下する可能性があります。そのため、適切な場面で使い分けることが重要です。

以下のコードは、条件に応じてメッセージを出力するための三項演算子を使用した例です。

const age = 30;
age > 20 ? age > 60 ? console.log("あなたは老いた") : console.log("20歳以上または60歳未満の方") : console.log("20歳以下です");

このコードでは、変数ageの値に応じて条件を評価し、メッセージを出力しています。

まず、最初の条件age > 20が評価されます。

もしageが20より大きい場合は、次の条件に進みます。その際、三項演算子の条件部分にさらに三項演算子を組み合わせています。

内側の三項演算子age > 60 ? console.log("あなたは老いた") : console.log("20歳以上または60歳未満の方")は、ageが60より大きい場合に "あなたは老いた"を出力し、そうでない場合に"20歳以上または60歳未満の方"を出力します。

一方、最初の条件age > 20がfalse（つまりageが20以下）の場合は、外側の三項演算子の条件部分が評価されず、直接最後の console.log("20歳以下です")が実行されます。

したがって、このコードの実行結果は、変数ageの値によって以下のようになります

・ ageが20より大きく、かつ60より大きい場合： "あなたは老いた"

・ ageが20より大きく、かつ60以下の場合： "20歳以上または60歳未満の方"

・ ageが20以下の場合： "20歳以下です"

なお、このコードはあくまでもサンプルなので、読みやすさや保守性の観点からは改善の余地があります。

複雑な条件を扱う場合には、if文を使用した方がコードの理解やメンテナンスがしやすくなる場合があります。

最後に

複数の条件チェックを実行するためには、複数の三項演算子を使用することができますが、ネストされた三項演算子は非常に複雑な式になりますので注意が必要です。

三項演算子は、比較的単純な評価に最適化されています。

そのため、簡単な条件判断や代入の場合に便利に使用することができます。

コードを短くするために三項演算子を活用すると、可読性が向上し、他の開発者がコードを理解しやすくなります。

しかし、適切に使用しないとコードの可読性が低下する可能性もあるため、注意が必要です。

JavaScriptのコードでは、三項演算子がよく使用されます。

これにより、コードがよりクリーンで見やすくなりますが、適切な使用方法に注意しなければ逆にコードが読みにくくなる可能性もあることを覚えておいてください。

本日は以上となります。

最後まで読んで頂きありがとうございます。

この、記事が役に立ったら、ブックマークと共有をしていただけると幸いです。