7. Form

フォーム要素の扱い

Reactでフォーム要素を管理するには、useStateフックを使用してフォームの状態を管理することが一般的です。以下は、基本的な入力フォームの例です：

import React, { useState } from 'react';

function NameForm() {
  const [name, setName] = useState('');

  const handleChange = (event) => {
    setName(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert('A name was submitted: ' + name);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

バリデーション

フォームのバリデーションは、ユーザーが入力したデータが適切であるかを確認するために行います。Reactでは、バリデーションをハンドラ内で行うことが一般的です。

簡単なバリデーションの例

import React, { useState } from 'react';

function EmailForm() {
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');

  const handleChange = (event) => {
    setEmail(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    if (!/\S+@\S+\.\S+/.test(email)) {
      setError('Email address is invalid.');
    } else {
      setError('');
      alert('A email was submitted: ' + email);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Email:
        <input type="text" value={email} onChange={handleChange} />
      </label>
      <input type="submit" value="Submit" />
      {error && <p style={{ color: 'red' }}>{error}</p>}
    </form>
  );
}

外部ライブラリ

複雑なフォーム管理やバリデーションを効率的に行うために、Reactにはいくつかの外部ライブラリがあります。代表的なものとして、FormikとReact Hook Formがあります。

Formik

Formikは、Reactでフォームを扱うための人気ライブラリです。フォームの状態管理とバリデーションを簡単に行うことができます。

使用例

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

const SignupSchema = Yup.object().shape({
  name: Yup.string().required('Required'),
  email: Yup.string().email('Invalid email').required('Required'),
});

function SignupForm() {
  return (
    <Formik
      initialValues={{ name: '', email: '' }}
      validationSchema={SignupSchema}
      onSubmit={(values) => {
        alert(JSON.stringify(values, null, 2));
      }}
    >
      {({ errors, touched }) => (
        <Form>
          <div>
            <label>Name</label>
            <Field name="name" />
            <ErrorMessage name="name" component="div" />
          </div>
          <div>
            <label>Email</label>
            <Field name="email" type="email" />
            <ErrorMessage name="email" component="div" />
          </div>
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  );
}

React Hook Form

React Hook Formは、React Hooksを使用してフォームの管理とバリデーションを行う軽量なライブラリです。パフォーマンスに優れ、簡単に使用できます。

使用例

import React from 'react';
import { useForm } from 'react-hook-form';

function SignupForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    alert(JSON.stringify(data, null, 2));
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>Name</label>
        <input {...register('name', { required: 'Required' })} />
        {errors.name && <p>{errors.name.message}</p>}
      </div>
      <div>
        <label>Email</label>
        <input {...register('email', { required: 'Required', pattern: { value: /\S+@\S+\.\S+/, message: 'Invalid email' } })} />
        {errors.email && <p>{errors.email.message}</p>}
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

---

このように進めていきます。他に追加や修正の希望があればお知らせください。