はじめに
JavaScriptで条件付きレンダリングや値の選択を行う際に、どの演算子を使用するべきか迷うことがあるかもしれません。
この記事では、三項演算子 と &&（論理AND）、&（ビットAND）、およびNullish Coalescing演算子（??）の違いと使い分けについて解説します。
1. 三項演算子（条件演算子）
三項演算子は、条件に基づいて値を選択するために使用される演算子です。
構文は condition ? expr1 : expr2 です。
下記のソースの形でReactで使用する経験は多いと思います。
{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つしかない場合はこちらの記述がシンプルです。
{company.salary && (
<Button
width='44px'
onClick={() => {
goToPage(
`/admin/company/${company.id}`
);
}}
>
編集
</Button>
)}
このコードは、company.salary が真の場合にのみ Button コンポーネントをレンダリングします。
company.salary が偽の場合、何もレンダリングされません。
ポイント
真の場合にのみ評価を続ける。
簡潔に条件付きレンダリングを実装できる。
偽の場合に null を明示的に返す必要がない。
2. & 演算子（ビットAND）
& 演算子は、ビット単位のAND演算を行います。
通常は数値の各ビットを比較し、両方のビットが1の場合に1を返します。
{(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 の場合に右辺の値を返します。
{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 に対してデフォルト値を提供するのに役立ちます。
一方、& 演算子はビット演算専用ですので、条件付きレンダリングには適しません。
正しい演算子を選択することで、コードの可読性と保守性を向上させることができます。
リンク