真偽値の変換

生田 陸人
LuaGate エンジニア / 現役エンジニア
編集 LuaGate編集部

真偽値の変換 とは

Boolean / !! / truthy・falsy を理解して値を真偽値に変換する。本レッスンでは、真偽値の変換 の基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。

真偽値の変換

JavaScript では if 文や論理演算子に 任意の値 を渡すことができ、その値が真とみなされる (truthy) か偽とみなされる (falsy) かを内部で判定します。この性質を理解しておくと、条件分岐のコードがすっきりします。本レッスンでは Boolean() 関数と !! 二重否定演算子で値を真偽値に変換し、truthy/falsy のルールを覚えます。

ポイント if (value) と書いたとき、value は実は Boolean(value) に通されているのと同じ意味になります。

falsy な値は 7 つだけ

まず「 と判定される値」を全部覚えてしまうのが近道です。次の 7 つだけが falsy で、それ以外はすべて truthy です。

  • false
  • 0 および -0
  • 0n (BigInt の 0)
  • "" (空文字列)
  • null
  • undefined
  • NaN

逆に "0" (文字列のゼロ) や [] (空配列)、{} (空オブジェクト) は truthy です。これは初学者が引っかかりやすいところなので意識しましょう。

JavaScript

console.log(Boolean(0)); // false console.log(Boolean("")); // false console.log(Boolean(null)); // false console.log(Boolean(undefined));// false console.log(Boolean(NaN)); // false console.log(Boolean("0")); // true (文字列なので truthy) console.log(Boolean([])); // true (オブジェクトなので truthy) console.log(Boolean({})); // true

注意 Boolean("false")true です。中身が空文字でない限り文字列は truthy です。

Boolean 関数と !!

明示的に真偽値へ変換する方法は 2 つあります。1 つは Boolean(value) で、もう 1 つは !!value です。どちらも結果は同じで、好みの問題ですが、Boolean(value) のほうが読み手にとっては意図が明確です。!!! を 2 回付ける ことで「否定の否定 = そのままの真偽値」を作る伝統的なテクニックです。

JavaScript

const raw = "hello"; console.log(Boolean(raw)); // true console.log(!!raw); // true const empty = ""; console.log(Boolean(empty)); // false console.log(!!empty); // false

動きを図で追う

Boolean(value) がどう判定するかを図にすると次のとおりです。

diagram (will load when visible)

ヒント 「falsy は 7 種類だけ」を呪文として覚えると、判定で迷いません。

よくある間違い

1 つ目は "false" (文字列) を Boolean("false") に通したら false が返ると誤解するパターンです。中身が空でない文字列はすべて truthy なので true になります。文字列の "false" を boolean に変換したいなら value === "true" のように明示比較が必要です。2 つ目は配列やオブジェクトの中身が空でも truthy であることです。空かどうかは arr.length === 0Object.keys(obj).length === 0 で判定します。3 つ目は Boolean(null)null === false を混同するケース。nullfalse ではなく、緩い比較でも厳密比較でも null == falsefalse です。

注意 truthy/falsy の判定と「等しいか」の判定は別物です。

実務での使いどころ

if (user) のようにオブジェクトの存在チェックでよく使います。usernullundefined のときだけ falsy になり、それ以外の {} { id: 1 } などはすべて truthy なので、null ガードがすっきり書けます。また、フォーム入力の必須チェックで if (!input.value) と書くと、空文字や null を一括ではじけます。

補足 厳密に「空オブジェクトを弾きたい」場合は Object.keys(obj).length > 0 で別途判定します。

やってみよう

値を 1 つ受け取り、その値が truthy なら true、falsy なら false を返す関数 isTruthy を作ってください。やることはシンプルで、Boolean(value) の結果を返すだけです。テストケースには文字列、数値、配列、オブジェクト、null など多様な値が含まれています。すべてのケースで期待値と一致するか確認しましょう。

よくある質問

Q. ブラウザと Node.js で動作は変わりますか?

A. JavaScript の構文・組み込み機能(配列・文字列・Promise 等)はどちらでも同じです。違いは DOM API(ブラウザ専用)と fs などのファイル系(Node 専用)など、実行環境固有の機能です。コアロジックは両方で動くため、テストもしやすくなります。

Q. ES6 以降の新機能は使っても大丈夫ですか?

A. 現代のブラウザ・Node.js は ES2020 以降の機能をほぼサポートしています。古い IE 等を対象にする必要が無ければ、let/const、アロー関数、分割代入、async/await を積極的に使ってください。トランスパイル(Babel/Vite)が必要なケースは年々減っています。

Q. TypeScript に進む価値はありますか?

A. 型情報があるとリファクタやエディタ補完が劇的に効くため、規模が大きくなるなら TypeScript への移行を強くおすすめします。最初は any を許容しつつ徐々に型を付ければ、JS の知識をそのまま活かせます。

次のレッスン

次は null と undefined を見分ける で、Boolean / !! / truthy・falsy を理解して値を真偽値に変換する を学びます。

事前確認 — 進む前に次の 3 つができることを確認しましょう。

  1. 真偽値変換 の要点を自分の言葉で説明できる
  2. このレッスンの最小コード (または操作手順) を見ずに書ける
  3. 練習問題やクイズで間違えた箇所を読み直して理解した

理解度チェック (30 秒)

Q. 真偽値変換 とは何か、1 文で説明してください。

この章のポイント

A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。

関連レッスン

要件

  1. Boolean 関数または !! で真偽値に変換する
  2. falsy な 7 種類で false を返す
  3. それ以外の値で true を返す

入出力例

test-cases.txt

isTruthy("hello")true isTruthy("")false isTruthy(0)false isTruthy(1)true isTruthy(null)false isTruthy([])true isTruthy({})true

ヒント

main.js
main.js
学習モード

メモ

真偽値の変換

⌘S で保存