JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでfalsy値（偽と評価される値）を見分ける方法

JavaScriptにおけるfalsy値とは

JavaScriptでは、値をBoolean型として評価したときに「false」とみなされる値がいくつか存在します。これらは「falsy値（偽の値）」と呼ばれます。条件分岐や論理演算において、意図しない動作を防ぐために、どの値がfalseと評価されるかを正しく理解しておくことが重要です。

JavaScriptでfalseと評価される主な値は以下の通りです。

  • false — Boolean型のfalseそのもの
  • 0 — 数値のゼロ
  • 空文字列：""、''、または ``（テンプレートリテラル）
  • null — 値が存在しないことを示す特殊な値
  • undefined — 値が未定義であることを示す値
  • NaN — 「Not a Number」（数値ではない）を表す値

逆に、これら以外の値はすべて「truthy（真の値）」としてtrueと評価されます。例えば、"0"（文字列のゼロ）、空の配列[]、空のオブジェクト{}などもtruthyである点には注意が必要です。

falsy値を判定するサンプルコード

以下は、JavaScriptでfalsy値を実際に特定するコード例です。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScriptでfalsy値を特定する</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
        color: blueviolet;
    }
</style>
</head>
<body>
<h1>JavaScriptでfalsy値を特定する</h1>
<div class="result"></div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると、falsy値の判定結果が表示されます</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    BtnEle.addEventListener("click", () => {
        if(!0){
            resEle.innerHTML = '0 は boolean の false と評価されます <br>';
        }
        if(!''){
            resEle.innerHTML += " ''（空文字列）は boolean の false と評価されます <br>";
        }
        if(!null){
            resEle.innerHTML += 'null は boolean の false と評価されます <br>';
        }
        if(!undefined){
            resEle.innerHTML += 'undefined は boolean の false と評価されます <br>';
        }
        if(!NaN){
            resEle.innerHTML += 'NaN は boolean の false と評価されます <br>';
        }
    });
</script>
</body>
</html>

実行結果

このコードを実行すると、画面に「CLICK HERE」ボタンが表示されます。

ボタンをクリックすると、各値に対する否定演算子!の評価結果に基づき、以下のように表示されます。

  • 0 → boolean の false と評価される
  • ''（空文字列）→ boolean の false と評価される
  • null → boolean の false と評価される
  • undefined → boolean の false と評価される
  • NaN → boolean の false と評価される

解説：否定演算子を使った判定の仕組み

このサンプルでは、論理NOT演算子（!）を使用しています。!はオペランドをBoolean型に変換して反転させるため、falsy値に!を付けるとtrueになります。そのため、if(!0)のような条件式は真となり、ブロック内の処理が実行されます。

もし値自体をbooleanに明示的に変換したい場合は、二重否定!!valueやBoolean(value)関数を使うと便利です。これにより、任意の値がfalsyかtruthyかを簡単に確認できます。

  1. JavaScriptのコンストラクターから値を返す方法

    JavaScriptのコンストラクターから値を返すには？JavaScriptでは、コンストラクター関数内で明示的にオブジェクトをreturnすると、new演算子によって生成されるインスタンス（this）の代わりに、そのオブジェクトが結果として返されます。この仕組みを利用すると、コンストラクターの戻り値を柔軟に制御できます。以下は、JavaScriptのコンストラクターから値を返すコード例です。サンプルコード<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-

  2. JavaScriptにおけるpreventDefault()とreturn falseの違いを徹底解説

    preventDefault()とreturn falseの基本的な違いpreventDefault()は、イベントが発生した際にブラウザのデフォルト動作をキャンセルするメソッドです。例えば、リンクをクリックしたときのページ遷移を防ぎたい場合などに使用します。ただし、イベント自体の伝播（バブリング）は止められず、後続の処理も通常どおり実行されます。一方、return falseは、インラインのイベントハンドラやjQueryなどの環境で使われた場合、デフォルト動作を停止するだけでなく、イベントの伝播も阻止します。また、関数内でreturn falseに到達した時点でそれ以降の処理は実行されず、即