Ateam Lifestyle Inc. Advent Calendar 2021 10日目は株式会社エイチームライフスタイル デザイナーの @kmfj がお送りします！
概要
&&で繋いでもうまく出し分けられない時があったので、仕組みをまとめてみた備忘録です。
「とりあえず&&で繋げば出し分けられるんだな」と思っている人向けです。
出し分けられないパターン？
&&を使って表示・非表示を出し分ける処理を書いてみます。
const name = '山田太郎'
return (
<div>
<p>こんにちは</p>
{name && <p>{name}さん</p>}
</div>
)
結果はこちら
変数に空文字を入れてみます。
const name = ''
return (
<div>
<p>こんにちは</p>
{name && <p>{name}さん</p>}
</div>
)
表示されなくなりました！完全に理解しました。
変数を数字にしてみます。
const count = 1
return (
<div>
<p>こんにちは</p>
{count && <p>あなたは{count}番です</p>}
</div>
)
同じように0を入れてみます。
const count = 0
return (
<div>
<p>こんにちは</p>
{count && <p>あなたは{count}番です</p>}
</div>
)
なんかいる…
なんで？
この&&という表記は論理演算子といい、JavaScriptには4つの論理演算子(||(OR) &&(AND) !(NOT) ??(Null合体))があります。
その中で、JavaScriptの&&(AND)は、次のように振舞います。 1
- 左から右にデータを評価
- それぞれのデータをbooleanに変換
- データがfalseに変換できる(falsyな)とき、評価をやめ、そのデータ本来の値を返す
- すべてのデータがtrueに変換できる(truthyな)とき、最後のデータを返す
例
console.log( 1 && 2 && 5 ) //5
console.log( 1 && null && 5 ) //null
ひとつでもfalsyが出てきた場合、式の真偽値がtrueになることはありません。
そのため、falsy以降の評価をしても無駄な処理になってしまいます。
そういった不要な処理をしないことによって、最小のコストで評価をする仕様を**「短絡評価」**と呼びます。
この短絡評価を利用して出し分けていたのです。
つまり？
変数とコンポーネントなどを&&でつないだとき、
変数がtruthyなときは最後のデータであるコンポーネントを返し、
変数がfalsyなときは変数の値がそのまま返る、ということです。
変数がないときに非表示にしてくれる！というわけではなく
falseに変換できた値を返しているだけです。
空文字やnull、undefinedは値が返ってきたところで見かけ上変化がないため
非表示になったように見えるのでした。
しかし、数字の0が返ってきた場合、そのまま数字が表示されてしまうため
上記のような結果になります。
解消したいよ
number型を使って出し分けがしたいときは、
!(NOT)を2つ重ねてboolean型に変換してあげるだけでOKです！
!(NOT)はデータをboolean型に変換し逆の値を返すので、
二重否定にすればそのデータのboolean型が取れます。
const count = 0
return (
<div>
<p>こんにちは</p>
{!!count && <p>{count}人目です</p>}
</div>
)
無事に出し分けられました！
おわりに
&&についてざっくりまとめました。何らかの参考になれば幸いです。
間違いがあればコメントいただけると助かります…！
Ateam Lifestyle Inc. Advent Calendar 2021 明日は @ryosuketter さんの記事です。お楽しみに！