JavaScriptの三項演算子とは？

JavaScriptでコードを簡潔に記述したい場合、三項演算子は非常に便利なツールです。この記事では、三項演算子の基礎から応用、そして注意点まで詳しく解説していきます。

三項演算子の基本

三項演算子は、JavaScriptで唯一3つのオペランドをとる演算子であり、条件分岐を一行で記述することができます。その構文は以下の通りです。

条件式 ? 真の場合の式 : 偽の場合の式

動作としては、まず「条件式」が評価されます。もし条件式が真と評価された場合、「真の場合の式」が実行され、その結果が式の値となります。逆に、条件式が偽と評価された場合、「偽の場合の式」が実行され、その結果が式の値となります。

例えば、変数に格納された数値が偶数か奇数かを判定する場合、以下のように記述できます。

<script>
  const num = 6;
  const result = (num % 2 === 0) ? "偶数です" : "奇数です";
  console.log(result); // 出力: 偶数です
</script>

この例では、変数numの値が2で割り切れるかどうかを条件式(num % 2 === 0)で判定しています。もし割り切れる場合（真）、変数resultに"偶数です"が代入され、そうでない場合（偽）は"奇数です"が代入されます。

三項演算子を利用する主なメリットは以下の点が挙げられます。

便利である一方で、以下の点に注意して使用しないと、コードの可読性を損なう可能性があります。

三項演算子は、条件に応じて異なる値を変数に代入するだけでなく、様々な場面で活用できます。

例えば、ユーザーの状態に応じてボタンの表示を切り替える場合、以下のように記述できます。

<button class="btn">
  <span>{ isActive ? '有効' : '無効' }</span>
</button>

この例では、変数isActiveの値によってボタン内のテキストが動的に変化します。このように、三項演算子を使用することで、簡潔に条件に応じたHTML要素の操作を行うことができます。

この記事では、JavaScriptの三項演算子について解説しました。基本的な使い方から注意点、応用例まで理解することで、より簡潔で可読性の高いコード 작성に役立ててください。

A1. ほとんどの場合、体感できるほどの処理速度の差はありません。パフォーマンスよりもコードの可読性を重視して使い分けましょう。

A2. はい、ネストして使用することができます。ただし、ネストが深くなるとコードが読みにくくなるため、注意が必要です。

A3. はい、if文や論理演算子を使った式でも同様の処理を実現できます。状況に応じて最適な構文を選択しましょう。

その他の参考記事:JavaScript 演算子