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

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

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


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

下記のソースの形でReactで使用する経験は多いと思います。
```javascript: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 が真の場合に「編集」ボタンを、偽の場合に「申し込み」ボタンをレンダリングします。

### ポイント
:::note info
**条件に基づいて2つの値から選択するのに適している。**
:::

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

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

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

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

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

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

### ポイント
:::note info
**真の場合にのみ評価を続ける。**
:::

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

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

## 2. & 演算子（ビットAND）
& 演算子は、**ビット単位のAND演算**を行います。
通常は数値の各ビットを比較し、両方のビットが1の場合に1を返します。
```javascript: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 コンポーネントをレンダリングします。

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


### ポイント

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

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

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

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

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

### ポイント
:::note info
**null または undefined に対してデフォルト値を設定するのに適している。**
:::

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


## 使い分けのまとめ

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

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

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

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


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

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

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

## リンク

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Conditional_operator

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Logical_AND

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_AND

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing