JavaScriptの論理演算子を完全攻略！初心者向け10の具体例と解説

はじめに
●JavaScriptの論理演算子とは
- ○論理演算子の種類
●論理演算子の使い方
●論理演算子の応用例
●注意点と対処法
まとめ

はじめに

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

JavaScript初心者であっても、論理演算子の使い方や注意点、カスタマイズ方法を理解し、実践で活用できるようになることを目指しましょう。

●JavaScriptの論理演算子とは

JavaScriptの論理演算子は、複数の条件式を組み合わせて新たな条件式を作るための演算子です。

プログラムの制御構造やデータの操作において、論理演算子は非常に重要な役割を果たします。

○論理演算子の種類

JavaScriptには、主に下記の3種類の論理演算子があります。

AND演算子（&&）：両方の条件が真である場合に真を返します。
OR演算子（||）：どちらか一方の条件が真である場合に真を返します。
NOT演算子（!）：条件が真であれば偽を、偽であれば真を返します。

●論理演算子の使い方

それでは、各論理演算子の使い方をサンプルコードを通じて解説します。

○サンプルコード1：AND演算子(&&)

AND演算子は、両方の条件が真である場合に真を返します。

下記のサンプルコードでは、変数aと変数bが共に10以上である場合にメッセージを表示します。

let a = 12;
let b = 15;

if (a >= 10 && b >= 10) {
  console.log('変数aと変数bは共に10以上です');
}

○サンプルコード2：OR演算子(||)

OR演算子は、どちらか一方の条件が真である場合に真を返します。

下記のサンプルコードでは、変数aまたは変数bのどちらかが10以上である場合にメッセージを表示します。

let a = 8;
let b = 15;

if (a >= 10 || b >= 10) {
  console.log('変数aまたは変数bのどちらかが10以上です');
}

○サンプルコード3：NOT演算子(!)

NOT演算子は、条件が真であれば偽を、偽であれば真を返します。

下記のサンプルコードでは、変数aが10未満である場合にメッセージを表示します。

let a = 8;

if (!(a >= 10)) {
  console.log('変数aは10未満です');
}

●論理演算子の応用例

論理演算子を応用することで、様々な条件を柔軟に表現できます。

ここでは、いくつか応用例とサンプルコードを紹介します。

○サンプルコード4：条件分岐

論理演算子を使って、複数の条件を組み合わせた条件分岐を作成できます。

下記のサンプルコードでは、変数aと変数bの値に応じてメッセージを表示します。

let a = 12;
let b = 8;

if (a >= 10 && b >= 10) {
  console.log('変数aと変数bは共に10以上です');
} else if (a >= 10 || b >= 10) {
  console.log('変数aまたは変数bのどちらかが10以上です');
} else {
  console.log('変数aと変数bは共に10未満です');
}

○サンプルコード5：ループ処理

ループ処理においても、論理演算子を利用して複雑な条件を設定できます。

下記のサンプルコードでは、1から50までの数値のうち、3の倍数かつ5の倍数ではない数を出力します。

for (let i = 1; i <= 50; i++) {
  if (i % 3 === 0 && !(i % 5 === 0)) {
    console.log(i);
  }
}

○サンプルコード6：関数の引数チェック

論理演算子を使って、関数の引数が正しい範囲内にあることをチェックできます。

下記のサンプルコードでは、年齢を引数として受け取り、成人か未成年かを判定する関数を作成します。

function checkAdult(age) {
  if (typeof age === 'number' && age >= 0 && age < 120) {
    if (age >= 20) {
      console.log('成人です');
    } else {
      console.log('未成年です');
    }
  } else {
    console.log('年齢が不正です');
  }
}

checkAdult(25); // 成人です

○サンプルコード7：短絡評価を利用したデフォルト値設定

論理演算子の短絡評価を利用して、関数の引数にデフォルト値を設定できます。

下記のサンプルコードでは、引数が与えられない場合にデフォルトの値を使用します。

function showGreeting(name) {
  let displayName = name || 'ゲスト';
  console.log(`こんにちは、${displayName}さん`);
}

showGreeting('山田太郎'); // こんにちは、山田太郎さん
showGreeting(); // こんにちは、ゲストさん

○サンプルコード8：オブジェクトの存在チェック

オブジェクトが存在するかどうかを論理演算子を使ってチェックできます。

下記のサンプルコードでは、オブジェクトのプロパティが存在するかどうかを確認し、その結果に応じてメッセージを表示します。

let user = {
  name: '山田太郎',
  age: 25,
};

if (user && user.name) {
  console.log(`ユーザー名: ${user.name}`);
} else {
  console.log('ユーザー名がありません');
}

if (user && user.address) {
  console.log(`住所: ${user.address}`);
} else {
  console.log('住所がありません');
}

○サンプルコード9：配列のフィルタリング

論理演算子を使って、配列の要素を条件に従ってフィルタリングできます。

下記のサンプルコードでは、数値の配列から偶数だけを抽出します。

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let evenNumbers = numbers.filter((number) => {
  return number % 2 === 0;
});

console.log(evenNumbers); // [2, 4, 6, 8, 10]

○サンプルコード10：イベントリスナーの登録・解除

論理演算子を使って、イベントリスナーの登録と解除を条件に応じて行うことができます。

下記のサンプルコードでは、ボタンをクリックするとイベントリスナーが登録され、再度クリックすると解除されます。

let button = document.getElementById('toggleButton');
let isListening = false;

button.addEventListener('click', () => {
  let targetElement = document.getElementById('targetElement');

  if (!isListening) {
    targetElement.addEventListener('mouseover', handleMouseOver);
    console.log('イベントリスナーが登録されました');
    isListening = true;
  } else {
    targetElement.removeEventListener('mouseover', handleMouseOver);
    console.log('イベントリスナーが解除されました');
    isListening = false;
  }
});

function handleMouseOver() {
  console.log('マウスオーバーイベントが発生しました');
}