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

公開:2020/10/16
更新:2020/10/16
5 min読了の目安(約5300字TECH技術記事
Likes12

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-formuseForm 変数をインポートする
    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 が用意する handleSubmitonSubmit メソッドをラップする
    <form onSubmit={handleSubmit(onSubmit)}>
    

    • onSubumit メソッドでは、 React Hook Form で管理対象になっているフィールドの値に簡単にアクセスすることができる
    const onSubmit = data => console.log(data);
    // {email: "test@test.com", 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. 2つのパスワード欄(確認用パスワード)の同一性チェック

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

まとめ

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

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