JavaScriptにおける論理和の基本から応用まで10選の実例で徹底解説

はじめに
●JavaScript論理和とは
- ○論理和の基本
- ○使い方
●論理和を使ったサンプルコード10選
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

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

はじめてJavaScriptを触る方でも、基本から応用まで理解できる内容になっています。

サンプルコードを10選用意しましたので、ぜひ参考にしてください。

●JavaScript論理和とは

JavaScriptの論理和は、2つの値を比較して、どちらか一方が真であれば真を返す演算子です。

論理和演算子は、”||”（パイプ2つ）で表現されます。

○論理和の基本

論理和は、次のように使います。

const result = value1 || value2;

○使い方

論理和を使った基本的な使い方は、条件分岐や変数の初期化などです。

●論理和を使ったサンプルコード10選

論理和を使った様々な実例を下記にご紹介します。

○サンプルコード1：条件判定

論理和演算子を使った条件判定の例を紹介します。

この例では、value1 と value2 のどちらかが真であれば、result には true が代入されます。

const value1 = true;
const value2 = false;
const result = value1 || value2; // result は true になります。

○サンプルコード2：変数の初期化

論理和演算子を使って変数を初期化する例を紹介します。

この例では、value が null や undefined などの falsy な値であれば、defaultValue が代入されます。

const value = null;
const defaultValue = "初期値";
const result = value || defaultValue; // result には "初期値" が代入されます。

○サンプルコード3：関数のデフォルト引数

論理和演算子を使って関数のデフォルト引数を設定する例を紹介します。

この例では、sayHello 関数の引数 name が与えられなかった場合、デフォルトの値 “John Doe” が使われます。

function sayHello(name) {
  const displayName = name || "John Doe";
  console.log(`Hello, ${displayName}!`);
}

sayHello("Taro"); // "Hello, Taro!" と出力されます。
sayHello(); // "Hello, John Doe!" と出力されます。

○サンプルコード4：オブジェクトのマージ

論理和演算子を使ってオブジェクトをマージする例を紹介示します。

この例では、object1 と object2 のプロパティがマージされた新しいオブジェクトを作成しています。

const object1 = { a: 1, b: 2 };
const object2 = { b: 3, c: 4 };

const mergedObject = { ...object1, ...object2 };
console.log(mergedObject); // { a: 1, b: 3, c: 4 } が出力されます。

○サンプルコード5：イベントリスナーの設定

論理和演算子を使ってイベントリスナーを設定する例を紹介します。

この例では、button 要素がクリックされたときに、handleClick 関数が実行されます。

<button id="myButton">クリックしてください</button>

<script>
  const button = document.getElementById("myButton");
  const handleClick = () => {
    console.log("ボタンがクリックされました。");
  };

  button.addEventListener("click", handleClick);
</script>

○サンプルコード6：エラーハンドリング

try、catch、finally を使ったエラーハンドリングの例を紹介します。

この例では、divide 関数で 0 による除算が発生した場合にエラーを捕捉して、適切なエラーメッセージを表示します。

function divide(a, b) {
  if (b === 0) {
    throw new Error("0 で除算することはできません。");
  }
  return a / b;
}

try {
  console.log(divide(10, 2)); // 5 が出力されます。
  console.log(divide(10, 0)); // ここでエラーが発生します。
} catch (error) {
  console.error(`エラーが発生しました: ${error.message}`);
} finally {
  console.log("処理が完了しました。");
}

○サンプルコード7：フィルタリング

配列の要素をフィルタリングする例を紹介します。

この例では、numbers 配列の偶数のみを抽出して新しい配列 evenNumbers を作成しています。

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter((number) => number % 2 === 0);
console.log(evenNumbers); // [2, 4, 6] が出力されます。

○サンプルコード8：ソート

配列の要素をソートする例を紹介します。

この例では、numbers 配列の要素を降順にソートしています。

const numbers = [3, 1, 4, 1, 5, 9];
numbers.sort((a, b) => b - a);
console.log(numbers); // [9, 5, 4, 3, 1, 1] が出力されます。

○サンプルコード9：マッピング

配列の要素に対して何らかの処理を行い、新しい配列を作成する例を紹介します。

この例では、numbers 配列の各要素を 2 倍した新しい配列 doubledNumbers を作成しています。

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((number) => number * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10] が出力されます。

○サンプルコード10：チェックボックスの状態取得

HTML のチェックボックスの状態を取得する例を紹介します。

この例では、myCheckbox 要素のチェック状態を取得して、isChecked 変数に代入しています。

<input type="checkbox" id="myCheckbox" />

const myCheckbox = document.getElementById("myCheckbox");
const isChecked = myCheckbox.checked;
console.log(`チェックボックスの状態: ${isChecked ? "チェック済み" : "未チェック"}`);

●注意点と対処法

各ブラウザでの動作の違いに注意してください。
ブラウザごとに実装が異なる場合がありますので、互換性を確認しながらコードを書くことが重要です。
エラーハンドリングを適切に行ってください。
ユーザーが予期しない操作を行った場合や、データが不正な形式である場合など、エラーが発生する可能性があります。
適切なエラーメッセージを表示し、ユーザーに対応を促すことが重要です。