誰でも簡単に理解できる！JavaScriptにおける論理積の徹底解説と10個のサンプルコード

はじめに
●JavaScriptの論理積とは
- ○論理積の基本
●論理積の使い方
●論理積の応用例
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

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

JavaScript初心者でも分かるように、基本から応用例、注意点、カスタマイズ方法まで詳しく解説しています。

さらに、実践的な10個のサンプルコードもご紹介していますので、ぜひ参考にしてみてください。

●JavaScriptの論理積とは

JavaScriptの論理積は、複数の条件を同時に満たすかどうかを判定する際に使用される演算子です。

論理積は “&&” という記号で表され、条件Aと条件Bが同時に真（true）である場合に真（true）を返します。

どちらか一方でも偽（false）である場合は、偽（false）を返します。

○論理積の基本

論理積は次のように記述します。

条件A && 条件B

例えば、次のようなコードで論理積を使用することができます。

let a = 10;
let b = 20;
if (a > 5 && b > 15) {
  console.log("条件が両方とも真です");
}

このコードでは、変数aが5より大きく、変数bが15より大きい場合に、”条件が両方とも真です” というメッセージが表示されます。

●論理積の使い方

論理積は、さまざまな場面で使用できます。

ここでは、いくつかのサンプルコードを用いて論理積の使い方を解説します。

○サンプルコード1：簡単な論理積の使用例

次のコードは、年齢が18歳以上かつ、身長が160cm以上の場合に成人と判定する例です。

let age = 20;
let height = 170;

if (age >= 18 && height >= 160) {
  console.log("成人です");
} else {
  console.log("成人ではありません");
}

このコードでは、年齢が18歳以上であることと、身長が160cm以上であることが同時に満たされる場合に “成人です” と表示されます。

○サンプルコード2：条件式における論理積の利用

次のコードは、ある商品が在庫がある（stock > 0）かつ、割引価格が適用されている（isDiscountがtrue）場合に、割引価格を表示する例です。

let stock = 10;
let isDiscount = true;
let price = 1000;
let discountPrice = 800;

if (stock > 0 && isDiscount) {
  console.log("割引価格：" + discountPrice + "円");
} else {
  console.log("通常価格：" + price + "円");
}

このコードでは、在庫があり、かつ割引が適用されている場合に割引価格を表示します。

○サンプルコード3：関数内での論理積の活用

次のコードは、関数内で論理積を使用して、入力された値が範囲内にあるかどうかをチェックする例です。

// 範囲内にあるかどうかを判定する関数
function isInRange(value, min, max) {
  // valueがmin以上かつmax以下である場合、trueを返す
  return value >= min && value <= max;
}

let input = 50;
if (isInRange(input, 0, 100)) {
  console.log("入力値は範囲内です");
} else {
  console.log("入力値は範囲外です");
}

このコードでは、isInRange関数内で論理積を用いて、入力値が指定された範囲内にあるかどうかを判定しています。

●論理積の応用例

ここでは、論理積を用いたさまざまな応用例を紹介します。

○サンプルコード4：複数の条件を組み合わせた例

次のコードは、複数の条件を組み合わせて、年齢と性別による条件分岐を行う例です。

let age = 25;
let gender = "女性";

if (age >= 18 && age < 65 && gender === "女性") {
  console.log("対象者です");
} else {
  console.log("対象者ではありません");
}

このコードでは、年齢が18歳以上、65歳未満かつ女性である場合に “対象者です” と表示されます。

○サンプルコード5：入力値の検証に論理積を使用

次のコードは、入力フォームから受け取ったデータが正しいかどうかをチェックする例です。

// 入力値がすべて正しいかどうかを判定する関数
function isValidInput(name, age, email) {
  // 名前、年齢、メールアドレスが空でない場合にtrueを返す
  return name !== "" && age !== "" && email !== "";
}

let inputName = "山田太郎";
let inputAge = "25";
let inputEmail = "yamada@example.com";

if (isValidInput(inputName, inputAge, inputEmail)) {
  console.log("入力値が正しいです");
} else {
  console.log("入力値が正しくありません");
}

このコードでは、isValidInput関数内で論理積を用いて、名前、年齢、メールアドレスが空でないかどうかをチェックしています。

○サンプルコード6：イベントリスナーでの論理積の利用

次のコードは、イベントリスナー内で論理積を使用して、クリックされた要素が特定の条件を満たすかどうかを判断する例です。

// ページ上の全てのボタン要素を取得
const buttons = document.querySelectorAll("button");

// クリックイベントのリスナー関数
function handleClick(event) {
  // クリックされた要素がbuttonタグで、かつdata-action属性が"submit"の場合
  if (event.target.tagName === "BUTTON" && event.target.dataset.action === "submit") {
    console.log("送信ボタンがクリックされました");
  } else {
    console.log("送信ボタン以外がクリックされました");
  }
}

// 各ボタンに対して、クリックイベントのリスナーを登録
buttons.forEach((button) => {
  button.addEventListener("click", handleClick);
});

このコードでは、handleClick関数内で論理積を用いて、クリックされた要素がbuttonタグであるかつdata-action属性が”submit”であるかどうかをチェックしています。

○サンプルコード7：論理積を使ったフィルタリング機能

次のコードは、配列内のオブジェクトをフィルタリングする例です。

特定の条件を満たすオブジェクトだけを抽出します。

const items = [
  { name: "リンゴ", price: 100, isFresh: true },
  { name: "バナナ", price: 200, isFresh: false },
  { name: "オレンジ", price: 150, isFresh: true },
  { name: "パイナップル", price: 300, isFresh: false },
];

// 価格が200以下で、かつ新鮮な果物のみを抽出する関数
function filterItems(items) {
  return items.filter((item) => item.price <= 200 && item.isFresh === true);
}

const filteredItems = filterItems(items);
console.log(filteredItems);

このコードでは、filterItems関数内で論理積を用いて、価格が200以下であるかつ新鮮な果物だけを抽出しています。

○サンプルコード8：論理積を活用したエラーハンドリング

次のコードは、論理積を使用してエラーハンドリングを行う例です。

エラーが発生した場合には、適切なメッセージを表示します。

function processData(data) {
  // データがnullでなく、かつオブジェクト型である場合
  if (data !== null && typeof data === "object") {
    console.log("データの処理を行います");
  } else {
    console.log("エラー: 無効なデータです");
  }
}

// 正常なデータ
const validData = { key: "value" };
processData(validData);

// 無効なデータ
const invalidData = null;
processData(invalidData);

このコードでは、processData関数内で論理積を用いて、データがnullでないかつオブジェクト型である場合のみ処理を行い、それ以外の場合はエラーメッセージを表示しています。

○サンプルコード9：論理積を使ったデータの整形

次のコードは、論理積を使ってデータの整形を行う例です。

配列内のオブジェクトを条件に合わせて変更します。

const users = [
  { id: 1, name: "山田", age: 25, isAdmin: false },
  { id: 2, name: "佐藤", age: 35, isAdmin: true },
  { id: 3, name: "鈴木", age: 30, isAdmin: false },
];

function formatUsers(users) {
  return users.map((user) => {
    // ユーザーが30歳以上で、かつ管理者でない場合
    if (user.age >= 30 && !user.isAdmin) {
      return { ...user, isEligible: true };
    } else {
      return { ...user, isEligible: false };
    }
  });
}

const formattedUsers = formatUsers(users);
console.log(formattedUsers);

このコードでは、formatUsers関数内で論理積を用いて、ユーザーが30歳以上であるかつ管理者でない場合に、isEligibleプロパティをtrueに設定しています。

○サンプルコード10：論理積を用いたアニメーション制御

次のコードは、論理積を使ってアニメーションの制御を行う例です。

条件に応じてアニメーションの実行を制御します。

let isAnimating = false;
let isVisible = true;

// アニメーションを開始する関数
function startAnimation() {
  console.log("アニメーションが開始されました");
  isAnimating = true;
}

// アニメーションを停止する関数
function stopAnimation() {
  console.log("アニメーションが停止されました");
  isAnimating = false;
}

// isVisibleとisAnimatingの両方がtrueの場合にアニメーションを停止
function handleAnimation() {
  if (isVisible && isAnimating) {
    stopAnimation();
  } else if (!isAnimating) {
    startAnimation();
  }
}

// アニメーションの制御を行う
handleAnimation();

このコードでは、handleAnimation関数内で論理積を用いて、isVisibleとisAnimatingの両方がtrueの場合にアニメーションを停止させています。

それ以外の場合、アニメーションが実行されていなければ、アニメーションを開始します。