学習時間記録アプリに React Hook Form を導入

はじめに

学習時間記録アプリに React Hook Form (RHF)を導入したので、学んだことをまとめます。
RHFとは、フォーム入力を軽く・速く・型安全に扱うためのライブラリです。

導入

1.ライブラリのインストール

まずは、React Hook Formをインストールします。

npm install react-hook-form

フォームで扱うデータの型を定義

export type LearningFormValues = {
  records: string;
  time?: number;
  remark: string;
};

useFormからメソッドを呼び出す

export const LearningForm = ({ formId, onValidSubmit }: LearningFormProps) => {
  const {
    handleSubmit,
    register,
    control,
    formState: { errors },
    reset,
  } = useForm<LearningFormValues>({
    mode: "onBlur",
    defaultValues: { records: "", time: undefined, remark: "" },
  });

• handleSubmit

フォームのonSubmitに渡す関数。

    <Box onSubmit={handleSubmit(onSubmit)}>

• register

ネイティブinput（<input>）をRHFに登録する関数で、{...register("records", rules)}の形で使う。

<Input
  placeholder="学習内容"
  {...register("records", {
    required: "内容の入力は必須です",
    //　ほか色々なルール・・・
})}
/>

<Input placeholder="備考メモ" {...register("remark")} />

第1引数：参照の名前を登録する（必須）
第2引数：バリデーションのルールをオブジェクト形式で設定する

• control

カスタムコンポーネント（ChakraのNumberInputなど）を使うとき、Controllerに渡すオブジェクト。Controllerはcontrolを通じてRHFとやりとりする。

<Controller
  control={control}
  name="time"
  rules={{
    required: "時間の入力は必須です",
    // ほか色々な処理・・・
    },
  }
  render={({ field: { value, onChange, onBlur } }) => (
    <NumberInput
      min={0}
      step={0.1}
      // ほか色々な処理・・・
    >

• formState: { errors }

バリデーションエラーが入る。
errors.records?.messageのようにして使う。

  <FormErrorMessage>{errors.time?.message}</FormErrorMessage>

• reset

reset()フォームの値をdefaultValuesに戻す。（今回は空）

const onSubmit = async (values: LearningFormValues) => {
  await onValidSubmit(values);
  reset(); // ここで初期化
};

• mode: "onBlur"

”フォーカスが外れた時” にチェックする。

他にも、
onChange＝ 入力のたびにチェック
onSubmit＝ 送信時にチェック

などがある。

• defaultValues: { ... }

各フィールドの初期値を設定する。（今回は空）

おわりに

RHF の導入で、コードの見通しが良くなったと実感しています。

フォームのリセットも、これまでひとつずつ""を指定していたのが、reset()だけで実行できて感動しました。

Chakra UIとの相性も良さそうで、フォーム入力のあるアプリを作成するなら必須の技術でした。

React を学んでいると、本当に日々新しい技術に出会うなぁ。としみじみ感じます。

参考