フロントエンド開発において、三項演算子は最も多用される構文の一つです。しかし、ネストが深くなったり、可読性を損なうような書き方が横行したりすると、コードの保守性は著しく低下します。今回は、単なる「if文の代わり」ではない、実務レベルで推奨される三項演算子の活用術を共有します。
1. 責務を分離する「即時実行関数」の活用
三項演算子の中で複雑なロジックを展開するのはNGです。JSX内などで条件によってDOMを出し分ける際、条件式の中にロジックを詰め込むとテストが困難になります。
推奨されるアプローチは、条件式の結果を「変数」として事前に定義し、JSX内ではその変数を参照するだけにする手法です。
const isActionable = (user.isLoggedIn && user.hasPermission) || user.isAdmin;
return (
{isActionable ?
);
このように、判定ロジックを独立した変数に切り出すことで、コードの意図が明確になり、デバッグ時の特定も容易になります。
2. 「論理積（&&）」との使い分けを厳格化する
「条件が真の時だけレンダリングする」というケースにおいて、無理に三項演算子を使って `condition ?
この場合は、論理積演算子（&&）を使うのが定石です。ただし、数値の0がレンダリングされるというReact特有の落とし穴があるため、厳密な型チェックを意識しましょう。
{!!items.length && }
このように、条件を強制的にbooleanへ変換する（!!）パターンは、実務の現場でバグを未然に防ぐための強力な防御的プログラミングとなります。
3. 三項演算子のネストは「早期リターン」で回避する
三項演算子をネストさせると、コードの構造が一目で把握できなくなります。特に「AかつBかつCの場合」といった多重条件は、三項演算子の適した場所ではありません。
実務上の鉄則として、ネストが発生しそうな場合は「早期リターン（Early Return）」が可能な関数コンポーネントへ切り出すか、配列の `find` や `filter` を活用してロジックを平坦化してください。
まとめ：保守性はコードの「深さ」に宿る
三項演算子は強力なツールですが、コードの「深さ」を深くしてしまう側面もあります。フロントエンド・スペシャリストとして目指すべきは、「他のエンジニアが読み返した時に、条件分岐の意図が0.5秒で理解できるコード」です。
今回紹介した「ロジックの分離」と「演算子の適切な使い分け」を意識するだけで、あなたのコードレビューでの指摘事項は劇的に減るはずです。明日からの実装で、ぜひ「この三項演算子は本当に可読性を維持できているか？」と自問自答してみてください。