この記事はただいま修正中です
## 1. JavaScriptの&&の基本的な挙動
JavaScriptにおける&&は論理演算子として、2つの条件が両方ともtrueである場合にのみ、全体がtrueになります。もし左側または右側の条件がfalseの場合、その時点で演算結果はfalseとなります。
例：
qiita.rb
console.log(true && true) // 結果は true
console.log(false && true) // 結果は false
console.log(true && false) // 結果は false
console.log(false && false) // 結果は false
&&演算子は左辺がfalseの場合、右辺を評価することなく結果がfalseになります。
## 2. JSX内での&&の使い方
ReactのJSXでは、&&は条件付きレンダリングに使われます。左辺の条件がtrueの場合のみ、右辺の要素が表示されます。右辺の要素はそのまま評価され、条件がfalseの場合は何も表示されません。
qiita.rb
{state !== 'button' && (
<button>
ボタンです
</button>
)}
3. JSXでは&&の左辺に数値を置かない
&&を使う際に、左辺が0などの数値だと、思わぬ挙動をすることがあります。例えば：
qiita.rb
messageCount && <p>New messages</p>
messageCountが0だと、0がそのまま表示されてしまいます。これは、JavaScriptが0を偽として扱う一方で、そのまま評価して表示してしまうためです。
修正方法：
qiita.rb
messageCount > 0 && <p>New messages</p>
左辺を真偽値に変換することで解決できます：
公式ドキュメント