こんにちは！JavaScriptの世界へようこそ。チーフアーキテクトの私です。
プログラミングを学び始めの頃って、不思議なコードの挙動に頭を抱えたり、「なんでやねん！」と画面に向かってツッコミを入れたくなったりすること、ありますよね。大丈夫です、そのモヤモヤは誰もが通る「エンジニアの登竜門」ですから安心してください。
今日は、そんなJavaScriptの数ある「お約束」の中でも、特に初学者がドハマりしやすい「ToBoolean（トゥ・ブーリアン）変換」について、おしゃべりするように楽しく、かつ実務で役立つレベルまで深く紐解いていきましょう。
—
そもそも「ToBoolean変換」ってなに？
JavaScriptを書いていると、「もし〜だったら」という条件分岐（`if`文など）をめちゃくちゃ頻繁に使いますよね。
if (user) {
// ユーザーがいるときの処理
}
このとき、`if`のカッコの中身は、最終的に「本当（`true`）」か「嘘（`false`）」のどちらかにパキッと判断される必要があります。
でも、実務の現場では、文字列や数値、果てにはオブジェクトなど、さまざまなデータ型がこのカッコの中に放り込まれます。
ここでJavaScriptのエンジンが裏側で発動させるのが、「勝手に真偽値っぽく解釈してやるぜ！」という変換ルールです。これが「ToBoolean変換」の正体です。
—
嘘つきな値（Falsy）たちを覚悟せよ
まずは、JavaScript界において「お前は嘘（`false`）だ！」と判定されてしまう、悲しき仲間たちをご紹介します。
通称「Falsy（フォルシー）」と呼ばれる値たちです。
実は、このFalsyな値は全部でたったの7つしかありません。これだけ覚えれば、JavaScriptの判定マスターに一歩近づけます。
1. `false` （そのまま偽）
2. `0` （数値のゼロ）
3. `-0` （マイナスのゼロ）
4. `0n` （BigIntのゼロ）
5. `””` または `”` （中身が空っぽの文字列）
6. `null` （「何もない」ことを表す値）
7. `undefined` （「まだ値が定義されてません」という状態）
8. `NaN` （Not a Number：計算エラーなどの「数値じゃないもの」）
※（厳密には7つ＋αですが、実務上はこの仲間たちを「空っぽや無効なもの」として捉えておけばOKです！）
身近な例えで考えてみよう
お財布の中身を想像してみてください。
- お金が「0円」
- お財布自体が「ない（`null`）」
- お財布を開けたら中身が「空っぽ（`””`）」
これらはすべて、現実世界でも「お買い物できません＝無い（`false`）」ですよね。JavaScriptのFalsyたちも、これと同じように「中身が空っぽ・存在しない・無効」という共通のイメージを持っています。
—
トラブル続出！「オブジェクトは常にtrue」の罠
さて、ここからが本日の本丸、そして一番つまずきやすいポイントです。
JavaScriptでは、配列（`[]`）や連想配列のようなオブジェクト（`{}`）を作ることができますよね。
ここで、初学者の多くが以下のような罠にハマります。
「空っぽの配列なんだから、中身ないし、`false`判定になるはず……？」
const emptyArray = []; // 中身が何もない空っぽの配列
if (emptyArray) {
console.log(“あれっ、動いちゃった！？”);
}
結果はなんと、「あれっ、動いちゃった！？」がコンソールに表示されます。
そう、JavaScriptの世界では、どんなに中身が空っぽの配列（`[]`）であっても、オブジェクト（`{}`）であっても、存在しているだけで問答無用で「`true`（本当）」になります。
なぜオブジェクトは常に「true」なのか？
イメージしてみてください。
ダンボール箱を想像してください。中身が空っぽのダンボール箱でも、「ダンボール箱という物体そのものは、そこに確実に存在していますよね？」
JavaScriptは、「うーん、中身が空かどうかは置いといて、そこに『オブジェクトという箱』がポツンと置いてあるから、存在としてはアリ（`true`）だな！」と判断してしまうのです。
実務の現場でも、「APIからデータが空の配列で返ってきたから、`if (data)`で弾けるはずだ！」と思ってこの罠にハマり、画面がバグるという事故が後を絶ちます。
配列やオブジェクトの中身が空かどうかを調べたいときは、`if (emptyArray)`ではなく、`if (emptyArray.length > 0)` のように、ちゃんと中身の長さをチェックしてあげましょうね。
—
明示的に変換してみよう：`Boolean()` と `!`（否定演算子）
「じゃあ、目の前の値が本当に `true` なのか `false` なのか、強制的に白黒つけたい！」というときは、以下の2つの方法を使います。
1. `Boolean()` 関数を使う
その名の通り、引数に渡した値を無理やり真偽値に変換します。
console.log(Boolean(“こんにちは”)); // 文字列があるので -> true
console.log(Boolean(0)); // 0 は Falsy なので -> false
console.log(Boolean({})); // オブジェクトは例外なく -> true
2. 「！」（論理否定演算子）を2回重ねる（!!hoge）
実務のコードを見ていると、`Boolean()` よりも `!!`（ドット・ドットじゃなくて、ビックリマーク2つ！）を見かけることが多いかもしれません。
「！」は「真と偽をひっくり返す」という意味なので、2回重ねることで「元の真偽値を維持したまま、強制的にBoolean型に変換する」というテクニックとして使われます。
const username = “Taro”;
// username が存在するかどうかを、スッキリしたBoolean型（true/false）で取得する
const hasUser = !!username;
console.log(hasUser); // true
—
まとめ：優しく寄り添うJavaScriptのルール
JavaScriptの型変換は、最初は「なんで勝手に変えるのさ！」とイライラしてしまうかもしれませんが、慣れてくるとコードをスッキリ書くための強力な味方になってくれます。
今日のポイントをギュッと凝縮すると、こうです。
- Falsy（嘘つきな値）は、0、””、null、undefined、NaNなどの「空っぽ・無効」な仲間たち（全7種類ほど）。
- 配列やオブジェクトは、中身が空っぽでも「箱が存在する」というだけで問答無用で `true` になる！
- 中身の有無をきっちり調べたいときは、`if (arr.length > 0)` のように具体的に書くのがプロの技。
最初は戸惑うことも多いですが、一つひとつ紐解いていけば必ず理解できます。焦らず、自分のペースでコードを書いて試してみてくださいね。あなたのプログラミングライフを、チーフアーキテクトとしてこれからも応援しています！
コメント