最近流行の条件分岐を減らしたプログラムを書く

2020年3月2日

ノウハウ

皆さんこんにちは、末ちゃんです。
今年の冬は暖かい日が多く、とても冬には感じられませんでしたね。

さて今回は最近何やら流行っている条件分岐を減らすプログラムについて書いてみようと思います。

条件分岐とは

プログラムにおける条件分岐とは、行ってしまえばif分岐のことです。

const userInfo = {
  gender: '男',
};

if (userInfo.gender === '男') {
  console.log('男です。');
} else if (userInfo.gender === '女') {
  console.log('女です。');
} else {
  console.log('ジェンダーレス...!?');
}

ちなみに条件分岐を減らすために三項演算子を使おう。
というような宣言がたまにみられますが、間違っています。
三項演算子も当然条件分岐です。

const userInfo = {
  gender: '男',
};

console.log(
  userInfo.gender === '男' ? console.log('男です。')
    : userInfo.gender === '女' ? console.log('女です。')
    : console.log('ジェンダーレス...!?')
);

お世辞にも見やすいとは言えないですね・・・。

条件分岐が嫌われる理由とは

そもそもどうしてこんなに条件分岐が嫌われるのでしょうか。
条件分岐には以下の問題点があります。

読むのに相応のコストが掛かる。
対象コードに辿り着くまでに頭の中で条件分岐を描かなければいけない。
影響範囲が増える。条件分岐後に複数の関数等を呼びだしていれば、その分影響範囲が増える。
テスト工数が増える。複雑になる。

平たく言うと複雑でややこしくなって、面倒になるってことですね。
よく勘違いされますが、「面倒」とか「面倒くさい」は、バグの温床になるし無駄な工数が増えるっていいたいってことです。

条件分岐を使用せずに書いてみる

条件分岐を使用せずに書いてみると、これだけのことなんですよね。

const userInfo = {
  gender: '男',
};

console.log(`${userInfo.gender}です。`);

ただし今回は男と女以外の値であれば、「ジェンダーレス…!?」と表示する仕様だと仮定します。
その場合はどうしても条件分岐を書かなければなりません。

const userInfo = {
  gender: '男',
};

if (userInfo.gender === '男' || userInfo.gender === '女') {
  console.log(`${userInfo.gender}です。`);
} else {
  console.log('ジェンダーレス...!?');
}

さっきよりマシになってはいない気がします。
これではまだ見づらいですよね。

条件分岐にmatch関数を使用し、正規表現で書いたらどうでしょう。

const userInfo = {
  gender: '男',
};

if (userInfo.gender.match(/^男|女$/)) {
  console.log(`${userInfo.gender}です。`);
} else {
  console.log('ジェンダーレス...!?');
}

うーん少しはマシになりましたかね。

でもまだ改善の余地があります。
以下ならどうでしょう？

const userInfo = {
  gender: '男',
};

const GENDERLESS_MSG = 'ジェンダーレス...!?';
const isGenderless = gender => !gender.match(/^男|女$/);

console.log(isGenderless(userInfo.gender) ? GENDERLESS_MSG : `${userInfo.gender}です。`);

かなりマシになったのではないでしょうか。