Input Form のバリデーションをリーダブルに書く Yup の魅力を5分間で発表しました 2022/10/19 に開催した第1回 LT 練習会（仮）で発表したスライドです。 https://gaji-lt.connpass.com/event/260558/

1. Yup で快適！
バリデーションチェック
@hchaki 2022.10.19 「LT 練習会（仮）」

2. 自己紹介
名前 ：chaki hironori
twitter : @riqrique
webライターもやってるフロントエンドエンジニアです。旅行が
趣味で特にスペインや中南米が好きです。

3. インプットフォームの
バリデーションのコードは
複雑になりがち
今日のプロブレム

4. ユーザーの入力が適切か
どうか検証すること
ex) パスワード登録時の
文字数や文字種のチェック
参考
：https://uikit.wfp.org/docs/index.html?path=/docs/comp
onents-forms-form--contact
バリデーションとは

5. バリデーションが
複雑になる理由 2選

6. 1. 検証要素の多さ
・未入力
・文字数（過不足）
・文字種（大文字・小文字・数字・記号）
・形式 （email・URL・日時）
…など多岐にわたる

7. 2. 検証要素の組み合わせ
先の検証要素の多さに加え、要素の組み合わせ
があるため記述の一般化が難しい
ex) 生年月日 1996-02-29
指定フォーマット（yyyy-mm-dd） かつ
存在する日付 かつ
本日以前の日付

8. 解決法

9. Yupを使う

10. Yupとは
● Schema ビルダーである
● Schema とは
値を変換・検証するモデルである
https://github.com/jquense/yup

11. ?
https://github.com/jquense/yup

12. 使ってみる
今回は React Hook Form と
Yup を組み合わたものを例示する
https://react-hook-form.com/

13. 呼び出し側
resolver に
schema を渡す

14. 先のuseFormで生成した
control を
useController に渡して
controller を得る
controller により input の
表示・更新・エラー表示
などができる

15. Yup の
schema の例

16. 例1
● title は文字列
そして必須
● エラーメッセージも記述
できる

17. 例2
● price は数値
● チェーン記法で複数の
検証も記述できる

18. 他にもこんなケースに対応
● 日付型の検証
● オブジェクト型の検証
（APIから取得した値などネストされた値の取り扱い）
● 他のフィールドを参照した検証
ex) パスワード登録時の確認再入力

19. Yup の魅力
● 検証は schema に分離
入力処理と切り分けられる
● チェーン記法で
複数の検証を記述できリーダブル

20. ご清聴ありがとうございました！
元記事:
React Hook Form でAPIでのget/postを見越した入力フォームを作る際の勘所
https://www.gaji.jp/blog/2022/07/01/10255/