読み込み中...

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

JavaScriptブーリアンの使い方や注意点を解説するイメージ JS
この記事は約6分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、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();

●注意点と対処法

ブーリアンを使用する際、nullやundefinedといった値が意図せずブーリアンとして評価されることがあります。

そのため、厳密な比較(===や!==)を使用することで、誤った評価を防ぐことができます。

●カスタマイズ方法

ブーリアンを使用する際には、状況に応じてカスタマイズが可能です。

例えば、関数やメソッドの戻り値にブーリアンを用いることで、処理の成否を判定することができます。

まとめ

この記事では、JavaScriptのブーリアンを用いたプログラミングについて、基本から応用例まで解説しました。

ブーリアンは、プログラムの制御やデータのフィルタリングなど、多様な場面で活躍するため、理解しておくことが重要です。