React-hook-formとyupを使ったバリデーションの実装

### 今回は、React-hook-formとyupを利用して、ログインフォームのバリデーション処理を実装していきます。

## 実装
### １）各パッケージのインストール
Reactでバリデーションを実装する際に必要なパッケージをインストールします。
今回インストールするパッケージは以下となります。
パッケージ名|インストールバージョン|機能
---|---|---
yup|0.32.11|バリデーションのためのライブラリ
react-hook-form|7.34.2|フォームバリデーションライブラリ
@hookform|2.9.7|

#### 　①React-hook-formのインストール
　以下のコマンドを実行すると、インストール開始します。
```
$ npm install react-hook-form
```
#### 　②@hookform/resolversのインストール
以下のコマンドを実行すると、インストールが開始します。
```
 $npm install @hookform/resolvers
```
#### 　③yupのインストール
以下のコマンドを実行すると、インストール開始します。
```
npm install yup
```

### ２）実装
今回は、ログイン画面を作成し、その中でバリデーションチェックを実装していきます。<br>先ずはログイン画面を実装していきます。

#### 　①先ずは、ログイン画面を実装します。
```Auth_login.tsx
import { useTranslation } from "react-i18next";

    
function Auth_Login() {
    const { t } = useTranslation();

    return (
        <div className="col-sm-8 offset-sm-4 mt-5">
            <h2>{t('auth.title')}</h2>
            <br></br>
            <form name="form">
                <div className="form-group col-sm-4">
                    <label>{t('auth.usercd')}</label>
                    <input type="text" className="form-control"></input>
                </div>
                <br></br>
                <div className="form-group col-sm-4">
                    <label>{t('auth.password')}</label>
                    <input type="password" className="form-control"></input>
                </div>
                <br></br>
                <button className="btn btn-primary">{t('auth.signin')}</button>

            </form>

        </div>
    )
}

export { Auth_Login };
```



#### 　②バリデーション機能を実装します。
```Auth_Login.tsx
import { useTranslation } from "react-i18next";
import * as Yup from 'yup';                                 //【追記】Yupのインポート
import { yupResolver } from '@hookform/resolvers/yup';      //【追記】hookformのインポート
import { useForm } from "react-hook-form";                  //【追記】react-hook-formのインポート

function Auth_Login() {
    const { t } = useTranslation();


    //【追記】バリデーションのルール設定
    const validationSchema = Yup.object().shape({
        username: Yup.string().required(t("auth.message.required_usercd")),
        password: Yup.string().required(t("auth.message.required_password"))
    })
    
    // 【追記】useForm hooksの設定
    const formOptions = { resolver: yupResolver(validationSchema) };
    const { register, handleSubmit, formState } = useForm(formOptions);
    const { errors, isSubmitting } = formState;

    //SignInボタン押下時の処理を設定
    function onSubmit() {
        alert('SUCCESS!!');
    }

    return (
        <div className="col-sm-8 offset-sm-4 mt-5">
            <h2>{t('auth.title')}</h2>
            <br></br>
            <form name="form" onSubmit={handleSubmit(onSubmit)}>
                <div className="form-group col-sm-4">
                    <label>{t('auth.usercd')}</label>
                    <input type="text" {...register('username')} className={`form-control  ${errors.username ? 'is-invalid' : ''}`}></input>
                    <div className="invalid-feedback">{t("auth.message.required_usercd")}</div>
                </div>
                <br></br>
                <div className="form-group col-sm-4">
                    <label>{t('auth.password')}</label>
                    <input type="password"  {...register('password')} className={`form-control  ${errors.password ? 'is-invalid' : ''}`}></input>
                    <div className="invalid-feedback">{ t("auth.message.required_password") }</div>
                </div>
                <br></br>
                <button className="btn btn-primary">{t('auth.signin')}</button>

            </form>

        </div>
    )
}

export { Auth_Login };
```
　
### ３）動作検証

以下のコマンドを実行し、Reactアプリを実行します。
```
& npm start
```
以下の様な、何の変哲もないログイン画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196226/e1cdb847-8817-6120-5562-2158ee97efeb.png)


「ユーザーコード」、「パスワード」に何も入力しない状態で、「サインイン」ボタンをクリックしたら、以下の様に、エラーが表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196226/e4138f72-b4a5-4ad7-9754-31313db9080d.png)

入力項目に値を入力すると、エラーは表示されなくなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196226/cb99bd2a-455c-24eb-740d-8ecf17cc636f.png)

ユーザコードとパスワードに値を入力し、「サインイン」ボタンをクリックすると、「SUCCESS!!」と表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196226/2a4d8616-72e3-8736-1f77-17a53afc7b6a.png)

今回はここまでとなります。
次回は、Reduxを利用して状態管理を実装していきます。