こんにちは。フロントエンドの世界へようこそ。
コードを書き始めると必ずと言っていいほどぶつかる壁、「Truthy（トゥルーシー）」と「Falsy（フォルシー）」。これ、最初は本当に謎ですよね。「なぜか上手く動かない」「if文で弾かれてしまう」という経験、誰しも一度は通る道です。
今日は、この「JavaScriptの気まぐれな判定ルール」を、スッキリ理解できるように解説しますね。難しい理屈は一旦置いておいて、一緒に紐解いていきましょう。
—
1. 「Truthy」と「Falsy」って何者？
JavaScriptの世界では、`if (条件)` のカッコの中に書かれたものが、「たとえ真偽値（true/false）じゃなくても、無理やり『本当（true）』か『嘘（false）』かに分類する」というルールがあります。
- Truthy（トゥルーシー）: 「まあ、中身があるし『真』とみなしていいよ！」という値。
- Falsy（フォルシー）: 「うーん、これは実質『空っぽ』だから『偽』として扱うよ」という値。
これを、「レジ打ち」で例えてみましょう。
お買い物のレジでの例え話
あなたがスーパーのレジ係だと想像してください。
- Truthy: カゴに商品が入っている状態。レジは「お会計を進めますか？」と反応します。
- Falsy: カゴが空っぽ、あるいは「0円」の商品。レジは「何も入っていないのでお会計できません」とスルーします。
JavaScriptは、この「カゴの中身」を見て、プログラムを次に進めるか、止めるかを判断しているだけなんです。
—
2. これだけ覚えればOK！「Falsy」のリスト
JavaScriptには、「これは空っぽとみなすよ！」というFalsyな値が7つだけ決まっています。これ以外は、基本的に全部「Truthy（あり）」だと考えてください。
1. `false` （そのまんま偽）
2. `0` （数字のゼロ）
3. `-0` （マイナスのゼロ）
4. `0n` （大きな数字のゼロ）
5. `””` （空っぽの文字列）
6. `null` （「何もない」ことを示す値）
7. `undefined` （「まだ定義されていない」値）
8. `NaN` （「Not a Number」。数字じゃないよ、というエラー的な値）
※厳密には7つですが、`-0`と`0n`は`0`の仲間だと思って大丈夫です。
—
3. 実践！コードで確認してみよう
実際にエディタに貼り付けて、動きを見てみましょう。`if`文は、カッコの中が「Truthy」なら中身を実行し、「Falsy」ならスルーします。
// カゴの中身をチェックするイメージです
function checkValue(value) {
if (value) {
console.log(“「” + value + “」はTruthyです！”);
} else {
console.log(“「” + value + “」はFalsyなのでスルーされました…”);
}
}
// さまざまな値を放り込んでみます
checkValue(true); // → Truthy!
checkValue(“こんにちは”); // → Truthy! (文字が入っていればOK)
checkValue(100); // → Truthy! (0以外の数字もOK)
checkValue(0); // → Falsy… (0は空っぽ扱い)
checkValue(“”); // → Falsy… (空文字は空っぽ扱い)
checkValue(null); // → Falsy… (中身がないのでスルー)
checkValue(undefined); // → Falsy… (定義すらされていないのでスルー)
—
4. 初学者がハマりやすい「落とし穴」
ここで、一番つまずきやすいポイントをお話しします。それは「0」と「空文字」の扱いです。
例えば、ユーザーの入力フォームを作ったとき、「0」という数字を入力したのに、「何も入力されていない」と判定されてエラーが出ることがあります。これは、JavaScriptが`0`を「Falsy（空っぽ）」とみなしてしまうからです。
解決策：
「0も立派な値だよ！」と教えたいときは、`if (value)` ではなく、「`value` が `null` じゃないこと」や「`value` が `undefined` じゃないこと」を具体的に指定してあげてください。
// 「0」も正当な値として扱いたい場合
let score = 0;
// ダメな例：これだと0がFalsy扱いされて実行されない
if (score) { console.log(“スコアがあります”); }
// 良い例：0は除外して、本当に「何もないもの」だけを弾く
if (score !== null && score !== undefined) {
console.log(“スコアはちゃんと存在します！”);
}
—
最後に：怖がらないで大丈夫！
「Truthy」と「Falsy」は、最初は少し魔法のように感じるかもしれません。でも、この仕組みのおかげで、JavaScriptは複雑なコードを短く、スマートに書けるようになっています。
もし迷ったら、「これは『空っぽ（Falsy）』かな？ それとも『何かが入っている（Truthy）』かな？」と心の中で問いかけてみてください。その視点を持つだけで、あなたのコードの解像度はグッと上がります。
焦らず、一歩ずつ進んでいきましょう。分からないことがあれば、いつでもまた聞きに来てくださいね。応援しています！
コメント