こんにちは！アソビュー！でエンジニアをしている山内と申します。
最近の週末は、テントを担ぎながら山に登ってステーキを焼いて食べたりしています。最近、寒くなってきたので次は鍋でもしようかなと目論んでおります。（荷物が重くなりそう）
今回、社内の従業員用システムにて、フロントエンド側で動的なバリデーションを実装する機会がありました。その際Yupを用いて実装しましたので、紹介しようと思います。
Yupとは
Yupとは、バリデーション用のスキーマビルダーです。
また、フォーム作成のライブラリであるFormikとの相性がよく、今回のシステムはFormikを用いていたこともあり、Yupを利用しました。
実現したいこと
今回は1つのフォームの入力は必須で、その中に特定の値が含まれる場合、AフォームまたはBフォームのどちらかの入力を必須にするというものでした。
例として、お昼ごはんフォームを必須にし、その中に「お弁当」が含まれる場合、スープまたはサラダのどちらかの入力を必須にするという形で紹介していきます。
なんだかお腹が空いてきましたね。
whenを使ってみる
Yupのwhenというスキーマパターンで動的なバリデーションを実装できるようです。
早速やってみました。
これで行けそう！と思いきや、エラーになってしまいました。。
Error: Cyclic dependency
どうやら、whenを使った際は相互参照するバリデーションだとエラーになるようです。
testを使ってみる
公式のGitHubのISSUEを確認すると、相互参照するバリデーションの場合は、カスタムtestのスキーマパターンを使うと良いらしいです。
こちらでリベンジしていきます。
こちらのようにtestを使うと、実現したかったバリデーションの実装ができました。🎉
これでもうお弁当を注文するときに、スープかサラダを注文し忘れることはありません。
安心して昼食にありつけます。
最後に🍱
Yupではこのような複雑なバリデーションも簡単に実装でき、様々なスキーマが用意されています。バリデーションの実装の際には参考にしていただけると幸いです。
アソビュー！ではエンジニアを大募集しています。
今回、お昼ごはんを例に紹介しましたが、プロダクト内でのシャッフルランチ等も行っており皆で話しやすく、和気あいあいと開発をしております。
