フォームバリデーションを体験 - React Hook Form 入門

React Hook Form とは

React Hook Form とはログイン画面や新規登録画面といった様々なシーンで使われる
フォームのバリデーションを簡単に実装できる React Hooks 用のライブラリです。

Node.js をインストール

1. 公式サイトにアクセスします
2. LTS 版をダウンロードしてインストーラーを実行してください
3. ターミナルでバージョンが表示できれば完了です

   node -v
   v12.19.0
   npm -v
   6.14.8
   

Yarn をインストール [公式サイト]

1. 以下のコマンドをターミナルで実行します

   brew install yarn
   

2. ターミナルでバージョンが表示できれば完了です

   yarn -v
   1.22.10
   

はじめる

1. プロジェクトを作りたいフォルダに移動します
2. 以下のコマンドをターミナルで実行します

   npx create-react-app my-app
   

3. ローカルサーバーを起動します

   yarn start
   

4. ブラウザが起動して以下のような画面が表示できれば完了です
   

ログインフォームを用意する

1. src/App.js を開き以下のコードを入力しましょう

   import React from 'react';
   import './App.css';
   
   function App() {
     return (
         <div className="container">
       <div className="login-form">
         <form>
           <div className="form-group">
             <label htmlFor="email">メールアドレス
             <input id="email" type="text" name="email"/>
             </label>
           </div>
           <div className="form-group">
             <label htmlFor="password">パスワード
             <input id="password" type="password" name="password"/>
             </label>
           </div>
           <button type="submit">ログイン</button>
         </form>
       </div>
         </div>
     );
   }
   
   export default App;
   

2. src/App.css を開き以下のコードを入力しましょう

   .login-form{
     width: 360px;
     display: inline-flex;
     box-shadow: 0 0 4px rgba(0,0,0,0.2);
     padding: 32px;
   }
   .login-form{
     background-color: #fafafa;
     text-align: right;
     justify-content: center;
   }
   .login-form label{
     text-align: right;
     font-weight: bold;
     width: 100%;
     color: #333;
   }
   .login-form input{
     font-size: 24px;
     width: 200px;
     border: 1px solid #333;
     border-radius: 4px;
     margin-left: 16px;
   }
   .login-form button{
     background: royalblue;
     border: none;
     padding: 4px 16px;
     border-radius: 4px;
     min-width: 80px;
     font-size: 16px;
     color: #fff;
     font-weight: bold;
   }
   .form-group{
     margin-bottom: 12px;
   }
   .container{
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
   }
   .error{
     color: red;
     font-size: 12px;
     padding: 4px;
   }
   

3. ブラウザに下記のようなフォームが表示されれば完了です
   

React Hook Form をプロジェクトに追加する

1. yarn で React Hook Form をインストールする

   yarn add react-hook-form
   

2. App.js のコードを React Hook Form に対応させる

   • react-hook-form の useForm 変数をインポートする

   import { useForm } from "react-hook-form";
   

   const { register, handleSubmit, errors } = useForm();
   

   ---

   • （重要） register で各フィールドを React Hook Form のバリデーション対象に登録する
   • （重要） register をする際は、必ず各フィールドに name 属性を設定する

   <input id="email" type="text" name="email" ref={register({ required: true})}/>
   

   ※ 本サンプルでは、<label> タグの for 属性 を利用するために id を同名で指定しています

   ---

   • （重要） React Hook Form が用意する handleSubmit で onSubmit メソッドをラップする

   <form onSubmit={handleSubmit(onSubmit)}>
   

   ---

   • onSubumit メソッドでは、 React Hook Form で管理対象になっているフィールドの値に簡単にアクセスすることができる

   const onSubmit = data => console.log(data);
   // {email: "[e-mail]", password: "password123"}
   

   ---

   • errors.[フィールドのname属性で指定した値] でバリデーションエラーの有無判定が可能

   {errors.email && <div className="error">メールアドレスを入力してください</div>}
   

3. 最終的に App.js は下記のようになります

   import React from 'react';
   import { useForm } from "react-hook-form";
   import './App.css';
   
   function App() {
       const { register, handleSubmit, errors } = useForm();
       const onSubmit = data => console.log(data);
       return (
       <div className="container">
           <div className="login-form">
           <form onSubmit={handleSubmit(onSubmit)}>
               <div className="form-group">
               <label htmlFor="email">メールアドレス
                   <input id="email" type="text" name="email" ref={register({ required: true})}/>
                   {errors.email && <div className="error">メールアドレスを入力してください</div>}
               </label>
               </div>
               <div className="form-group">
               <label htmlFor="password">パスワード
                   <input id="password" type="password" name="password" ref={register({ required: true})}/>
                   {errors.password && <div className="error">パスワードを入力してください</div>}
               </label>
               </div>
               <button type="submit">ログイン</button>
           </form>
           </div>
       </div>
       );
   }
   
   export default App;
   

4. 動かしてみる

フォームでログインボタンをクリックするとバリデーションが実行され、
以下のバリデーションエラーが表示されるようになりました。

（他にも）バリデーションルールを追加する

今回のサンプルで使った、 required 以外に下記のようなバリデーションを利用できます。

• required 必須
• min 最小の数（数値）
• max 最大の数（数値）
• minLength 最小の文字数
• maxLength 最大の文字数
• pattern 正規表現を使ったバリデーション e.g. メールアドレスの形式チェック、電話番号の形式チェック
• validate 高度なカスタムバリデーション e.g. ２つのパスワード欄（確認用パスワード）の同一性チェック

詳細は API ドキュメント参照

まとめ

React Hook Form を用いると、簡単にフォームのバリデーションを追加できます。

より高度な使い方については、また別の機会にまとめたいと思います。

この記事が気に入った方は、下のハートマークを押してもらえると嬉しいです。