FormはReactでフォームを実装する際に広く利用されているライブラリです。Formの基本的な使い方について紹介します。Formの公式ドキュメントをご覧になってください。今回利用するreact-hook-formのバージョンは7.34.0です。Formを利用したフォームの大まかな処理の流れです。Formを利用することでフィールドのバリデーション定義や、送信時のバリデーションチェックおよびエラーハンドリングが簡単にできます。Formに登場する用語についてuseFormuseFormはフォームを管理するためのメソッドやオブジェクトが用意されたカスタムフックです。以下ではuseFormが管理する代表的なメソッド・オブジェクトについて紹介します。Formに登録するメソッドです。Formのバリデーションルールが適用されます。handleSubmitフォームの送信に関するメソッドです。handleSubmitの引数にセットされたメソッドはフォーム送信時に実行されます。formStateフォームの状態を保存するオブジェクトです。フォームの状態には例えばフォームエラー(errors)、バリデーションステータス(isValid)、送信ステータス(isSubmitting)などがあります。watchフォームの入力の変化を監視するメソッドです。Formに登録するためのオブジェクトです。controlオブジェクトはControllerコンポーネント(後述)を利用する際に使用します。react-hook-form一番シンプルなフォームの作成手順react-hook-formのuseFormをインポートuseFormからregisterメソッドとhandleSubmitメソッドを取得registerメソッドを介してフォームの入力値を登録handleSubmitメソッドを利用して入力値を送信コードは以下の通りです。スプレッド構文について{...register("xxx")}はスプレッド構文と呼ばれる記法です。以下のようなスプレッド構文を利用していないコードがあったとします。);};スプレッド構文を利用すると上記のコードは以下のように書き換えられます。);};バリデーションの定義方法フィールドのバリデーションはregisterメソッドのオプションで定義します。Formでは以下のバリデーションをサポートしています。Form『register』を参照してください。以下はバリデーションを設定したフォームの例です。);};エラーメッセージの定義方法バリデーションのエラーメッセージはregisterのオプションで設定できます。requiredのエラーメッセージの定義方法は以下の通りです。stringのサポートはTypeScriptのみ。})}/>なお、エラーメッセージにstringが利用できるのはTypeScriptのみです。message</p>と定義します。Form『register』を参照してください。Formはバリデーションライブラリを利用したフォームのバリデーション定義もサポートしています。Ajvが挙げられます。バリデーションライブラリはuseFormのresolverプロパティを利用して組み込みます。今回はYupを利用する例について紹介します。必要となるパッケージをインストールします。yupYupを組み合わせたフォームの例は以下の通りです。);};なお、Yupを使わずにバリデーションを定義すると以下のようになります。);};フォーム送信時のデータ処理方法フォーム送信時のデータ処理はhandleSubmitで行います。handleSubmitは引数を2つ持ちます。引数は送信成功時に呼ばれるメソッド、第二引数は送信失敗時に呼び出されるメソッドです。第二引数の設定は任意です。フォーム送信成功時と失敗時の処理を記述したhandleSubmitの具体例は以下の通りです。fetchAPI(data))のような記述も可能です。Form『handleSubmit』を参照してください。FormとUIライブラリを組み合わせられます。v5)を利用する例について紹介します。必要となるパッケージをインストールします。@emotion/styledMUIを組み合わせたフォームの例は以下の通りです。);};入力値の変更を監視する方法watchメソッドを利用することで入力値を監視できます。以下はフォームに入力された文字数をカウントするフォームの例です。Form『watch』を参照してください。フォームの状態を参照する方法フォームの状態を確認したい場合はformStateを参照します。フォームのエラーはformStateのerrorsオブジェクトで管理されています。以下はformStateを利用してフォームエラーをログ出力する例です。Form『formstate』を参照してください。useForm<FormValues>();は「formStateのerrorsオブジェクトをformErrorsという変数名に代入」ということを行っています。これは分割代入を利用したテクニックです。分割代入はオブジェクトから取り出したプロパティを、プロパティ名と異なる変数名に代入できます。Formの公式ドキュメントをご覧になってください。Twitter(@nishina555)やってます。↩RECOMMENDJavaScriptReactTypeScriptツイートシェアはてブ送るPocket1プロフィールnishina大企業、ベンチャーと色々なところでWebエンジニアやっています。退職手続きから案件参画まで。人気の記事iPhoneの連絡先の保存がうまくできない!?原因は同期設定かも。