【React】オプショナルチェイニング派？AND演算子派？

  • 投稿日
  • 更新日
  • 著者 アバター しんぺー
  • カテゴリー JavaScript
  • カテゴリー React

Reactで同じような処理をオプショナルチェーンで記述しているものと、AND演算子で記述しているものがありました。
どちらが良いのでしょうか？

オプショナルチェイニング

プロパティやメソッドが存在しない場合に、エラーにならずundefinedを返してくれます。
簡単に記述できていいですね。

function App({ result }) {
    return (
      <div className="container">
        {result?.map((item, index) => (
          <ul key={index}>
            <li>User ID: {item.userId}</li>
          </ul>
        ))}
      </div>
    )
  }

AND演算子

こちらもプロパティやメソッドが存在しない場合エラーにならず、オプショナルチェイニングと同じような挙動ですがコードは少し長くなります。

  function App({ result }) {
    return (
      <div className="container">
        {result && result.map((item, index) => (
          <ul key={index}>
            <li>User ID: {item.userId}</li>
          </ul>
        ))}
      </div>
    )
  }

まとめ

個人的にはオプショナルチェイニングが簡潔に記述できて良いかなと思いました。
またオプショナルチェイニングは2020年に導入されたため、新しい記述方法になります。
従来の記述より短く使いやすく、簡潔にできそうです。