【React】関数型プログラミングを実践する上での、条件分岐の俺的ベストプラクティス

はじめに

React書いてますか？
ReactもFunctional Componentが主流になっていることにより、必然的に関数型で書き進めることになっていると思います。
そんな令和時代、毎度困る場面の一つが条件分岐。
js・tsの条件分岐といえば、if文、switch文、三項演算子など種類は様々。
どういうときにどの形式で書くのか毎度迷うし、その選定を間違えたら汚いコードになりがち。
そこで、今回は条件分岐を書き方の個人的ベストプラクティスを書いていきます！

基本方針

条件分岐の結果を何かの変数に収める

これを意識するだけで割とすぐに関数型っぽくなります。可読性やテスト容易性、変更容易性なども上がります。
これの代表的な例が三項演算子だったりします。

const userName = user ? user.name : 'ユーザーはいません';

ただ、これif文とかでもできたりします。
JavaScript入門段階でif文を習うとき、こんな例をよく見たりします。

const point = 80;
let result;

if (point >= 70) {
  result = '合格';
} else {
  result = '不合格';
}

console.log(result);
// 合格

でも、これをそのまま使おうとすると、この条件分岐の部分だけ手続き型になっていたり、letで定義された部分だけ値の不変性が保証されなかったり、分離しずらかったりします。つまり違和感ありありで扱いづらくなってしまいます。

この問題を解決するには、関数でラップしてあげるのがいいでしょう。

const judge = (point: number) => {
  if (point >= 70) {
    return '合格';
  }

  return '不合格';
};

条件分岐の結果をjudgeの返り値とすることで、条件分岐処理を関数judge()で収めることができます。
また、関数内ではreturnで処理が終わり、その後ろは基本的に無視されます。これを利用すれば、上記の例のようにelseを省くことができます。

tsxの返り値（UI表現部分）で条件分岐を書かない

これは後に例で示しますが、UI部分が長く複雑になる要因となります。また、UIとロジックで責務の分離もしにくくなります。

場面別対処法

1回の条件分岐のみ、条件分岐内で何かしらの処理がいらないとき

シンプルに三項演算子を使いましょう。

例えば、別ファイルでgetUserというユーザー取得関数を定義したとして、そのユーザー名を表示するコンポーネントを作るとしましょう。

Profile.tsx

import { FC } from 'react';
import { useQuery } from '@tanstack/react-query';
import getUser from 'domains/getUser';

type Props = {
  userId: number;
};

const Profile: FC<Props> = (props) => {
  const { userId } = props;
  const getSpecificUser = async () => {
    const specificUser = await getUser(userId);

    return specificUser;
  };
  const { data: user } = useQuery(['user', userId], getSpecificUser);

  const userName = user ? user.name : 'ユーザーはいません';

  return <p>ユーザー名：{userName}</p>;
};

export default Profile;

react-queryを使ってレンダリング時にユーザー取得処理をしています。また、Propsで取得するユーザーIDを受け取っている状況です。
取得した情報をuserで受け取っています。もし対象IDのユーザーが取得されていたらユーザー名を、ユーザーが存在しなかったら「ユーザーはいません」という文字列をuserNameで受け取っています。

const userName = user ? user.name : 'ユーザーはいません';

この条件分岐では、userという値のみ見ればよく、また値を返すまでに別処理を挟むことはないので、これで十分でしょう。

また、この条件分岐をpタグ内で処理することは避けましょう。

return <p>ユーザー名：{user ? user.name : 'ユーザーはいません'}</p>;

こうしてしまうと可読性がグッと下がります。これを許してしまうとtsxファイル内のHTMLを返している部分が複雑になっていきます。
また、ロジック部分とUI部分で分離しにくくなり、保守性も下がります。

条件分岐が階層になっている場合や、3択以上あるとき

この時は三項演算子はふさわしくありません。if文を使いましょう。

上記の例から、性別により異なるクラス名をpタグにつける場合を考えましょう。
ユーザー存在判定→性別判定と2階層の条件分岐となります。

Profile.tsx

/* eslint-disable no-nested-ternary */
import { FC } from 'react';
import { useQuery } from '@tanstack/react-query';
import getUser from 'domains/getUser';

type Props = {
  userId: number;
};

const Profile: FC<Props> = (props) => {
  const { userId } = props;
  const getSpecificUser = async () => {
    const specificUser = await getUser(userId);

    return specificUser;
  };
  const { data: user } = useQuery(['user', userId], getSpecificUser);

  const userName = user ? user.name : 'ユーザーはいません';
  const genderColor = user ? (user.gender === '男性' ? 'blue' : 'pink') : '';

  return <p className={genderColor}>ユーザー名：{userName}</p>;
};

export default Profile;

これを三項演算子で書いてしまうと、可読性が下がります。
基本的に、三項演算子は純粋な2択の条件分岐しか向いていません。
ESLintのエラーでもno-nested-ternaryというのが存在するくらいです。

こういうときは、2階層の条件分岐を関数でラップして処理させましょう。

Profile.tsx

import { FC } from 'react';
import { useQuery } from '@tanstack/react-query';
import getUser from 'domains/getUser';

type Props = {
  userId: number;
};

const Profile: FC<Props> = (props) => {
  const { userId } = props;
  const getSpecificUser = async () => {
    const specificUser = await getUser(userId);

    return specificUser;
  };
  const { data: user } = useQuery(['user', userId], getSpecificUser);

  const userName = user ? user.name : 'ユーザーはいません';
  const genderColor = () => {
    if (!user) {
      return '';
    }

    if (user.gender === '男性') {
      return 'blue';
    }

    return 'pink';
  };

  return <p className={genderColor()}>ユーザー名：{userName}</p>;
};

export default Profile;

genderColor内で条件分岐処理を行なっています。

const genderColor = () => {
  if (!user) {
    return '';
  }

  if (user.gender === '男性') {
    return 'blue';
  }

  return 'pink';
};

実は2階層の条件分岐処理なのですが、returnと組み合わせることでif文を入れ子にする必要がなく、シンプルに記述ができます。

関数の記述の部分で行数が増えて読みにくくなっているように思えますが、そういう場合は別ファイルで定義してimportしてしまえばよりシンプルになります。
これが関数でラップすることのもう一つのメリットで、責務を分離して１ファイルを小さく保つことも容易になります。

条件分岐により別のUIを出力したいとき

if文で出力するUIを切り替えましょう。

上記の例から、ユーザーが存在するときは詳細なプロフィールを出力し、存在しないときはメッセージのみ出力する場合を考えましょう。

Profile.tsx

import { FC } from 'react';
import { useQuery } from '@tanstack/react-query';
import getUser from 'domains/getUser';

type Props = {
  userId: number;
};

const Profile: FC<Props> = (props) => {
  const { userId } = props;
  const getSpecificUser = async () => {
    const specificUser = await getUser(userId);

    return specificUser;
  };
  const { data: user } = useQuery(['user', userId], getSpecificUser);

  if (!user) {
    return <p>ユーザーはいません</p>;
  }

  const { name, gender, age } = user;
  const genderColor = gender === '男性' ? 'blue' : 'pink';

  return (
    <div className={genderColor}>
      <p>ユーザー名：{name}</p>
      <p>性別：{gender}</p>
      <p>年齢：{age}</p>
    </div>
  );
};

export default Profile;

これまでの例と大きく変わっています。

if (!user) {
  return <p>ユーザーはいません</p>;
}

const { name, gender, age } = user;
const genderColor = gender === '男性' ? 'blue' : 'pink';

この条件分岐でuserがundefinedの場合の出力するUIを定義しています。
実はこの条件分岐により、上記のif文以降でuserがundefinedである可能性を消してくれています。
よって型の安全性が担保されたため、前の例で個別で処理していたユーザーが存在するかどうかのチェックをする必要がなくなります。
なのでuserのプロパティも分割代入でシンプルに記述でき、付与するクラス名の判定も三項演算子で1行で書けるようになっております。

これは、コンポーネント自体が関数（=functional component）であることを利用していて、コンポーネント内全体で大きく型ガードができます。

おわりに

いかがでしたか？
こちらに関しては好みがあると思いますので、上記を参考に各々で調整していただければと思います。
また、もっとこうした方がいい！というのがありましたら意見いただけると助かります！コメントお待ちしております。
twitterのフォローもお願いいたします！
それでは！

参考

りあクト！ TypeScriptで始めるつらくないReact開発 第4版【① 言語・環境編】
りあクト！ TypeScriptで始めるつらくないReact開発 第4版【② React基礎編】