JavaScript | 基礎構文:比較・論理 – 真偽値への型変換

JavaScript JavaScript
スポンサーリンク

真偽値への型変換とは何か

「真偽値への型変換」は、値を true(真)か false(偽)として扱うことです。JavaScriptでは if、while、論理演算子(&&、||、!)などの「条件の場所」に値を置くと、自動的に真偽値へ変換して評価されます。明示的に変換したいときは Boolean(…) や二重否定(!!)を使います。


truthy と falsy の基本

JavaScriptには、真偽値に変換したときに true になる「truthy」と、false になる「falsy」があります。代表的な falsy は、false、0、-0、0n(BigIntのゼロ)、””(空文字)、null、undefined、NaN です。これら以外(数値の非ゼロ、非空文字列、オブジェクト、配列、関数など)は基本的に truthy です。

if ("hello") console.log("truthy");   // 実行される(非空文字列は truthy)
if ("") console.log("falsy");         // 実行されない(空文字は falsy)
if (0) console.log("falsy");          // 実行されない(0 は falsy)
if (123) console.log("truthy");       // 実行される(非ゼロは truthy)
if ([]) console.log("truthy");        // 実行される(空配列でも truthy)
if ({}) console.log("truthy");        // 実行される(空オブジェクトでも truthy)
JavaScript

空の配列や空のオブジェクトが truthy なのは初心者がよくつまずくポイントです。「空なら偽」とは限りません。


明示的な変換方法(Boolean と !!)

明示的に真偽値にしたいときは Boolean(…) または二重否定 !! を使います。!! は短く書けるため、UIの表示フラグやバリデーションでよく使われます。

Boolean("text"); // true
Boolean("");     // false
Boolean(0);      // false
Boolean(123);    // true
Boolean(null);   // false

!!"text";  // true
!!"";      // false
!!0;       // false
!!42;      // true
!![];      // true
!!{};      // true
JavaScript

どちらも動作は同じですが、可読性の観点でチームの好みに合わせましょう。関数の戻り値などでは Boolean(…) のほうが意図が伝わることがあります。


条件式での自動変換(if、論理演算子)

条件の場所では自動的に真偽値へ変換されます。OR(||)とAND(&&)は「短絡評価」と「値をそのまま返す」性質を持つため、デフォルト値や存在チェックに使えます。

// if の自動変換
const name = ""; // 空文字は falsy
if (!name) {
  console.log("名前を入力してください");
}

// ORでデフォルト値
const input = ""; // falsy
const displayName = input || "ゲスト"; // "ゲスト"

// ANDで条件付き実行
const loggedIn = true;
loggedIn && console.log("ログイン済み");

// NOTで反転
const hasError = "";
if (!hasError) console.log("エラーなし"); // 空文字は falsy → NOTで true
JavaScript

OR(||)は「左が falsy なら右を返す」ためデフォルト値に便利ですが、空文字や 0 も falsy として扱われる点に注意が必要です。


よくある誤解と落とし穴

「文字列 ‘false’ は偽だろう」と思いがちですが、文字列は中身に関係なく非空なら truthy です。また、空配列 [] や空オブジェクト {} は truthy で、配列の長さで判断しないと誤判定になります。

// "false" という文字列は truthy
if ("false") console.log("これは実行される");

// 空配列は truthy。要素の有無を判定したいなら length を使う
const arr = [];
if (arr) console.log("truthy");              // 実行される
if (arr.length === 0) console.log("空です"); // 要素の有無は length で判定

// 0 を有効な値としたいのに OR を使うと上書きされる例
const count = 0;
const safeCount = count || 10; // 0 は falsy → 10 に置き換わる(意図外)
const safeCount2 = count ?? 10; // null/undefined のみ置き換え。0 は維持される
JavaScript

デフォルト値を設定したいとき、0 や “” を有効値として残したいなら OR ではなく null 合体演算子(??)を使うと安全です。


実用例で理解する

入力の有無を真偽値化して使う

フォーム入力が空かどうかを真偽で扱います。二重否定でシンプルに書けます。

function hasValue(s) {
  return !!s; // 非空なら true、空なら false
}
console.log(hasValue("abc")); // true
console.log(hasValue(""));    // false
JavaScript

デフォルト値を安全に与える

0 や空文字を有効値として残したい場面では、OR ではなく ?? を選びます。

function toDisplayCount(count) {
  return count ?? 0; // null/undefinedなら0、0はそのまま
}
console.log(toDisplayCount(undefined)); // 0
console.log(toDisplayCount(0));         // 0
JavaScript

配列やオブジェクトの「空」を判定

truthy/falsyではなく、構造の中身で条件を定義します。

function isEmptyArray(a) {
  return Array.isArray(a) && a.length === 0;
}
function isEmptyObject(o) {
  return o && typeof o === "object" && Object.keys(o).length === 0;
}
console.log(isEmptyArray([]));   // true
console.log(isEmptyObject({}));  // true
JavaScript

まとめ

真偽値への型変換は「truthy と falsy」を正しく理解することが出発点です。明示変換には Boolean(…) と !! を使い、条件式では自動変換が働くことを前提に書けます。ただし、0 や “” を有効値として扱いたい場面では OR によるデフォルト設定が意図を壊しやすいので、?? の採用や厳密な比較で対策しましょう。空配列・空オブジェクトは truthy である点も押さえて、必要なときは長さやキー数で「空」を判定してください。

タイトルとURLをコピーしました