<div>
    <label htmlFor="email">メールアドレス:</label>
    <input type="email" id="email" {...register("email", {
      required: "メールアドレスを入力してください",
      pattern: {
        value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
        message: "有効なメールアドレスを入力してください"
      }
    })} />
    {errors.email && <p>{errors.email.message}</p>}
  </div>

  <button type="submit">送信</button>
</form>

);
}

export default SimpleForm;
“`

2.3 コードの説明

• useFormフック: useFormフックは、フォームの状態管理、バリデーション、handleSubmitなどの機能を提供します。
• register関数: register関数は、フォームの各フィールドをReact Hook Formに登録します。HTML要素の...register("フィールド名", { バリデーションルール })のようにスプレッド構文で渡します。
• handleSubmit関数: handleSubmit関数は、フォームの送信を処理します。onSubmit関数を引数として受け取り、バリデーションを実行し、成功した場合にonSubmit関数を実行します。
• formState.errorsオブジェクト: formState.errorsオブジェクトは、バリデーションエラーを格納します。各フィールドのエラーメッセージにアクセスできます。
• バリデーションルール: register関数の第2引数で、バリデーションルールを指定します。required、pattern、minLength、maxLengthなどの組み込みルールを使用できます。

3. React Hook Formの高度なテクニック

React Hook Formには、さらに高度なテクニックがいくつか存在します。これらのテクニックを理解することで、より複雑なフォームやカスタムUIコンポーネントとの連携が可能になります。

3.1 Yup、Zodなどのスキーマバリデーションライブラリとの連携

React Hook Formは、Yup、Zodなどのスキーマバリデーションライブラリとの連携をサポートしています。これらのライブラリを使用することで、より複雑なバリデーションルールを定義し、再利用することができます。

例：Yupとの連携

まず、Yupをインストールします。

“`bash
npm install yup

または

yarn add yup
“`

次に、Yupのスキーマを定義します。

“`javascript
import * as yup from ‘yup’;

const schema = yup.object().shape({
name: yup.string().required(“名前を入力してください”),
email: yup.string().email(“有効なメールアドレスを入力してください”).required(“メールアドレスを入力してください”),
age: yup.number().positive(“年齢は正の数で入力してください”).integer(“年齢は整数で入力してください”).required(“年齢を入力してください”),
});
“`

そして、useFormフックの設定で、resolverオプションを使用してYupスキーマを適用します。

“`jsx
import React from ‘react’;
import { useForm } from ‘react-hook-form’;
import { yupResolver } from ‘@hookform/resolvers/yup’;
import * as yup from ‘yup’;

const schema = yup.object().shape({
name: yup.string().required(“名前を入力してください”),
email: yup.string().email(“有効なメールアドレスを入力してください”).required(“メールアドレスを入力してください”),
age: yup.number().positive(“年齢は正の数で入力してください”).integer(“年齢は整数で入力してください”).required(“年齢を入力してください”),
});

function YupForm() {
const { register, handleSubmit, formState: { errors } } = useForm({
resolver: yupResolver(schema)
});

const onSubmit = (data) => {
console.log(data);
};

return (

  <div>
    <label htmlFor="email">メールアドレス:</label>
    <input type="email" id="email" {...register("email")} />
    {errors.email && <p>{errors.email.message}</p>}
  </div>

  <div>
    <label htmlFor="age">年齢:</label>
    <input type="number" id="age" {...register("age")} />
    {errors.age && <p>{errors.age.message}</p>}
  </div>

  <button type="submit">送信</button>
</form>

);
}

export default YupForm;
“`

3.2 カスタムUIコンポーネントとの連携

独自のUIコンポーネントを使用する場合、register関数を使ってReact Hook Formに登録する必要があります。

例：カスタムTextInputコンポーネント

“`jsx
import React from ‘react’;

function TextInput({ label, name, register, errors, …rest }) {
return (

);
}

export default TextInput;
“`

そして、カスタムコンポーネントを使用します。

“`jsx
import React from ‘react’;
import { useForm } from ‘react-hook-form’;
import TextInput from ‘./TextInput’;

function CustomComponentForm() {
const { register, handleSubmit, formState: { errors } } = useForm();

const onSubmit = (data) => {
console.log(data);
};

return (

  <TextInput
    label="メールアドレス"
    name="email"
    register={register}
    errors={errors}
    type="email"
    required="メールアドレスを入力してください"
  />

  <button type="submit">送信</button>
</form>

    <div>
      <label htmlFor="email">メールアドレス:</label>
      <input type="email" id="email" {...register("email")} />
    </div>

    <button type="submit">送信</button>
  </form>

  <p>名前: {name}</p>
  <p>メールアドレス: {email}</p>
</div>