目次
はじめに
JavaScriptは非常に便利な言語ですが、その柔軟性が時として混乱を招くこともあります。特に、演算子の優先順位についての理解が不十分な場合、思わぬバグを引き起こす可能性があります。
本記事では、Null 合体演算子(??)と文字列結合演算子(+)の間で発生する一般的な問題を取り上げ、その解決策を2つ（括弧の使用とテンプレート文字列の使用）提案します。
問題の発生
以下のようなReactコンポーネントがあります。このコンポーネントは、プロファイルから姓（familyName）と名（givenName）を取得し、それらを結合して表示します。
<DisplayProfileData
label="名前"
value={
profile?.familyName ?? '' + profile?.givenName ?? ''
}
/>
しかし、期待通りに動作しないことがあります。具体的には、givenNameが表示されず、familyNameのみが表示されることがあります。
問題の理解
この問題の原因はJavaScriptの演算子の優先順位にあります。JavaScriptでは、??（Null 合体演算子）は+（文字列結合演算子）よりも優先順位が低いです。したがって、profile?.familyName ?? '' + profile?.givenName ?? ''という表現は、profile?.familyNameと'' + profile?.givenNameの結果がnullやundefinedであれば''（空文字列）を返します。
したがって、profile?.familyNameがnullやundefinedでなければ、valueはprofile?.familyNameのみを表示します。その後、+ profile?.givenName ?? ''が評価されますが、+ profile?.givenNameがnullやundefinedであれば結果は''となり、それ以外の場合はNaN（JavaScriptの"Not a Number"）となります。
解決策 1: 括弧の使用
この問題を解決するためには、+演算子が??演算子よりも先に評価されるように、括弧を使って演算子の優先順位を明示的に指定する必要があります。
以下のように修正しましょう：
<DisplayProfileData
label="名前"
value={
(profile?.familyName ?? '') + (profile?.givenName ?? '')
}
/>
この修正により、familyNameとgivenNameの両方が表示されるようになります。
解決策 2: テンプレート文字列の使用
もう一つの解決策は、JavaScriptのテンプレート文字列を使用することです。テンプレート文字列は、変数や式を埋め込むことができる文字列リテラルです。バッククォート（`）で囲み、変数や式は${ }で囲んで埋め込みます。
以下のように修正しましょう：
<DisplayProfileData
label="名前"
value={
`${profile?.familyName ?? ''}${profile?.givenName ?? ''}`
}
/>
テンプレート文字列を使用すると、演算子の優先順位について心配する必要がなくなります。テンプレート文字列はリテラルの値をそのまま文字列として扱うため、+演算子や??演算子の挙動について考える必要がなくなります。
まとめ
JavaScriptの演算子優先順位は、コードが思わぬ動作をする原因となることがあります。特に、??と+を組み合わせて使用する際は、その優先順位に注意を払う必要があります。しかし、括弧を使用して明示的に優先順位を指定したり、テンプレート文字列を使用して問題を回避することも可能です。
以上が、Nullish coalescingと文字列結合を混ぜた際に起こる一般的な問題とその解決策です。この記事があなたのJavaScriptプログラミングに少しでも役立つことを願っています。
いいね！やコメントをいただけると嬉しいです！また、何か質問があればお気軽にどうぞ。