【 JavaScript / TypeScript 】の条件付き演算子の使い分け: 三項演算子・&&, &, および Nullish Coalescing 演算子

はじめに

JavaScriptで条件付きレンダリングや値の選択を行う際に、どの演算子を使用するべきか迷うことがあるかもしれません。

この記事では、三項演算子 と &&（論理AND）、&（ビットAND）、およびNullish Coalescing演算子（??）の違いと使い分けについて解説します。

1. 三項演算子（条件演算子）

三項演算子は、条件に基づいて値を選択するために使用される演算子です。
構文は condition ? expr1 : expr2 です。

下記のソースの形でReactで使用する経験は多いと思います。

script.js

{company.salary ? (
  <Button
    width='44px'
    onClick={() => {
      goToPage(
        `/admin/company/${company.id}`
      );
    }}
  >
    編集
  </Button>
) : (
  <Button
    width='44px'
    onClick={() => {
      goToPage(
        `/admin/company/${company.id}/apply`
      );
    }}
  >
    申し込み
  </Button>
)}

このコードは、company.salary が真の場合に「編集」ボタンを、偽の場合に「申し込み」ボタンをレンダリングします。

ポイント

条件に基づいて2つの値から選択するのに適している。

ネストが深くなると読みにくくなる可能性がある。

2. && 演算子（論理AND）

&& 演算子は、左辺が真の場合にのみ右辺を評価する論理AND演算子です。
条件付きレンダリングでよく使用されます。

三項演算子の場合は左右の切り分けに用いられますが、判定が1つしかない場合はこちらの記述がシンプルです。

script.js

{company.salary && (
  <Button
    width='44px'
    onClick={() => {
      goToPage(
        `/admin/company/${company.id}`
      );
    }}
  >
    編集
  </Button>
)}

このコードは、company.salary が真の場合にのみ Button コンポーネントをレンダリングします。

company.salary が偽の場合、何もレンダリングされません。

ポイント

真の場合にのみ評価を続ける。

簡潔に条件付きレンダリングを実装できる。

偽の場合に null を明示的に返す必要がない。

2. & 演算子（ビットAND）

& 演算子は、ビット単位のAND演算を行います。
通常は数値の各ビットを比較し、両方のビットが1の場合に1を返します。

script.js

{(company.salary & 1) === 1 ? (
  <Button
    width='44px'
    onClick={() => {
      goToPage(
        `/admin/company/${company.id}/plan/${currentContract.baseContract.id}`
      );
    }}
  >
    編集
  </Button>
) : null}

このコードは、company.salary が数値で、かつその値の最下位ビットが1である場合にのみ Button コンポーネントをレンダリングします。

ビットとは？
コンピュータで使われる情報の最小単位です。
ビットは二進数の一桁であり、0または1の値を取ります。
ビットが集まることで、より大きなデータを表現することができます。

ポイント

ビット演算のため、通常は条件付きレンダリングには使用しない。

非数値に対して使用すると予期しない動作を引き起こす。

3. Nullish Coalescing 演算子（??）

Nullish Coalescing演算子（??）は、左辺が null または undefined の場合に右辺の値を返します。

script.js

{company.salary ?? (
  <Button
    width='44px'
    onClick={() => {
      goToPage(
        `/admin/company/${company.id}`
      );
    }}
  >
    編集
  </Button>
)}

このコードは、company.salary が null または undefined の場合に返します。

ポイント

null または undefined に対してデフォルト値を設定するのに適している。

条件付きレンダリングには直接使用しない。

使い分けのまとめ

三項演算子
条件に基づいて2つの値から選択するのに適している。
条件付きレンダリングや値の選択に便利。

&& 演算子
条件付きレンダリングや条件付きでの値設定に使用。左辺が真の場合にのみ右辺を評価。

& 演算子: ビット演算に使用。条件付きレンダリングには不適。
ビット演算に使用。条件付きレンダリングには不適

Nullish Coalescing 演算子（??）
左辺が null または undefined の場合にデフォルト値を設定するのに使用。

まとめ

ReactやJavaScriptでの条件付きレンダリングや値設定の場面では、適切な演算子を選択することが重要です。

&& 演算子は条件付きレンダリングで広く使用され、Nullish Coalescing 演算子は null や undefined に対してデフォルト値を提供するのに役立ちます。
一方、& 演算子はビット演算専用ですので、条件付きレンダリングには適しません。

正しい演算子を選択することで、コードの可読性と保守性を向上させることができます。

リンク