[スクラップ] react-hook-form で新規登録フォームを作る

へぶん

練習に react-hook-form を使用してフォームを作る。今後実装する際の自分向けの参考資料として置いておく。

へぶん

以下の要件

新規登録画面
入力項目
- ニックネーム
- email
- password
バリデーション
- 全フィールド必須
- nickname
  - 2文字以上, 20文字以下
- email
  - email の形式
- password
  - 8文字以上
- バリデーションに引っ掛かったら、文字列を表示する
最後コンポーネント化までする。パスワードとかも一緒にコンポーネント化できるのかよく分からない。

へぶん

今回使用するライブラリ

react-hook-form

今回の主役。
https://react-hook-form.com/

yup

バリデーションで使用する。
https://github.com/jquense/yup

へぶん

yup のバリデーションメッセージ

yup ではバリデーションメッセージを設定しなければ、デフォルトの英語のエラーメッセージを伝えてくれるので、
各ルールを生やした際に日本語のメッセージも渡しておく。(ローカライズは一旦後回し)

const schema = yup.object().shape({
    nickname: yup.string()
        .min(2, 'ニックネームは2文字以上20文字以下で入力してください')
        .max(20, 'ニックネームは2文字以上20文字以下で入力してください')
        .required('ニックネームは必須項目です'),
})

へぶん

register を input 要素に渡すことで接続されるので、忘れないように注意する。

const Form = () => {
    const {register, handleSubmit, formState: {errors}} = useForm({
        resolver: yupResolver(schema)
    })
    return (
        <form >
            <input
                id="nickname"
                {...register("nickname")}
            />
        </form>
    )
}

へぶん

エラーサマリー

エラーメッセージをまとめて表示するときは、以下のようにエラーメッセージをリンクにして、指定の ID に飛べるようにしておくのが良さそう。

<div>
    <h2>問題があります</h2>
    <ul>
        <li>
            <a href="#email">メールアドレスを入力してください</a>
        </li>
    </ul>
</div>

note

こういうユースケースを考えると、多分フィールドの ID はサーバーサイドに送信するパラメータ名になっている方が良さそう。
- いざ、サーバーサイドから返却されたエラーメッセージを表示させたくなった場合に、id とフィールド名が異なっていたら混乱の元になるし、後から修正することになりそう。
エラーメッセージの文言考えるのも面倒だし、テイストブレそうだから spreadsheet 上で考えるとかした方が良さそう。

参考:

へぶん

yup の shape の key を型で縛る

shape の key として使用する値はデフォルトで string になっている。

型で縛りたい
shap の key を <input> の id と一致させたい

... ような場合は以下のように書く

type InputId = 'nickname'

type CustomFormRecord = Record<InputId, any>

const schema = yup.object().shape<CustomFormRecord>({
    nickname: yup.string()
        .min(2, 'ニックネームは2文字以上20文字以下で入力してください')
        .max(20, 'ニックネームは2文字以上20文字以下で入力してください')
        .required('ニックネームは必須項目です'),
})

へぶん

スタイル当ててないけど、以下が完成系

このスクラップは2021/09/05にクローズされました