はじめに

株式会社エアークローゼットのプロダクトグループでエンジニアをしている工藤と申します。
この記事はエアークローゼット Advent Calendar 2022 の5日目の記事になります

今回はReactのバリデーションライブラリであるYupを使ってバリデーションを細分化した話をします。
UXを最重要視するエアークローゼットらしい記事になっていますので、興味のある方はぜひご覧ください。

この記事のまとめ

Yupのバリデーションは.matches()を繋ぐことで細分化できる
細分化を目的にすると.matches() の仕様は多少ややこしいので注意が必要

やりたかったこと

今回は、エアークローゼットのサービスサイトにおける「無料登録導線」のUXを改善するプロジェクトにアサインされ、その実装を担当することになりました。

ビジネス側の要望

無料会員登録のUXを改善するため、それまで1パターンだったバリデーションメッセージを16パターンに出し分けてほしい
エラーメッセージは登録ボタン押下時ではなく、1文字入力する度に出してほしい

エンジニア（私）の考え

極力、既存のコードを破壊したくない（かなり重要な導線であり、バグが発生した際のダメージが大きい）
該当箇所はYupで実装されていたため、実装の過程で苦手な正規表現を勉強したい

※ちなみに↓が実装前の動画です。
エラーがあっても全て同じメッセージで、何が足りないのか全くわかりません...

やったこと

Yup.string.matches()を数珠繋ぎにすることで、パスワードを細分化しました
実際のコードと実装後の動画を以下に貼っておきます。

実際のコード

index.tsx

Yup.object().shape({
  // ...(一部省略)
  password: Yup.string()
    matches(/^((?=.*[a-z]).*|^[0-9]+$|^[A-Z]+$|.{8,})$/,ERROR_MESSAGE.INVALID_PASSWORD_REQUIRE_8_AND_LOWER_CASE)
    .matches(/^((?=.*[a-z]).*|^[0-9]+$|^[A-Z]+$|.{0,7})$/, ERROR_MESSAGE.INVALID_PASSWORD_REQUIRE_LOWER_CASE)
    .matches(/^((?=.*[A-Z]).*|^[0-9]+$|^[a-z]+$|.{8,})$/,ERROR_MESSAGE.INVALID_PASSWORD_REQUIRE_8_AND_UPPER_CASE)
    .matches(/^((?=.*[A-Z]).*|^[0-9]+$|^[a-z]+$|.{0,7})$/, ERROR_MESSAGE.INVALID_PASSWORD_REQUIRE_UPPER_CASE)
    .matches(/^((?=.*[0-9]).*|^[A-Z]+$|^[a-z]+$|.{8,})$/, ERROR_MESSAGE.INVALID_PASSWORD_REQUIRE_8_AND_NUM)
    .matches(/^((?=.*[0-9]).*|^[A-Z]+$|^[a-z]+$|.{0,7})$/, ERROR_MESSAGE.INVALID_PASSWORD_REQUIRE_NUM)
    .matches(/^([^0-9].*|(?=.*[a-z])(?=.*[0-9]).*|(?=.*[A-Z])(?=.*[0-9]).*|.{8,})$/,ERROR_MESSAGE.INVALID_PASSWORD_REQUIRE_8_AND_UPPER_CASE_AND_LOWER_CASE)
    .matches(/^([^0-9].*|(?=.*[a-z])(?=.*[0-9]).*|(?=.*[A-Z])(?=.*[0-9]).*|.{0,7})$/,ERROR_MESSAGE.INVALID_PASSWORD_REQUIRE_UPPER_CASE_AND_LOWER_CASE)
    .matches(/^([^a-z].*|(?=.*[0-9])(?=.*[a-z]).*|(?=.*[A-Z])(?=.*[a-z]).*|.{8,})$/,ERROR_MESSAGE.INVALID_PASSWORD_REQUIRE_8_AND_NUM_AND_UPPER_CASE)
    .matches(/^([^a-z].*|(?=.*[0-9])(?=.*[a-z]).*|(?=.*[A-Z])(?=.*[a-z]).*|.{0,7})$/,ERROR_MESSAGE.INVALID_PASSWORD_REQUIRE_NUM_AND_UPPER_CASE)
    .matches(/^([^A-Z].*|(?=.*[a-z])(?=.*[A-Z]).*|(?=.*[0-9])(?=.*[A-Z]).*|.{8,})$/,ERROR_MESSAGE.INVALID_PASSWORD_REQUIRE_8_AND_NUM_AND_LOWER_CASE)
    .matches(/^([^A-Z].*|(?=.*[a-z])(?=.*[A-Z]).*|(?=.*[0-9])(?=.*[A-Z]).*|.{0,7})$/,ERROR_MESSAGE.INVALID_PASSWORD_REQUIRE_NUM_AND_LOWER_CASE)
    .matches(/^(^[a-z]+$|^[A-Z]+$|^[0-9]+$|(?!.*[0-9]).*|(?!.*[a-z]).*|(?!.*[A-Z]).*|.{8,})$/,ERROR_MESSAGE.INVALID_PASSWORD_REQUIRE_8)
  // ...(一部省略)
})

実際の動画

文字を入力するたびにエラーメッセージが変化し、何が足りないのかが一目でわかるようになりました 🎉

大変ポイント

1. Yupの仕様が(個人的に)直感的でない

Yupの.matches()は、第1引数に「入力を許可する」正規表現パターンを、第2引数に「第1引数のパターンに一致しなかった場合のメッセージ」をとります。このため、例えばabcのような英小文字しか入力されていないパターンのエラーメッセージを出す場合、第1引数には 「英小文字だけ」以外の全てにマッチする という正規表現を書くする必要があるのです (下図)。

.matches()を数珠繋ぎにしてバリデーションを実装するにあたっては許可しないパターンを書けたら直感的だったのですが、生憎.notMathes()のような関数は存在しなかったため、その点で非常に苦労しました。

2. 正規表現の検証が難しい

正規表現が必要な実装をした経験がなかったため、初めは全て 1.コードを書く→ 2.実際にパスワードを打ち込んでみる の流れで実装をしていましたが、検証に時間がかかりすぎてものすごく非効率になっていました。

そこで、弊社エンジニアの@baochanh18が社内LT会で使用していたregular expressions 101に必要なパターンを打ち込んで検証するようにしたところ、検証速度を圧倒的に早めることができました。

あとがき

最後までご覧いただきありがとうございました🙇‍♂️

エアークローゼット Advent Calendar 2022はまだまだ続きますので、ぜひ他のエンジニア, デザイナー, PMの記事もご覧いただければと思います。

次回は今年の11月にエアクロにジョインしてくれた@victory1011さんが担当しますので、是非お楽しみに！