React 速習チュートリアル

React ES6 三項演算子

1. 三項演算子 (Ternary Operator)

三項演算子(Ternary Operator)は、if / else 構文をより簡潔に記述できる条件演算子です。特に React の JSX 内で条件によって表示を切り替える(条件付きレンダリング)際に多用されます。

構文(Syntax):条件 ? <真(true)の場合の式> : <偽(false)の場合の式>

2. if / else を使用した例

まず、三項演算子を使わずに if / else を使用した場合のコードを見てみましょう。

// 以前の書き方:
if (authenticated) {
  renderApp(); // 認証済みの場合にアプリを描画
} else {
  renderLogin(); // 未認証の場合にログイン画面を描画
}

3. 三項演算子を使用した例

同じ処理を三項演算子で記述すると、以下のように非常にシンプルになります。

// 三項演算子による記述:
authenticated ? renderApp() : renderLogin();

React では、コンポーネントの return 文(JSX)の中でロジックを展開する場合、if 文は直接記述できませんが、この三項演算子を使うことでインラインでの条件分岐が可能になります。コードの可読性を高めるために必須のテクニックです。