クソコードの闇を断ち切れ！~条件式の最適化と可読性向上~

はじめに

そこまでクソコードではないですが、避けられるのであれば避けたいクソコードを紹介します。

完全にタイトル負けです。
GPT君が考えてくれたので私は悪くありません。

クソコードを紹介するぜ！

バリデーションを行うコードです。
入力値に問題がなければ「入力OK」、問題があれば「入力NG」となります。

if ((courseList.value && commentInput.value && isCommentRequired) || (courseList.value && !isCommentRequired)) {
    // 入力OK
} else {
    // 入力NG
}

クソコードを浄化するぜ！

まず、適切に改行をして構造をわかりやすくしたいですね。

if (
    (courseList.value && commentInput.value && isCommentRequired)
    || (courseList.value && !isCommentRequired)
) {
    // 入力OK
} else {
    // 入力NG
}

すると、条件が一部重複していることに気づくと思います。
こういうのは大体条件を言葉で整理できていないために発生します。

コードを追っていくと、下記のことがわかりました

• courseList.value は、セレクトボックスで選択したコースの値
• commentInput.value は、フォームで入力されたコメントの値
• isCommentRequired は、コメント入力が必須かどうかを判別するフラグ

これを元にコードを浄化すると

if (
      courseList.value
      && (isCommentRequired ? commentInput.value : true)
) {
    // 入力OK
} else {
    // 入力NG
}

なんということでしょう！
とても簡潔なコードになりましたね！

条件式を読んでいくと、

• courseList.value は必須です
• コメント入力が必須であれば、commentInput.value も必須です

という内容であることがわかります。

まとめ

今回は簡単な例を挙げたので、「これくらいならそのままで良い」と感じる人もいるかもしれません。自分も「これくらいならいいか」と思わないでもないです。

ですが、このような状態からいくつも条件を継ぎ足されて悪魔合体を繰り返し、恐ろしいバケモンに進化してしまうこともあります。

条件が一行に押し込まれていて、改行したら同じ条件がいくつか書いてあるのを見た時悲しい気持ちになりました。

なので可能であれば、芽は早いうちに詰んだほうが良いと思います！