真偽値への型変換とは何か
「真偽値への型変換」は、値を 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
JavaScriptOR(||)は「左が 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 である点も押さえて、必要なときは長さやキー数で「空」を判定してください。
