【JavaScript】論理演算子の書き方と使い方の基本

JavaScriptで複雑な条件分岐を作るのに必須な論理演算子について解説します。「AかつB」を表す&&や「AまたはB」の||、条件を反転させる!の基本的な使い方から、演算の優先順位、処理を効率化する短絡評価まで学びます。サンプルコードを通して、実践的な使い方をマスターしましょう。

作成日: 更新日:

開発環境

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

JavaScriptの論理演算子とは

論理演算子とは、複数の条件を組み合わせて、最終的にその式全体が「正しい(true)」か「間違い(false)」かを判断するための記号です。 プログラミングでよく使われるif文のような条件分岐で、「もしAであり、かつBであるなら」といった、より複雑な条件を作る際に頻繁に利用されます。

論理演算子の種類

JavaScriptで基本となる論理演算子は、以下の3種類です。それぞれの記号と働きを覚えましょう。

  • ! (否定): 「~ではない」という意味です。truefalseに、falsetrueのように、結果を反対にします。
  • || (論理和): 「または」という意味です。いくつかの条件のうち、少なくとも1つがtrueであれば、結果はtrueになります。
  • && (論理積): 「かつ」という意味です。すべての条件がtrueのときだけ、結果がtrueになります。1つでもfalseがあれば結果はfalseです。

よく使われる記号は !(否定)、||(論理和)、&&(論理積)です。

論理演算子の優先順位

複数の論理演算子が一つの式に混在している場合、計算される順番には決まりがあります。これを優先順位と呼びます。

それぞれ優先順位は 「!(否定) > &&(論理積) > ||(論理和)」 です。 つまり、! が最も先に評価され、次に &&、最後に || の順で処理が進みます。

短絡評価

論理演算子には、効率的に処理を行うための「短絡評価」という仕組みがあります。これは、式の最終的な結果が確定した時点で、それ以降の評価(計算)を省略する働きのことです。

  • 論理積 (&&): 左側の式が false と評価された場合、「かつ」の条件では片方がfalseなら結果は必ずfalseになります。そのため、右側の式を評価することなく、すぐに結果を false と確定させます。
  • 論理和 (||): 左側の式が true と評価された場合、「または」の条件では片方がtrueなら結果は必ずtrueになります。そのため、右側の式を評価することなく、すぐに結果を true と確定させます。

この短絡評価により、プログラムは不要な処理をスキップできるため、より速く動作することにつながります。

サンプルコード

この章では、プログラムの流れを制御するために不可欠な「論理演算子」について学習します。複数の条件を組み合わせたり、条件を反転させたりする方法を学びましょう。

javascript/chapter08/index.html

このHTMLファイルは、これから学習する4つのJavaScriptファイルをブラウザで実行するための土台となります。<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  </body>
16</html>
17

javascript/chapter08/script01.js

このコードは、論理演算子の一つである&&(AND / 論理積)の動作を確認するものです。

&&は、「A かつ B」という意味を持ち、&&の左側と右側、両方の条件がtrueの場合にのみ、全体の結果がtrueになります。一つでもfalseがあると、結果はfalseになります。

1// AND(論理積):
2// 両方の条件が true のときのみ true を返す
3
4// true && true の場合
5let result = (true && true);  // 両方が true のため結果は true
6console.log("true && true の結果:", result);  // true
7
8// true && false の場合
9result = (true && false);  // true && false のため結果は false
10console.log("true && false の結果:", result);  // false
11
12// false && true の場合
13result = (false && true);  // false && true のため結果は false
14console.log("false && true の結果:", result);  // false
15
16// false && false の場合
17result = (false && false);  // 両方が false のため結果は false
18console.log("false && false の結果:", result);  // false

javascript/chapter08/script02.js

このコードでは、||(OR / 論理和)という論理演算子を学びます。

||は、「A または B」という意味を持ちます。||の左側か右側のどちらか一方でも条件がtrueであれば、全体の結果がtrueになります。両方がfalseのときだけ、結果がfalseになります。

1// OR(論理和)
2// どちらかの条件が true のとき true を返す
3
4// true || true の場合
5result = (true || true);  // 両方が true のため結果は true
6console.log("true || true の結果:", result);  // true
7
8// true || false の場合
9result = (true || false);  // true || false のため結果は true
10console.log("true || false の結果:", result);  // true
11
12// false || true の場合
13result = (false || true);  // false || true のため結果は true
14console.log("false || true の結果:", result);  // true
15
16// false || false の場合
17result = (false || false);  // 両方が false のため結果は false
18console.log("false || false の結果:", result);  // false

javascript/chapter08/script03.js

ここでは、!(NOT / 論理否定)という論理演算子について説明します。

!は、「〜ではない」という意味を持ち、truefalseを反転させる働きをします。trueの前に付けるとfalseに、falseの前に付けるとtrueになります。

1// NOT(論理否定)
2// 条件が false のとき true を返し、条件が true のとき false を返す
3result = !true;  // true の否定で結果は false
4console.log("!true の結果:", result);  // false
5
6result = !false;  // false の否定で結果は true
7console.log("!false の結果:", result);  // true

javascript/chapter08/script04.js

このコードは、これまで学んだ論理演算子を使った実践的な練習問題です。

ここでは、3教科の点数を基に、「平均点が60点以上」かつ「合計点数が200点以上」という2つの条件を同時に満たしているかどうかを判定しています。

if文の条件式 (averageScore >= 60 && totalScore >= 200)&&が使われている点に注目してください。これにより、2つの条件を両方満たした場合にのみ「合格」と表示され、それ以外の場合は「不合格」と表示されます。

1// 3教科の平均点が60点以上、かつ合計点数が200点以上かどうかを判定する練習問題
2
3// 各教科の点数を設定
4let subject1 = 70;
5let subject2 = 65;
6let subject3 = 80;
7
8// 合計点数と平均点数を計算
9let totalScore = subject1 + subject2 + subject3;
10let averageScore = totalScore / 3;
11
12// 条件を判定
13if (averageScore >= 60 && totalScore >= 200) {
14  console.log("合格");
15} else {
16  console.log("不合格");
17}
18
19// 結果を表示
20console.log("合計点数:", totalScore);
21console.log("平均点数:", averageScore);
22

おわりに

お疲れ様でした。この記事では、「AかつB」の&&、「AまたはB」の||、そして否定の!という3つの論理演算子について学びました。これらの演算子を使えば、if文などでより複雑な条件を設定できるようになります。また、演算には優先順位があることや、処理を効率化する短絡評価という仕組みについても理解を深めました。論理演算子はプログラミングにおける条件分岐の基本となるため、サンプルコードを参考に使い方をしっかりマスターしておきましょう。

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