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

JavaScript JavaScript
2025.12.13
スポンサーリンク

真偽値への型変換を一言でいうと

JavaScript の「真偽値への型変換」は、
数値・文字列・オブジェクトなど “何でも”、if 文などの条件として評価するときに true / false に読み替える仕組み のことです。

if (値) { ... } と書いたとき、
その「値」がそのまま true / false なのではなく、
JavaScript が「真っぽい（truthy）か」「偽っぽい（falsy）か」を判定してから判断します。

ここが重要です。
真偽値への型変換を理解していないと、
「なんでこの if 入ってしまうの？」「なんでここ実行されないの？」という “条件式迷子” が頻発します。
逆にここが腹落ちすると、条件を書くときのモヤモヤがかなり減ります。

truthy / falsy という考え方

falsy（偽っぽい）値の代表

JavaScript には、
「条件式の中で false とみなされる値」がいくつか決まっています。
これを falsy（フォールシー） と呼びます。

falsy になるのは、この 6 つです。

  • false
  • 0
  • ""（空文字）
  • null
  • undefined
  • NaN

これ以外の値は、基本的にすべて truthy（真っぽい） になります。

if (0) {
  console.log("実行されない");
}

if ("") {
  console.log("実行されない");
}

if (null) {
  console.log("実行されない");
}

if ("hello") {
  console.log("実行される"); // truthy
}

if (123) {
  console.log("実行される"); // truthy
}

if ([]) {
  console.log("実行される"); // 空配列も truthy
}
JavaScript

「true / false じゃなくても if に書ける」理由

if (条件) の「条件」には、
boolean 型（true / false）だけでなく、
文字列や数値を直接書いても動きます。

const name = "太郎";

if (name) {
  console.log("名前が設定されています");
}
JavaScript

ここで name は "太郎" という文字列ですが、
if 文の中では「truthy」として扱われ、
if (true) と同じ意味になります。

ここが重要です。
条件式は「boolean かどうか」ではなく、「truthy か falsy か」で判断される。
この感覚を持っておくと、「if (値)」を書いたときに何が起きているかがクリアになります。

Boolean() と !! による明示的な真偽値変換

Boolean(値) で true / false をはっきりさせる

Boolean(値) は、その値を「真偽値として評価した結果」を純粋な true / false に変換します。

console.log(Boolean(true));       // true
console.log(Boolean(false));      // false

console.log(Boolean("hello"));    // true（非空文字列 → truthy）
console.log(Boolean(""));         // false（空文字 → falsy）

console.log(Boolean(123));        // true
console.log(Boolean(0));          // false

console.log(Boolean(null));       // false
console.log(Boolean(undefined));  // false
console.log(Boolean(NaN));        // false

console.log(Boolean([]));         // true（空配列も truthy）
console.log(Boolean({}));         // true（空オブジェクトも truthy）
JavaScript

!!値 も同じ働きをする（よく使われる小技）

! を2回重ねた !!値 も、
「その値を真偽値として評価した結果」に変換するテクニック です。

console.log(!!"hello");   // true
console.log(!!"");        // false
console.log(!!123);       // true
console.log(!!0);         // false
console.log(!!null);      // false
console.log(!!{});        // true
JavaScript

! の 1 回目で「真偽が反転」し、
2 回目で再度反転することで、
最終的に true / false だけを取り出すイメージです。

ここが重要です。
「この値を “設定されているかどうか” のフラグにしたい」というとき、
const hasName = !!name; のように書くと、
hasName が純粋な boolean になって扱いやすくなります。
ただし 0 や "" も false になるので、それらを有効な値として扱いたい場面では注意が必要です。

if 文・論理演算子の中での型変換

if (値) のとき、内部で何が起きているか

const value = "hello";

if (value) {
  console.log("実行される");
}
JavaScript

これは、JavaScript 的には

if (Boolean(value)) {
  // ...
}
JavaScript

とほぼ同じ意味だと考えてOKです。
value を truthy/falsy 判定してから、
その結果に基づいて if の中に入るかどうかが決まります。

論理 AND / OR の中でも使われる

&& や || は、「真偽値だけ」を扱っているように見えますが、
実際には「truthy / falsy 判定＋値の返却」をしています。

console.log("hello" && 123); // 123（左が truthy なので右を返す）
console.log("" && 123);      // ""（左が falsy なので左を返す）

console.log("" || "default");    // "default"（左が falsy なので右）
console.log("value" || "default"); // "value"（左が truthy なので左）
JavaScript

条件として評価するとき、
"hello" && 123 は「truthy」とみなされ、
"" && 123 は「falsy」とみなされます。

ここが重要です。
if や論理演算子は、内部で「値 → truthy/falsy → 実際の動作」という2段階の処理をしていると考えると、
「なんでこれが true 扱い？」「なんでここに入らない？」という疑問が説明しやすくなります。

よくあるパターンと注意点

「値が設定されているか？」チェック

ユーザー名など、「空でなければ OK」にしたい場面。

const name = "太郎";

if (name) {
  console.log("名前あり"); // name が "" でも null でも undefined でもないとき
} else {
  console.log("名前なし");
}
JavaScript

name が

  • ""
  • null
  • undefined

のときは falsy なので、「名前なし」になります。

「0 や空文字を “有効” と見なしたい」場合の罠

例えば「点数 0 も有効」「空文字も有効」としたい場合に、
安易に if (value) と書くと、0 や空文字が falsy として弾かれてしまいます。

const score = 0;

if (score) {
  console.log("スコアあり");
} else {
  console.log("スコアなし扱いになってしまう"); // 0 は falsy
}
JavaScript

この場合は、より明確な条件を書くべきです。

if (score !== null && score !== undefined) {
  console.log("スコアは設定されている（0 も含む）");
}
JavaScript

あるいは、型まで意識して

if (typeof score === "number") {
  console.log("数値として有効なスコア");
}
JavaScript

デフォルト値パターンでの注意点

よくある書き方：

const input = 0;
const value = input || 10;

console.log(value); // 10 になってしまう
JavaScript

input が 0 のときも falsy 扱いされるので、
input || 10 は 10 になってしまいます。

「0 も有効な値」としたい場合は、
??（null 合体演算子）や、input === undefined だけを見るなど、別の方法が必要になります。

ここが重要です。
truthy/falsy に頼った判定は便利ですが、
「0 や空文字をどう扱いたいか」を意識せずに使うとバグになります。
“空でも 0 でも全部まとめて「未設定」と見なしていいか？” を毎回自分に問いかけてから使うと、安全度が一気に上がります。

真偽値への型変換を使いこなす小さな設計術

フラグ値を作るときは、変換と名前をセットにする

const name = "太郎";

const hasName = !!name;

if (hasName) {
  console.log("名前がある人向けの処理");
}
JavaScript

!!name だけを見ると少しトリッキーですが、
hasName という名前が付くことで意味がかなり明確になります。

同様に、

const items = [];

const hasItems = items.length > 0;

if (!hasItems) {
  console.log("アイテムが空です");
}
JavaScript

のように、「自分が判断したい条件」を boolean に落とし込んでから扱うと、
条件式の読みやすさと安全性が上がります。

Boolean(…) と !! のどちらを使うか

どちらも結果は true / false ですが、

  • Boolean(value) … 明示的で読みやすい
  • !!value … 短く書ける、JavaScript らしい書き方

初心者のうちは、
読みやすさ重視で Boolean(value) を使うのがおすすめです。

慣れてきたら内部的に !! と同じだと分かった上で、
場面によって使い分けるとよいです。

ここが重要です。
「値をそのまま if に渡す」のか、「いったん boolean に変換してから使う」のか。
この違いを意識できるようになると、
条件式をデザインする感覚が一段深くなります。

初心者として真偽値への型変換で本当に押さえてほしいこと

JavaScript では、if / && / || の中で「値」は truthy / falsy に自動変換される。
falsy になるのは false, 0, "", null, undefined, NaN の 6 つ。
それ以外は基本すべて truthy。

Boolean(value) や !!value で、
「その値を真偽値として評価した結果」を純粋な true / false に変換できる。

if (value) は便利だが、
0 や空文字も falsy になるため、
「0 も有効」「空文字も有効」という場面では使い方に注意が必要。

&& / || は値を返すが、
条件として評価されるときには「truthy か falsy か」で判断される。

ここが重要です。
真偽値への型変換は、「JavaScript が値をどう“解釈”しているか」のルールです。
if の中に何かを書くたびに、
“これは truthy か？ falsy か？ 0 や空文字が来たらどうなるか？” を一瞬だけイメージしてみる。
その小さな習慣が、条件式まわりのバグをかなり減らしてくれます。

最後に、感覚をつかむための小さな練習を置いておきます。

const values = [true, false, 1, 0, -1, "", "0", "hello", null, undefined, NaN, [], {}];

for (const v of values) {
  console.log(
    JSON.stringify(v),
    "=> Boolean:", Boolean(v),
    " / !!v:", !!v
  );
}
JavaScript

これを実行して、
「自分の直感」と「実際の結果」がどこでズレるかを眺めてみてください。
そのズレこそが、あなたと JavaScript の真偽値変換のギャップであり、
そこを一つずつ潰していくことが、“条件式を信頼できるものにする” 近道になります。

次へ
12
スポンサーリンク
タイトルとURLをコピーしました