【JavaScript】真偽値（Boolean）の基礎とTruthy/Falsy評価の完全ガイド

2026年1月23日

概要

JavaScriptにおける「真偽値（Boolean）」は、プログラムの制御フローを決定する最も基本的なデータ型です。単純な true / false の判定だけでなく、JavaScript特有の「真とみなされる値（Truthy）」と「偽とみなされる値（Falsy）」の概念を理解することは、堅牢な条件分岐を書くために必須のスキルです。本記事では、比較演算子による判定、if文での暗黙的な型変換、そして論理否定演算子（!）を用いた真偽値への変換手法を解説します。

仕様（入出力）

入力: 数値、文字列、配列、オブジェクトなどの任意のデータ
出力:
1. 比較演算による真偽結果
2. if 文によるデータの存在判定結果
3. ! および !! 演算子によるBoolean型への変換結果

基本の使い方

JavaScriptでは、以下の場面で真偽値が利用されます。

比較演算: 10 < 20 などの結果として true または false が生成される。
条件判定: if (値) の中で、値が存在するかどうかの判定に使われる。
論理否定: !値 で真偽を反転、!!値 で真偽値型へ強制変換する。

コード全文（HTML / JavaScript）

HTML (index.html)

検証結果を確認するための簡易コンソール画面です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Boolean Logic Demo</title>
    <script src="boolean-demo.js" defer></script>
</head>
<body>
    <div class="container">
        <h1>Consoleを確認してください</h1>
        <p>真偽値判定およびTruthy/Falsyの検証結果が出力されています。</p>
    </div>
</body>
</html>

JavaScript (boolean-demo.js)

比較、存在チェック、型変換の3パターンを網羅した実装です。

/**
 * 真偽値と論理演算子のデモンストレーション
 */
const runBooleanDemo = () => {
    console.log('--- 1. 比較演算子による判定 ---');
    
    const limit = 10;
    const current = 20;

    // 大小比較（結果は必ず true か false）
    console.log(`current < limit: ${current < limit}`); // false
    console.log(`current > limit: ${current > limit}`); // true


    console.log('--- 2. Truthy（真）と Falsy（偽）の判定 ---');
    
    // 文字列の判定
    // 空文字 "" は false、それ以外は true とみなされます
    const userName = "AdminUser";
    const userBio = ""; // 空文字

    if (userName) {
        console.log(`ユーザー名あり: ${userName}`); // 実行される
    }

    if (userBio) {
        console.log("自己紹介あり");
    } else {
        console.log("自己紹介なし（空文字はFalsy）"); // 実行される
    }

    // 環境判定（UserAgentに含まれる文字列チェック）
    // includesは boolean を返します
    const userAgent = navigator.userAgent;
    const isIphone = userAgent.includes("iPhone");
    
    if (isIphone) {
        console.log("iPhoneからのアクセスです");
    } else {
        console.log("iPhone以外の端末です");
    }


    console.log('--- 3. 論理否定（!）とBoolean変換（!!） ---');
    
    // 単一の ! は「否定」
    const hasError = false;
    console.log(`!hasError: ${!hasError}`); // true

    // 二重の !! は「Boolean型へのキャスト（変換）」
    // 値が何か入っていれば true、空や0なら false に変換します
    console.log(`!!"Hello": ${!!"Hello"}`); // true
    console.log(`!!123: ${!!123}`);         // true
    console.log(`!![1, 2]: ${!![1, 2]}`);   // true (配列は空でもtrue)
    
    console.log(`!!0: ${!!0}`);             // false (0はFalsy)
    console.log(`!!undefined: ${!!undefined}`); // false
};

// 実行
runBooleanDemo();

カスタムポイント

Falsyな値の把握: JavaScriptにおいて「偽」とみなされる値は厳密に決まっています。これらを暗記しておくとバグを防げます。
- false
- 0（数値のゼロ）
- ""（空文字）
- null
- undefined
- NaN（Not a Number）
Boolean()関数の利用: !!変数 は Boolean(変数) と書くのと同義です。可読性を重視する場合は Boolean() を使用するのも良い選択肢です。

注意点

配列とオブジェクトの罠: 空の配列 [] や空のオブジェクト {} は、JavaScriptでは Truthy（真） として扱われます。「データが空かどうか」を if ([]) で判定することはできません。配列の中身がないことを確認するには array.length === 0 を使用してください。
“0”（文字列のゼロ）: 数値の 0 は Falsy ですが、文字列の "0" は Truthy です。フォーム入力値などは文字列として扱われることが多いため注意が必要です。
厳密な比較: if (flag) は便利な反面、0 も false 扱いになるため、数値の0を有効な値として扱いたい場合は if (value !== null && value !== undefined) のように厳密に書く必要があります。

応用

ショートサーキット評価（短絡評価）

論理演算子 || や ?? を使って、変数が Falsy の場合の「デフォルト値」を設定するテクニックです。

// userBio が空文字(Falsy)なら、"未設定" が代入される
const displayBio = userBio || "未設定";

// Null合体演算子 (ES2020)
// null または undefined の時だけ "ゲスト" にする（0や空文字は有効値とする）
const displayName = inputName ?? "ゲスト";

まとめ

JavaScriptの条件分岐では、単なる true/false だけでなく、あらゆる値が「真っぽい（Truthy）」か「偽っぽい（Falsy）」かに分類されて評価されます。特に 0、""、null、undefined が Falsy であること、そして []（空配列）が Truthy であることを理解しておけば、予期せぬ判定ミスを大幅に減らすことができます。