Reactでyupを導入してフォームバリデーションを実装

Reactでyupを導入

Yupは、ReactとTypeScriptでフォームバリデーションを簡単に実装するために非常に便利なライブラリです。
以下に、Yupを使用した基本的なバリデーションの例を示します。

まず、yupとformikを使ってフォームのバリデーションを行う例です。
formikはフォームの状態管理を簡単にするライブラリです。

必要なパッケージのインストール

npm install yup formik

または

yarn add yup formik

TypeScriptでの使用例

import React from 'react';
import { Formik, Field, Form, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object({
  name: Yup.string()
    .required('名前は必須です')
    .min(2, '名前は2文字以上でなければなりません'),
  email: Yup.string()
    .required('メールアドレスは必須です')
    .email('無効なメールアドレスです'),
});

const MyForm: React.FC = () => {
  return (
    <Formik
      initialValues={{ name: '', email: '' }}
      validationSchema={validationSchema}
      onSubmit={(values) => {
        console.log(values);
      }}
    >
      <Form>
        <div>
          <label htmlFor="name">名前</label>
          <Field
            id="name"
            name="name"
            type="text"
          />
          <ErrorMessage name="name" component="div" />
        </div>

        <div>
          <label htmlFor="email">メールアドレス</label>
          <Field
            id="email"
            name="email"
            type="email"
          />
          <ErrorMessage name="email" component="div" />
        </div>

        <button type="submit">送信</button>
      </Form>
    </Formik>
  );
};

export default MyForm;

この例では、Yupを使用して名前とメールアドレスのバリデーションを行っています。
エラーメッセージは日本語で表示されます。
フォームのバリデーションに関しては、Formikと組み合わせて簡単に管理することができます。