【React】でよく使う条件分岐の記述方法(&&, ??(Null合体演算子),三項演算子)

2022年11月28日React

Reactでよく使う条件分岐の記述方法(&&, ??(Null合体演算子),三項演算子)を紹介します。

普通のif文で書いた場合

配列がabcという文字列の場合は、◎をつけて表示するという条件の場合、
通常のif文では以下のようになります。

  const list = animals
    .filter((animal) => animal.indexOf(filteredVal) !== -1)
    .map((animal) => {
      if(animal === "abc") {
        return <li key={animal}>{animal + "◎"}</li>
      } else {
        return <li key={animal}>{animal}</li>
      }
  });

これを三項演算子で書き換えると以下のようになります。

三項演算子で書いた場合

    // .map((animal) => {
    //   if(animal === "abc") {
    //     return <li key={animal}>{animal + "◎"}</li>
    //   } else {
    //     return <li key={animal}>{animal}</li>
    //   }
    .map((animal) => {
        return <li key={animal}>{animal === "abc" ? `${animal}◎` : animal}</li>

上のようによりスッキリした書き方になります。

&&で書いた場合

    // .map((animal) => {
    //     return <li key={animal}>{animal === "abc" ? `${animal}◎` : animal}</li>
    .map((animal) => {
        return <li key={animal}>{animal === "abc" && "◎"}</li>
  });

&&以下はtrueのときのみ表示されるため、空文字などを記載せずにスッキリ書くことができます。

??(Null合体演算子)が必要な場合

Null合体演算子は、A ?? Bのとき、値がnullかundefinedの場合以外はA、nullかundefinedの場合はBとなります。
たとえば、配列内で空文字などがあった場合、filterを通すとエラーになってしまうことがあります。
そのようなエラーを防ぐために、null,undefinedのときは、空文字を定義するなどの記述が、Null合体演算子で可能になります。

    .map((animal) => {
      {
        const animalStr = animal ?? "";
        return <li key={animal}>{animal === "abc" && "◎"}</li>;
      }

上のようにすれば、空文字のときは空文字を入れることで、エラーを解消できます。
NULL合体演算子の詳しい説明は、NULL合体演算子(Nullish coalescing operator) ‘??’の具体例を参照してみてくさだい。