条件付きレンダーの適切な書き方を調べて考えてまとめてみる

はじめに
AND演算子（&&）
AND演算子（&&）を用いるべきケース
- より短い条件式の場合
三項演算子
三項演算子を用いるべきケース
- trueとfalseで分岐を行うような少し複雑な条件の場合
- 表示する要素が2つだけの場合
OR演算子（||）
OR演算子（||）を用いるべきケース
- 複数の条件の内、いずれかが真の場合にレンダリングしたい場合
おわりに
- コメント
  - ◇ プログラミングスクールのご紹介 (卒業生より)
参考

はじめに

条件付きレンダーの書き方で考えてしまうケースがあるため、基準を明確にしておきたいと思います。

本記事ではReactの条件付きレンダーに関する説明と方法を簡単に解説していきます。

条件付きレンダー

React における条件付きレンダーは JavaScript における条件分岐と同じように動作します。ifもしくは条件演算子のような JavaScript 演算子を使用して現在の状態を表す要素を作成すれば、React はそれに一致するように UI を更新します。

早期リターンと演算子は、どちらもコードの可読性を高め、冗長性を排除するために使われる手法ですが、どちらを使うかは状況によって異なります。

早期リターン

早期リターンは、条件分岐がtrueである場合、それ以降の処理を実行せずに戻り値を返すという手法です。

この手法を使うことで、コードの読みやすさが向上し、if文のネストを深くすることを避けることができます。特に、条件が1つしかない場合や、条件に応じて異なる戻り値が必要な場合に適しています。

例) データが存在しない場合はコンポーネントを返さず早期リターンでnullを返す

function DataDisplay({ data }: DataDisplayProps): JSX.Element | null {
  if (!data) {
    return null;
  }

  return (
    <div>
      {/* データを表示するためのコンポーネント */}
    </div>
  );
}

上記により不要なコードの実行を防ぎ、コードの可読性も向上させることができます。早期リターンのメリットは不必要な入れ子や冗長なelse文を避けることができます。データが存在しない場合、nullを返していますが代わりにデータがない場合にのみ表示するのようなコンポーネントを出し分けることも可能です。

  if (!data) {
    return <noDataInfomation /> // 早期リターンにより、データが存在しない場合にNoDataInformationコンポーネントを返す
  }

早期リターンを用いるべきケース

単純な条件分岐の場合（ネストを防ぐ）

単純な条件分岐でコンポーネントを返すだけであれば早期リターンで書くのがわかりやすいです。

例外的なケースを先にreturnすることで、メインロジックのネストを浅くすることができるため、可読性の向上に繋がります。

関数の実行が多くなる場合（パフォーマンスを向上させる）

関数が実行される回数が多くなる場合は、早期リターンを使用してパフォーマンスを向上させることができます。

基本的に末尾行まで処理が実行されることが期待されるため、長いコードの途中にreturnがあると、全体の見通しが悪くなったりバグを生みやすくなるリスクがあります。

早期returnは名前の通りですが早期にreturnする必要があるため、初期に配置出来るようなコードでは積極的に使っていきましょう。

AND演算子（&&）

AND演算子（&&）は、左辺の値の評価結果がtrueならば、右辺の評価結果を返します。一方で、左辺の値の評価結果がfalseならば、そのまま左辺の値を返します。

// 左辺はtrueであるため、右辺の評価結果を返す
console.log(true && "右辺の値"); // => "右辺の値"
// 左辺がfalseであるなら、その時点でfalseを返す
// 右辺は評価されない
console.log(false && "右辺の値"); // => false

AND演算子（&&）は、左辺の評価がfalseの場合、オペランドの右辺は評価されません。次のように、左辺がfalseの場合は、右辺に書いたconsole.log自体が実行されません。

// 左辺がtrueなので、右辺は評価される
true && console.log("このコンソールログは実行されます");
// 左辺がfalseなので、右辺は評価されない
false && console.log("このコンソールログは実行されません");

AND演算子（&&）を用いるべきケース

より短い条件式の場合

以下ではisLoadingがtrueの場合にのみ右辺のメッセージが表示されます。

{isLoading && <p>Loading...</p>}

AND演算子は一つの結果にフォーカスしたいような場面で適しています。

Reactの入れ子構造の中で条件付きレンダリングを行う場合、入れ子が深くなってしまうと可読性が落ちてしまうため、場面に応じて三項演算子よりAND演算子を使うことをおすすめします。

三項演算子

一方、三項演算子は、if文を1行で表現することができます。この手法を使うことで、if文を短く記述でき、コードの可読性が向上します。特に、単純な条件分岐が必要な場合に適しています。

例えば、以下のように書くことができます。

const DataDisplay: React.FC = ({ data }) => {
  return (
    data ? (
      <div>
        {/* データを表示するためのコンポーネント */}
      </div>
    ) : <NoDataInformation />
  );
};

三項演算子を用いるべきケース

trueとfalseで分岐を行うような少し複雑な条件の場合

&&ではfalseの場合の処理を書く場合に一回で書くことができず該当の真偽値を反転させたりする必要があるため全く向いていません。

isLoggedIn && <LogoutButton onClick={handleLogout} />
!isLoggedIn && <LoginButton onClick={handleLogin} />

三項演算子の場合だと以下のようにtrueとfalseでわかりやすく条件分岐を読むことが可能です。

{isLoggedIn ? (
  <LogoutButton onClick={handleLogout} />
) : (
  <LoginButton onClick={handleLogin} />
)}

表示する要素が2つだけの場合

三項演算子のデメリットとしてはネストが深くなることです。表示する要素が複数ある場合は、AND演算子を使用した方がコードがスッキリします。

OR演算子（||）

OR演算子（||）は、左辺の値の評価結果がtrueならば、短絡評価で左辺の値を返します。

一方で、左辺の値の評価結果がfalseであるならば、右辺の評価結果を返します。

// 左辺がtrueなので、左辺の値が返される
console.log(true || "右辺の値"); // => true
// 左辺がfalseなので、右辺の値が返される
console.log(false || "右辺の値"); // => "右辺の値"

OR演算子（||）は、左辺の評価がtrueの場合、オペランドの右辺を評価しません。

OR演算子（||）を用いるべきケース

複数の条件の内、いずれかが真の場合にレンダリングしたい場合

以下はisActiveがdataとisLoadingのどちらかがtrueであればデータリストが表示される例です。

const DataDisplay: React.FC<Props> = ({ data, isLoading }) => {
  return (
    data || isLoading ? (
      <DataList data={data} />
    ) : (
      <NoDataInformation />
    )
  );
}

上記の場合、表示するコンポーネントを分岐させているためOR演算子と三項演算子と組み合わせています。複雑な条件式を書く場合にOR演算子を用いられることがあります。

おわりに

本記事の内容は以上になります！

Reactでは頻出する実装のため、要点だけ押さえておくと良いと思いました。参考になったり学びのきっかけになりますと幸いです。

間違いがありましたら修正いたしますので、ご指摘ください。

興味があれば他の記事も更新していきますので是非ご覧になってください♪

◇ プログラミングスクールのご紹介 (卒業生より)

https://runteq.jp/r/ohtFwbjW

ご不明な点ありましたらお気軽にコメントどうぞ！

Yanonoblog!

こつこつと