こんにちは！フロントエンドの現場を長年フラフラと……いや、最前線で駆け抜けてきたチーフアーキテクトの私です。
JavaScriptを触り始めてすぐの頃、`if`文の条件分岐あたりで「えっ、なんでこのコード動かないの！？」「さっきまで動いてたのに！」と頭を抱えた経験、ありませんか？ 大丈夫です、安心してください。それはあなたが通るべき「誰もが一度はハマる美しい洗礼の儀式」ですから、決してあなたがおバカなわけではありません。
JavaScriptの世界には、見た目はデータなのに、条件式に放り込んだ瞬間に「お前は実質『嘘（false）』だな！」と判定されてしまう、ちょっとお騒がせな連中がいます。これをFalsy（フォーシー）な値と呼びます。
今回は、このFalsyな値の「全7つのメンバー」と、JavaScriptが裏側でコソコソやっている「暗黙の型変換」のカラクリを、身近な例えを交えながら優しく解剖していきましょう。
—
1. Falsyな値ってなに？（お買い物のレジに例えてみよう）
JavaScriptの`if (条件)`の中身や、`&&` や `||` といった論理演算子は、その値が本当に真実（true）か、嘘（false）かを判定します。
ここで想像してみてください。あなたは今、コンビニの自動レジに立っています。
「お買い上げ点数」や「お財布の中身」をレジのセンサーに通したとき、「何も入っていない」「おカネがゼロ」「エラーが起きた」という状態のとき、レジはどう判定するでしょうか？ そう、「取引できません（false）」とピッと赤くエラーを出しますよね。
JavaScriptのFalsyな値とは、まさにこの「レジを通した瞬間にエラー扱い（false）になる、ちょっと頼りない7つの値たち」のことです。
裏を返せば、この7つ以外のすべての値は、どんなに変な文字だろうが、中身が入った配列だろうが、すべて「よし、OK！（Truthy＝真実）」として扱われます。この世界は「この7つの例外」さえ覚えれば、あとは全部OK牧場なんです。
—
2. 覚えよう！Falsyな値「全7つの顔ぶれ」
それでは、JavaScript界の「嘘つき7人衆」を全員ご紹介しましょう。エディタを開いて、ぜひご自身の目で確かめてみてください。
// 【Falsyな値の全7選】
// 以下の値はすべて、if文の条件式に入れると「false（嘘）」として扱われます。
const falsy1 = false; // 1. そのまんま「偽」
const falsy2 = 0; // 2. 算用の「ゼロ」
const falsy3 = -0; // 3. マイナスの「ゼロ」（数学好きのエンジニアが泣くやつ）
const falsy4 = 0n; // 4. BigInt版の「ゼロ」（最近のモダンJSでたまに見かける子）
const falsy5 = ”; // 5. 中身が空っぽの「空文字」
const falsy6 = null; // 6. 「意図的にからっぽ」にしたマーカー
const falsy7 = undefined; // 7. 「まだ値が定義されていません」という未定の状態
const falsy8 = NaN; // （※厳密には7つ＋1つですが、これを含めて「実質7種」として扱われます。計算エラーの「非数」）
※あれ、数えてみたら8つある？ そうなんです、`0`と`-0`を別枠にしたり、`NaN`を入れたりと数え方に揺れはありますが、一般的に「if文でfalseになる代表的な奴ら」として、このメンバーを覚えておけば実務で困ることはまずありません！
—
3. 実践！どうして彼らは「嘘つき」なのか？
それぞれのメンバーを、身近な例えでサクッと見ていきましょう。
① `false`（本物の嘘）
これはもう説明不要ですね。正真正銘の「偽」です。
② ③ `0` と `-0` と ④ `0n` （お財布の中身がすっからかん）
数字の「ゼロ」です。お財布の中に1円も入っていない状態。
`-0` はJavaScriptの歴史的・仕様上の名残ですが、これも「ゼロ」の仲間として容赦なくFalsy扱いです。`0n`は、ものすごく大きな整数を扱う「BigInt」という特殊なゼロです。これも中身はゼロなのでFalsy。
⑤ `”` （空っぽの段ボール箱）
文字が入っていない、空の文字列です。
`’ ‘`（スペース1文字）が入っていると、それは「中にゴミが入っている（Truthy）」と判定されるので注意してくださいね！あくまで 「完全に何も入っていないペチャンコの段ボール」 だけがFalsyです。
⑥ `null` と ⑦ `undefined` （忘れ物と、そもそも存在しないもの）
初心者泣かせのツートップ。
- `null`：「ここに何か入れようと思ったけど、今はあえて『からっぽ』にしておくね」という、人間の意図的な不在。
- `undefined`：「そもそも、まだ誰も何も用意していない（未定義）」という、プログラムが勝手に放り込む初期値。
どちらも「中身がない」という意味では同じなので、揃ってFalsy行きです。
⑧ `NaN` （計算がバグって頭がパニック）
`Not-a-Number` の略。例えば `’りんご’ / 2` のような、「文字を数字で割る」という絶対に不可能な計算をしたときに返ってくる「計算不能エラー」です。結果が出せない＝存在しないも同然なので、これもFalsyになります。
—
4. ややこしい！「暗黙の型変換」の罠と、実務でのスマートな回避術
ここで、JavaScript最大のスパイス（あるいは諸悪の根源とも言える）、「暗黙の型変換（コワース）」のお話をします。
JavaScriptは、人間が「うっかり異なる型同士で比較しちゃったとき」に、気を利かせて勝手に型を変換してくれる優しい言語です。……優しすぎて、時々とんでもないお節介をやらかします。
// やってしまいがちな失敗例
const userScore = 0;
// 「スコアがある（0より大きい、あるいは存在している）なら処理したい！」と思ったとき
if (userScore) {
console.log(‘スコアがあります！’);
} else {
console.log(‘スコアはありません……’); // ← 実際に画面に出るのはこっち！
}
あれっ？ `userScore` には `0` という「数字」が入っているのに、「スコアはありません」になってしまいました。
原因は、`0` がFalsyな値だからです。JavaScriptが「`0`？ おっ、じゃあ `false` だな！」と勝手に型を変換してしまったんですね。
もしユーザーの得点が「0点」だった場合、この書き方だと「スコアなし（未プレイ）」と判定されてしまい、ユーザーが「俺、ちゃんと0点取ったのにエラー扱いされたんだけど！」と激怒してしまいます。
チーフアーキテクトからの実務アドバイス
実務の現場では、この「暗黙の型変換の罠」を避けるために、いくつかのテクニックを使います。
1. 厳密等価演算子（`===` と `!==`）を徹底する
値だけでなく「型」まで厳密にチェックします。これにより、予期せぬ暗黙の型変換を防げます。
2. 「存在チェック」を正確に行う
値が `0` の可能性もある場合は、単に `if (score)` と書かずに、以下のように書きます。
// 「undefinedでもnullでもない」ことを明示的にチェックする安全な書き方
if (userScore !== null && userScore !== undefined) {
console.log(‘ちゃんとスコア（または0）が存在します！’);
}
// あるいは、今風の書き方（Null合体演算子やオプショナルチェイニングなど）を使う
—
最後に：つまずいても、それがプロへの第一歩です
いかがでしたでしょうか？
Falsyな値の7つ（＋1つ）と、暗黙の型変換の気まぐれ。最初は「なんでそんな勝手なことするの！」とイライラするかもしれませんが、JavaScriptという言語の「仕様のクセ」を掴んでしまえば、これほどスイスイ動く相棒もいません。
もしコード書いていて「あれ、ここなんで動かないんだ？」と思ったら、そっとコンソールに `console.log(Boolean(あなたの変数))` と打ち込んでみてください。画面に `false` と出たら、犯人は今回紹介した7人の誰かです。
「あ、お前だな！」とニヤリとできるようになれば、あなたも立派なJavaScript使いの仲間入りですよ。
それでは、快適なフロントエンドライフを！
コメント