【React初心者向け】jsxでif文は使えないぜと言われた時に見て欲しい記事

初学者が最初に学ぶ条件分岐はif構文や三項演算子が一般的だと思うが、実は&& や || を使って、簡単な条件分岐を表現できます。

実務ではじめてReactを触った時に、「なんだこれ？？」ってなったので、紹介します！

※コードはjavascriptで書きたいと思いますmm

よくある使い方

if (条件1 && 条件2) {
  ~~ 処理 ~~
}

if (条件1 || 条件2) {
  ~~ 処理 ~~
}

React(jsx, tsx)などでの使い方

どちらかといえば、Reactでこの条件分岐を使うことが多いです(というか、ほぼReactでしか使った記憶ない)
jsx(tsx)だと、if文が使えないので、以下のようなやり方をすれば条件分岐が表現できます。

const Hoge = () => {
  // ログインしているユーザーを取得しているとする
  const user = fetchLoginUser()

  return(
    <>
      ...
        
      { user && (
          // ユーザーがいる場合に表示させるコンポーネント
        )
      }

      ...
    </>
  )
}

ただし上記は、表示する大枠は同じで、viewの一部分の表示を出し分けたい時に有用です。
そもそも、ユーザーがいるといないとで、表示させるコンポーネントが丸ごと違う場合は、return節を先に持ってきた方が良いと思います。

const Hoge = () => {
  // ログインしているユーザーを取得しているとする
  const user = fetchLoginUser()

  if (!user) {
    return(
      // ユーザーがいない場合に表示させるコンポーネント(ログインしろ的なアナウンスなど)
    )
  }
  
  // ユーザーがいる場合に表示させるコンポーネント
  return(
    <>
      ...
    </>
  )
}

なぜ、動くか？？

&&や|| は内部では、以下のような動いている

const condition1 = true
const condition2 = false

// condition1がtrueなら、condition2を返す
// condition1がfalseなら、その時点でcondition1を返す
condition1 && condition2

// condition1がtrueなら、その時点でcondition1を返す
// condition1がfalseなら、condition2を返す
condition1 || condition2

変数の定義でも使える

なぜ、動くかがわかれば、こんな使い方もできます。

const a = 'AAA' || 'BBB'

console.log(a) // AAA

const b = 'AAA' && 'BBB'

console.log(b) // BBB