react-hook-formでのフォーム作成

react-hook-formとは？

Reactでフォームを簡単に扱うためのパフォーマンス向上と使いやすさを提供するライブラリです

インストール方法

npmを使用する場合：

npm install react-hook-form

または、yarnを使用する場合：

yarn add react-hook-form

フォームを実装

例として、名前とメールアドレスを含むシンプルなフォームを考えます。
(公式サイトに行けばちょこちょこサンプルあり)

import React from 'react';
import { useForm, Controller } from 'react-hook-form';

const MyForm = () => {
  // useForm フックを使用してフォームを初期化
  const { handleSubmit, control, register, formState: { errors } } = useForm();

  // フォームが送信されたときに実行される関数
  const onSubmit = (data) => {
    console.log(data);
    // ここでデータを使用して何かしらの処理を行う
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* 名前の入力フィールド */}
      <div>
        <label>名前</label>
        <input {...register('name', { required: '名前は必須です' })} />
        {errors.name && <p>{errors.name.message}</p>}
      </div>

      {/* メールアドレスの入力フィールド */}
      <div>
        <label>メールアドレス</label>
        <Controller
          render={({ field }) => <input {...field} />}
          control={control}
          name="email"
          rules={{ required: 'メールアドレスは必須です', pattern: { value: /^\S+@\S+$/i, message: '有効なメールアドレスを入力してください' } }}
        />
        {errors.email && <p>{errors.email.message}</p>}
      </div>

      {/* 送信ボタン */}
      <button type="submit">送信</button>
    </form>
  );
};

export default MyForm;

useFormを使用してフォームを初期化し、各入力フィールドにregisterを使用して登録します。また、メールアドレスの入力フィールドではControllerを使用しています。フォームが送信されたときには、onSubmit関数が呼ばれます。
(useFormから必要な関数？をとってきて定義するようなイメージ？？)

この例は基本的なものであり、実際のプロジェクトではさらに複雑なバリデーションやフォームの状態管理が必要になるかもしれません。
React Hook Formの公式ドキュメントを参照すると、より詳細で高度な使い方が学べます。

Controllerとは？

Controllerは、React Hook Formの一部であり、外部のライブラリとReact Hook Formを統合するために使用されます。具体的には、外部のUIライブラリやカスタムコンポーネントとReact Hook Formを連携させる役割を果たします。主に、制御されたコンポーネント（Controlled Component）のプロパティと状態をReact Hook Formに紐付け、バリデーションやフォームの状態管理を容易にします。

以下に、Controllerの主な役割をいくつか説明します：

外部コンポーネントの制御（Control）:
Controllerは外部のカスタムコンポーネントやUIライブラリのフォーム要素をラップし、そのコンポーネントの値をReact Hook Formに制御させます。これにより、外部のコンポーネントもReact Hook Formの一部として扱うことができます。

バリデーションの設定:
Controllerを使用すると、rulesプロパティを通じてバリデーションのルールを設定できます。例えば、必須フィールドや特定のパターンに一致するかどうかなどのバリデーションが可能です。

フォームの値の取得:
Controllerを使用すると、外部コンポーネントの値をReact Hook Formから取得することができます。これにより、外部コンポーネントの値をフォーム全体のデータと結びつけることができます。

<Controller
  render={({ field }) => <input {...field} />}
  control={control}
  name="email"
  rules={{ required: 'メールアドレスは必須です', pattern: { value: /^\S+@\S+$/i, message: '有効なメールアドレスを入力してください' } }}
/>

renderプロパティを使用してinput要素をラップし、fieldを通じてReact Hook Formに値を提供しています。controlプロパティは、useFormフックから取得したcontrolオブジェクトを指定し、nameプロパティでフォームデータのキーを指定しています。rulesプロパティではバリデーションルールを設定しています。

バリデーションではなく、警告文？みたいなメッセージを表示したいとき

バリデーションに関してはControllerで設定可能？
特定の値によってただメッセージだけ表示させて、注意喚起みたいなことがしたいとき
(あくまで参考程度、)

条件に基づくメッセージ表示: 条件に基づいて特定の条件が満たされた場合にメッセージを表示します。これにはJavaScriptの条件文や三項演算子を使用できます。

value1が特定の値の場合に赤いテキストでメッセージを表示しています。

<div>
  <label>Value1</label>
  <input
    {...register('value1')}
    type="text"
  />
  {watch('value1') === '特定の値' && (
    <p style={{ color: 'red' }}>特定の値は使用できません。</p>
  )}
</div>

状態を使用したメッセージ表示: react-hook-formの状態を使って特定の条件で状態を変更し、それに基づいてメッセージを表示します。

value1が特定の値の場合に状態 showMessage を true に変更し、それに基づいてメッセージを表示しています。

import { useState } from 'react';

function MyForm() {
  const { register, watch } = useForm();
  const [showMessage, setShowMessage] = useState(false);

  return (
    <div>
      <label>Value1</label>
      <input
        {...register('value1')}
        type="text"
        onChange={() => setShowMessage(watch('value1') === '特定の値')}
      />
      {showMessage && (
        <p style={{ color: 'red' }}>特定の値は使用できません。</p>
      )}
    </div>
  );
}