【初心者用】Reactでよく使用される三項演算子の例

はじめに

三項演算子は少し難しく感じることがありますが、適切に使用すると簡潔で読みやすいコードを書くことができます。以下に、よく使われる三項演算子を紹介しますので、初学者の方はこれらのパターンから理解できるようにしてきましょう

1. 条件に基づいて値を代入する

const age = 20;
const canDrink = age >= 21 ? "Yes" : "No";

2. nullチェックと同時にデフォルト値を設定する

const username = user.name ? user.name : "Anonymous";

3. 条件に基づいてCSSクラスを切り替える（React等のフレームワークでよく使用）

<div className={isActive ? "active" : "inactive"}>
  Content
</div>

4. 条件付きメソッド呼び出し

const result = isValid ? processData() : handleError();

5. 簡単な算術演算

const absoluteValue = number < 0 ? -number : number;

6. 配列内の条件付き要素追加:

const items = [
  'Always present item',
  isSpecial ? 'Special item' : null,
  'Another always present item'
].filter(Boolean);

この例では、isSpecialがtrueの場合のみ'Special item'が配列に含まれます。filter(Boolean)はnullやundefinedを除去します。

7. オブジェクトのプロパティを条件付きで追加

const user = {
  name: 'John',
  ...(isAdmin ? { role: 'admin' } : {})
};

isAdminがtrueの場合のみ、roleプロパティがオブジェクトに追加されます。

8. 条件付きのPromise chain

someAsyncFunction()
  .then(result => result.success ? processSuccess(result) : Promise.reject(result.error))
  .catch(handleError);

この例では非同期処理の結果に基づいて成功時の処理を続けるか、エラーを発生させるかを決定しています。

9. API レスポンスの処理（null合体演算子）

const response = await fetchUserData();
const username = response.user?.name ?? 'Anonymous';

10. JSXでの条件付きレンダリング（論理AND演算子）

<div>
  {isLoggedIn && <WelcomeMessage />}
  {!isLoggedIn && <LoginPrompt />}
</div>

9と10は三項演算子ではありませんが、同様の条件付きロジックを実現する簡潔な方法です。

おわりに

後半は少し難しかったかもしれませんが、ひとまずここに挙げているパターンをパッと見て理解できるようになれば、React使うのにも抵抗感はなくなるレベルかなと思います