Reactでもよく使う記法を問題を通して理解しよう！
Reactでよく使う記法なのですが、ifの条件式にはもちろん
あるstateの状態に合わせてコンポーネントや要素をレンダリングしたいときに
論理積は便利です。（以下の感じ）
const isLoggedIn = true;
return (
<div>
{isLoggedIn && <p>ようこそ、ユーザーさん！</p>}
</div>
);
JavaScriptの論理積（&&）は、左側の値がfalse（falsy）ならその値を返し、そうでなければ右側の値を返します。
この性質を利用して、しっかりと使いこなすために&&の挙動を理解するための問題を解いてみましょう！
▼参考までに
基礎編（簡単な例題）
問題1
次のコードを実行すると、console.logには何が出力されるでしょうか？
console.log(true && "Hello");
答えを見る
"Hello"
true && "Hello" の場合、左側がtrueなので右側の値が返されます。
問題2
次のコードを実行すると、console.logには何が出力されるでしょうか？
console.log(false && "World");
答えを見る
false
false && "World" の場合、左側がfalseなのでそのままfalseが返されます。
問題3
次のコードを実行すると、console.logには何が出力されるでしょうか？
console.log(0 && "JavaScript");
答えを見る
0
0はfalsyな値なので、その時点で評価が終わり0が返されます。
応用編（ちょっと難しい問題）
問題4
次のコードを実行すると、console.logには何が出力されるでしょうか？
console.log("" && "Truthy");
答えを見る
""（空文字）
空文字（""）はfalsyな値なので、&&の評価は左側で終わり、その値がそのまま返されます。
問題5
次のコードを実行すると、console.logには何が出力されるでしょうか？
console.log("Hello" && undefined && "World");
答えを見る
undefined
評価の順番：
-
"Hello"はtruthyなので次に進む -
undefinedはfalsyなので評価が止まり、そのままundefinedが返される -
"World"には到達しない
まとめ
JavaScriptの論理積（&&）は、左側の値がfalsyであればそこで評価が終わり、その値が返されます。
逆に左側がtruthyなら、右側の値がそのまま返されます。
この挙動を理解すると、短絡評価（short-circuit evaluation）を活用して、if文を減らしたり、より簡潔なコードを書くことができます。