【JavaScript】真偽値を反転させる方法｜! 演算子・!! 二重否定・toggle パターン・非ブール値の落とし穴まで解説

console.log(!true);   // false
console.log(!false);  // true

// フラグ変数のトグル
let isOpen = false;
isOpen = !isOpen; // true
isOpen = !isOpen; // false（元に戻る）

// !! は値を boolean 型に変換する（反転ではない）
console.log(!!0);          // false
console.log(!!1);          // true
console.log(!!'');         // false
console.log(!!'hello');    // true
console.log(!!null);       // false
console.log(!!undefined);  // false
console.log(!![]);         // true （空配列は truthy！）
console.log(!!{});         // true （空オブジェクトも truthy！）

// Boolean() 関数と同等
console.log(!!1 === Boolean(1)); // true

const count = 3;

// NG: count を「反転」したいわけではない
const hasItems = !count; // false ではなく true が欲しいのに false になってしまう

// OK: truthy/falsy を boolean に変換したい → !!
const hasItems2 = !!count; // true（countが0以外なのでtruthy → true）

// さらに明示的に書くなら Boolean() でも同じ
const hasItems3 = Boolean(count); // true

let isMenuOpen = false;

const menuBtn  = document.getElementById('menuBtn');
const menu     = document.getElementById('menu');

menuBtn.addEventListener('click', () => {
  isMenuOpen = !isMenuOpen; // true ↔ false を交互に切り替え

  menu.hidden = !isMenuOpen;
  menuBtn.setAttribute('aria-expanded', String(isMenuOpen));
  menuBtn.textContent = isMenuOpen ? 'メニューを閉じる' : 'メニューを開く';
});

// classList.toggle は クラスの付与/削除を自動でトグルする
// 内部で同様のフラグ反転が行われている
const panel = document.getElementById('panel');

document.getElementById('toggleBtn').addEventListener('click', () => {
  panel.classList.toggle('is-open');

  // classList.toggle の戻り値はクラスが付与された（true）か削除された（false）か
  const isOpen = panel.classList.contains('is-open');
  document.getElementById('toggleBtn').setAttribute('aria-expanded', String(isOpen));
});

let isDark = localStorage.getItem('theme') === 'dark';

function applyTheme() {
  document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
  document.getElementById('themeBtn').textContent = isDark ? '☀️ ライト' : '? ダーク';
}

document.getElementById('themeBtn').addEventListener('click', () => {
  isDark = !isDark;
  localStorage.setItem('theme', isDark ? 'dark' : 'light');
  applyTheme();
});

applyTheme(); // 初期適用

// NG: 文字列の状態管理に ! を使う
let status = 'active'; // 'active' は truthy
status = !status;      // false（文字列ではなく boolean になってしまう！）

// NG: 数値カウンターに ! を使う
let count = 5;
count = !count; // false（期待した「5の反転」ではなく boolean になる）

// OK: 文字列状態のトグルは明示的に
status = (status === 'active') ? 'inactive' : 'active';

// OK: number の 0/1 トグルには XOR
let flag = 0;
flag ^= 1; // 0 → 1 → 0 のトグル（bitwise XOR）

const STATUSES = ['todo', 'doing', 'done'];
let currentIndex = 0;

function nextStatus() {
  currentIndex = (currentIndex + 1) % STATUSES.length;
  return STATUSES[currentIndex];
}

console.log(nextStatus()); // 'doing'
console.log(nextStatus()); // 'done'
console.log(nextStatus()); // 'todo'（ループ）

// lookup オブジェクトで次の状態を定義する
const nextState = {
  'active':   'inactive',
  'inactive': 'active',
};

let status = 'active';

function toggleStatus() {
  status = nextState[status] ?? status; // 未定義状態は変更しない
  return status;
}

console.log(toggleStatus()); // 'inactive'
console.log(toggleStatus()); // 'active'