カテゴリー
お問い合わせ

【JavaScript】これって true？ false？ if文の条件判定（Truthy / Falsy）まとめ表

JavaScript
目次

JavaScriptで開発をしていると、「あれ？ 空の配列 [] って if文に入れると true だっけ？ false だっけ？」と迷う瞬間がありませんか？

JavaScriptには、真偽値（boolean）以外の値を if文の条件式に入れた際、自動的に true っぽく扱うか（Truthy）、false っぽく扱うか（Falsy）というルールが存在します。

今回は、よく遭遇する値たちが if文の中でどのように判定されるのか、ひと目でわかるように表にまとめました。さらに、実際にクリックして判定を確認できるチェッカーも作成したので、ぜひ試してみてください！

Truthy / Falsy 早見表

まずは結論！ JavaScriptの「Falsy」な値はこの8つだけ！

JavaScriptで false として扱われる値（Falsyな値）は決まっています。以下の8つ以外はすべて true（Truthyな値）になると覚えておくと非常にシンプルです。

値型判定
falseBooleanfalse
0Numberfalse
-0Numberfalse
0nBigIntfalse
"" (空文字)Stringfalse
nullNullfalse
undefinedUndefinedfalse
NaNNumberfalse

間違いやすい「Truthy」な値の例

Falsyな値と似ていますが、以下はすべて true と判定されるので要注意です！

値解説判定
"0"文字列の0（空文字ではないため）true
"false"文字列のfalse（空文字ではないため）true
[]空の配列（オブジェクトの一種なため）true
{}空のオブジェクトtrue
function(){}関数true

デモ動作

See the Pen JavaScript if文判定まとめ by mikanbako (@mikanbako) on CodePen.

全画面でのデモ動作は以下のリンクからご確認下さい！（別タブで開かれます）

実装コードの紹介

【HTML】

<div class="l-wrap">
  <p class="p-lead">下のボタンをクリックして、if文での判定結果を確かめてみよう！</p>
  
  <div class="p-checker">
    <div class="p-checker__buttons">
      <!-- Falsyな値たち -->
      <button class="c-btn js-check-btn" data-key="numZero">0</button>
      <button class="c-btn js-check-btn" data-key="emptyString">"" (空文字)</button>
      <button class="c-btn js-check-btn" data-key="nullVal">null</button>
      <button class="c-btn js-check-btn" data-key="undefinedVal">undefined</button>
      
      <!-- 間違えやすいTruthyな値たち -->
      <button class="c-btn js-check-btn" data-key="strZero">"0" (文字列)</button>
      <button class="c-btn js-check-btn" data-key="emptyArray">[] (空配列)</button>
      <button class="c-btn js-check-btn" data-key="emptyObject">{} (空オブジェクト)</button>
    </div>

    <!-- 結果表示エリア -->
    <div class="p-checker__result js-result-area">
      <p class="js-result-text">ここに結果が出ます</p>
    </div>
  </div>
</div>

【CSS】

.l-wrap {
  color: #3e3e3e;
  padding: 40px;
  text-align: center;
}

.p-lead {
  font-weight: bold;
  margin-bottom: 24px;
}

.p-checker {
  max-width: 600px;
  margin: 0 auto;
  background: #fff;
  padding: 32px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.p-checker__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 32px;
}

.c-btn {
  padding: 12px 20px;
  font-size: 16px;
  font-weight: bold;
  background: #f0f0f0;
  border: 2px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.c-btn:hover {
  background: #e0e0e0;
  transform: translateY(-2px);
}

/* ボタン選択状態用クラス */
.c-btn.is-active {
  background: #f9d854;
}

.p-checker__result {
  padding: 24px;
  border-radius: 8px;
  font-size: 24px;
  font-weight: bold;
  background: #f9f9f9;
  border: 2px dashed #ccc;
  transition: all 0.3s;
}

/* 判定結果用の動的クラス */
.p-checker__result.is-true {
  background: #e0f7fa;
  border-color: #1bb4d4;
  color: #008394;
}

.p-checker__result.is-false {
  background: #ffebee;
  border-color: #c72c4c;
  color: #b71c1c;
}

【JavaScript】

// 検証したい「本物のJavaScriptの値」をオブジェクトにまとめる
const testValues = {
  numZero: 0,
  emptyString: "",
  nullVal: null,
  undefinedVal: undefined,
  strZero: "0",
  emptyArray: [],
  emptyObject: {}
};

// 要素の取得
const btns = document.querySelectorAll('.js-check-btn');
const resultArea = document.querySelector('.js-result-area');
const resultText = document.querySelector('.js-result-text');

// 各ボタンにクリックイベントを設定
btns.forEach(btn => {
  btn.addEventListener('click', () => {
    // HTMLのdata属性からキーを取得し、対応する実際の値を取り出す
    const key = btn.dataset.key;
    const valueToTest = testValues[key];

    // クラスをリセット
    resultArea.classList.remove('is-true', 'is-false');
    btns.forEach(b => {
      b.classList.remove('is-active');
    });

    // ボタンを選択状態にする
    btn.classList.add('is-active');

    // 実際にif文で判定
    if (valueToTest) {
      // Truthy（true）の場合
      resultArea.classList.add('is-true');
      resultText.textContent = `✨ 判定結果： true (Truthy) ✨`;
    } else {
      // Falsy（false）の場合
      resultArea.classList.add('is-false');
      resultText.textContent = `❌ 判定結果： false (Falsy) ❌`;
    }
  });
});

コードの解説・こだわったポイント

値の受け渡し方法（文字列化を防ぐ）

HTMLのボタンタグが持つ value 属性などで値を取得しようとすると、0 も [] もすべて「文字列」として取得されてしまい、正確な判定ができません。 そこで今回は、JavaScript側に testValues というオブジェクトを用意し、HTMLの data-key 属性と紐付けることで、「本物のJavaScriptの型と値」をそのまま if文に渡せるように工夫しています。

配列やオブジェクトは「中身が空」でも true

デモで []（空配列）や {}（空オブジェクト）を押してみてください。中身が空っぽでも、オブジェクトとして存在している時点で true と判定されます。 「配列の中身が空かどうか」を正しく判定したい場合は、if (array) ではなく、if (array.length > 0) のように length プロパティを使うのが鉄則です！

補足：公式ドキュメント（MDN）のリンク

より詳しい仕様については、以下の公式ドキュメント等をご参照ください。

・MDN: Truthy (真値)
・MDN: Falsy (偽値)

まとめ

今回は、JavaScriptの if 文における条件判定（Truthy / Falsy）の基本についてまとめました。

特に 0 と "0" の違いや、中身が空っぽの配列 [] が true になる仕様は、思わぬバグを生み出しやすいポイントです。「Falsyになる8つの値」さえ覚えておけば、コードの意図を正確に読み解くことができます。

フレームワークやライブラリの便利な機能を使うことも大切ですが、こういったJavaScript自体の基礎的な言語仕様もしっかりと理解し、バグの少ない堅牢なコードを書けるエンジニアを目指していきたいと思います！

Prev
Next

関連記事