7つのJavaScriptブーリアンテクニックでプログラミング力アップ

はじめに
●JavaScriptブーリアンとは
- ○ブーリアンの基本
●ブーリアンの使い方
●ブーリアンの応用例
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptブーリアンを使ったプログラミング力が向上します。

ブーリアンとは、真偽値を表すデータ型で、プログラムの制御やデータのフィルタリングなど、様々な場面で活躍します。

初心者でもわかりやすいように、基本的な使い方から応用例まで、実践的なサンプルコードを交えて解説していきます。

●JavaScriptブーリアンとは

○ブーリアンの基本

JavaScriptのブーリアンは、真偽値を表すデータ型で、値はtrue（真）かfalse（偽）のどちらかになります。

ブーリアンは、条件分岐や繰り返し処理などの制御構造において、判断の基準となる値として使われます。

●ブーリアンの使い方

ここでは、ブーリアンの基本的な使い方をサンプルコードを使って説明していきます。

○サンプルコード1：ブーリアンを使った条件分岐

このコードでは、ブーリアンを使って条件分岐をするコードを紹介しています。

この例では、変数isMemberの値がtrueかfalseによって、メッセージを切り替えて表示しています。

const isMember = true;

if (isMember) {
  console.log('会員です');
} else {
  console.log('会員ではありません');
}

○サンプルコード2：ブーリアンを使った繰り返し処理

このコードでは、ブーリアンを使って繰り返し処理をするコードを紹介しています。

この例では、変数countが5になるまで、繰り返し処理を実行しています。

let count = 0;

while (count < 5) {
  console.log(`繰り返し回数: ${count}`);
  count++;
}

○サンプルコード3：ブーリアンを使ったオブジェクトのフィルタリング

このコードでは、ブーリアンを使ってオブジェクトのフィルタリングをするコードを紹介しています。

この例では、配列内のオブジェクトから、isAvailableプロパティがtrueのものだけを抽出しています。

const products = [
  { id: 1, name: '商品A', isAvailable: true },
  { id: 2, name: '商品B', isAvailable: false },
  { id: 3, name: '商品C', isAvailable: true },
];

const availableProducts = products.filter(product => product.isAvailable);

console.log(availableProducts);

●ブーリアンの応用例

ブーリアンは、さまざまな応用例があります。

いくつかの応用例をサンプルコードと共に紹介します。

○サンプルコード4：ブーリアンを使ったトグルスイッチ

このコードでは、ブーリアンを使ってトグルスイッチを実装する例を紹介しています。

この例では、isOn変数を切り替えることで、スイッチのオン・オフを制御しています。

let isOn = false;

function toggleSwitch() {
  isOn = !isOn;
  console.log(`スイッチは${isOn ? 'オン' : 'オフ'}です`);
}

toggleSwitch();
toggleSwitch();

○サンプルコード5：ブーリアンを使ったフォームバリデーション

このコードでは、ブーリアンを使ってフォームのバリデーションを行う例を紹介しています。

この例では、入力されたメールアドレスが正しい形式かどうかを判定しています。

function validateEmail(email) {
  const regex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
  return regex.test(email);
}

const email = 'test@example.com';
const isValid = validateEmail(email);
console.log(`メールアドレス${email}は${isValid ? '有効' : '無効'}です`);

○サンプルコード6：ブーリアンを使ったアコーディオンメニュー

このコードでは、ブーリアンを使ってアコーディオンメニューを制御する例を紹介しています。

この例では、クリックされた要素のisOpenプロパティを切り替えることで、アコーディオンメニューの開閉を実現しています。

class Accordion {
  constructor() {
    this.isOpen = false;
  }

  toggle() {
    this.isOpen = !this.isOpen;
    console.log(`アコーディオンは${this.isOpen ? '開いています' : '閉じています'}`);
  }
}

const accordion = new Accordion();
accordion.toggle();
accordion.toggle();

○サンプルコード7：ブーリアンを使ったショッピングカート

このコードでは、ブーリアンを使ってショッピングカート内の商品の選択状態を管理する例を紹介しています。

この例では、商品オブジェクトのisSelectedプロパティを切り替えることで、選択された商品を管理しています。

class Product {
  constructor(id, name) {
    this.id = id;
    this.name = name;
    this.isSelected = false;
  }

  toggleSelection() {
    this.isSelected = !this.isSelected;
    console.log(`商品「${this.name}」は${this.isSelected ? '選択されました' : '選択解除されました'}`);
  }
}

const product1 = new Product(1, '商品A');
const product2 = new Product(2, '商品B');

product1.toggleSelection();
product2.toggleSelection();
product1.toggleSelection();