条件付きレンダリングは、特定の条件に基づいて要素を動的に表示または非表示にすることで、Reactコンポーネントの柔軟性を高める手法。ここでは、標準的な2つの条件付きレンダリング手法である**&&演算子と三項演算子**について解説。

&&演算子による条件付きレンダリング

構文

Reactにおける&&演算子は、条件付きレンダリングに使用され、JavaScriptのif文と同様の働きを持つ。特定の条件に基づいて要素をレンダリングすることが可能。

condition && (<p>element</p>)

この手法は、特定の条件がtrueの場合のみ要素を表示したい場合によく利用される。

例

試験に合格した学生に通知を表示したい場合の例。学生のスコアが60点を超えていれば、その学生の名前とスコアを含む成功メッセージを表示。

const Notification = (props) =>
  props.mark > 60 && (
    <p>
      {props.name} has passed the test with {props.mark} points.
    </p>
  );

Notificationコンポーネントは、<p>プロップの値に基づいて段落mark要素を条件付きでレンダリング。

アプリ全体のコード

Emilyのスコアは60pts未満のため表示されません。

三項演算子による条件付きレンダリング

構文

三項演算子（? ... : ...）を使用した条件付きレンダリングは、もう一つの強力な手法です。条件に基づいて要素を簡潔にレンダリングできます。

condition ? (true_element) : (false_element)

この方法は、条件に応じて2つの異なる要素から選択する場合に適しています。

例

ユーザーがログインしているかどうかによって異なる挨拶を表示したい場合を考えます。Greetingコンポーネントは、三項演算子を使った条件付きレンダリングを示しています。

const Greeting = (props) =>
  props.loggedIn ? (
    <p>Welcome to the home page, {props.name}.</p>
  ) : (
    <p>Hello {props.name}, could you please log in.</p>
  );

この例では、GreetingコンポーネントはloggedInプロップの値に応じてユーザーへの挨拶を切り替えます。

アプリ全体のコード