条件付きレンダリングの基本概念

条件付きレンダリングとは、特定の条件に応じて表示するコンテンツを動的に切り替える手法です。React.jsでは、`if`文や三項演算子などを使って条件に応じたレンダリングができます。

  
  function Greeting(props) {
    const isLoggedIn = props.isLoggedIn;
    if (isLoggedIn) {
      return 
Welcome back!
;
    }
    return 
Please sign up.
;
  }
  

条件式を使ったレンダリングの方法

`if`文や三項演算子を用いて、条件によって表示するコンテンツを動的に切り替えます。

  
  function Greeting(props) {
    return props.isLoggedIn ? 
Welcome back!
 : 
Please sign up.
;
  }
  

複雑な条件式を使ってUIを動的に切り替える

複雑な条件式を使って、より高度な条件付きレンダリングを実現できます。例えば、複数の条件に基づいて異なるコンポーネントを表示することができます。

  
  function StatusMessage(props) {
    const { isOnline, isLoggedIn } = props;

    if (!isLoggedIn) {
      return 
Please sign in
;
    }

    return isOnline ? 
You are online
 : 
You are offline
;
  }
  

React.jsの条件付きレンダリング完全ガイドのまとめ

この記事では、React.jsの条件付きレンダリングについて学びました。条件式を使って動的に表示を切り替える方法を学び、複雑なUIを効率的にレンダリングするスキルを身につけましょう。