React（JSX）において、論理積演算子「&&」を用いた条件付きレンダリングを行う際、意図しない「0」が出力されてしまう事象が発生しました。 この記事では、その実際のコードと問題点・解決策をまとめています。

実際のコード

{ (isStaff && isSalesDev) && (
  <p>trueのときに表示されます</p>
)}

変数isStaffと変数isSalesDevには数値型の「0」か「1」が格納されています。 この2つの変数がtrueの場合に、htmlを出力する意図で実装していました。実際には先述した通り意図しない「0」が出力されてしまいました。

問題点：左辺が偽（Falsy）のときにその値が返される

まずFalsyとは、ある値がfalseに変換できる場合の事を指し、その値は偽値 (falsy) と呼ばれます。 今回の問題としては、式の理解不足にありました。論理積演算子「&&」の仕様は以下になります。

  • 左から右へ評価したときに、最初に出会った偽値（Falsy）のオペランドの値をそのまま返す。
  • すべてのオペランドが真値（Truthy）であった場合は、最後のオペランドの値を返す。

よって、今回の意図しない挙動は変数isStaffの値が「1」で、変数isSalesDevの値が「0」の場合に発生していました。

修正したコード

{ (!! (isStaff && isSalesDev)) && (
  <p>trueのときに表示されます</p>
)}

isStaff && isSalesDev の評価結果（数値の0または1）に対して、カッコの先頭に二重否定「!!」を記述することで、明示的にBoolean型（真偽値）へと変換しています。

  • isStaff && isSalesDev の結果が 0 の場合 → !!0 → false
  • isStaff && isSalesDev の結果が 1 の場合 → !!1 → true

これにより、値が「0」のときは式の結果が数値の「0」ではなく論理型の「false」になるため、Reactが画面に何も出力しなくなり、問題を解決することができます。


関連記事