[React #06] フォームとバリデーション:フォーム入力の制御とエラーハンドリングを理解する

import React, { useState } from 'react';

function ContactForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });

  // 入力時のイベント
  const handleChange = e => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  // 送信時のイベント
  const handleSubmit = e => {
    e.preventDefault();
    console.log('送信データ:', formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        名前：
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
        />
      </label>

      <label>
        メールアドレス：
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
      </label>

      <label>
        お問い合わせ内容：
        <textarea
          name="message"
          value={formData.message}
          onChange={handleChange}
        />
      </label>

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

export default ContactForm;

import React, { useRef } from 'react';

function SimpleForm() {
  const inputRef = useRef();

  const handleSubmit = e => {
    e.preventDefault();
    alert(`入力された名前: ${inputRef.current.value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} placeholder="名前を入力" />
      <button type="submit">送信</button>
    </form>
  );
}

const handleSubmit = e => {
  e.preventDefault();  // ← リロード防止
  console.log('フォーム送信:', formData);
};

import React, { useState } from 'react';

function LoginForm() {
  const [formData, setFormData] = useState({
    email: '',
    password: ''
  });
  const [errors, setErrors] = useState({});

  const handleChange = e => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  // バリデーション関数
  const validate = data => {
    const newErrors = {};
    const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

    if (!data.email.trim()) {
      newErrors.email = 'メールアドレスは必須です。';
    } else if (!emailPattern.test(data.email)) {
      newErrors.email = 'メールアドレスの形式が正しくありません。';
    }

    if (!data.password.trim()) {
      newErrors.password = 'パスワードは必須です。';
    } else if (data.password.length < 6) {
      newErrors.password = 'パスワードは6文字以上にしてください。';
    }

    return newErrors;
  };

  const handleSubmit = e => {
    e.preventDefault();
    const validationErrors = validate(formData);
    if (Object.keys(validationErrors).length > 0) {
      setErrors(validationErrors);
      return;
    }
    console.log('送信データ:', formData);
    alert('ログイン成功！');
  };

  return (
    <form onSubmit={handleSubmit} noValidate>
      <div>
        <label>メールアドレス：</label>
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
        {errors.email && <p style={{ color: 'red' }}>{errors.email}</p>}
      </div>

      <div>
        <label>パスワード：</label>
        <input
          type="password"
          name="password"
          value={formData.password}
          onChange={handleChange}
        />
        {errors.password && <p style={{ color: 'red' }}>{errors.password}</p>}
      </div>

      <button type="submit">ログイン</button>
    </form>
  );
}

const handleBlur = e => {
  const { name, value } = e.target;
  const fieldError = validate({ [name]: value });
  setErrors(prev => ({ ...prev, ...fieldError }));
};

input.error {
  border: 2px solid #ff4d4f;
  background: #fff5f5;
}
input.valid {
  border: 2px solid #52c41a;
  background: #f6ffed;
}

<input
  type="email"
  name="email"
  className={errors.email ? "error" : "valid"}
  value={formData.email}
  onChange={handleChange}
/>

npm install react-hook-form

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

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

  const onSubmit = data => {
    console.log('送信データ:', data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>名前：</label>
      <input
        {...register('name', { required: '名前は必須です。' })}
      />
      {errors.name && <p style={{ color: 'red' }}>{errors.name.message}</p>}

      <label>メールアドレス：</label>
      <input
        type="email"
        {...register('email', {
          required: 'メールアドレスは必須です。',
          pattern: {
            value: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
            message: 'メールアドレスの形式が正しくありません。'
          }
        })}
      />
      {errors.email && <p style={{ color: 'red' }}>{errors.email.message}</p>}

      <label>メッセージ：</label>
      <textarea
        {...register('message', {
          required: 'メッセージを入力してください。',
          minLength: {
            value: 10,
            message: 'メッセージは10文字以上入力してください。'
          }
        })}
      />
      {errors.message && <p style={{ color: 'red' }}>{errors.message.message}</p>}

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

export default ContactForm;

<input
  {...register('username', {
    validate: value => {
      if (value.toLowerCase().includes('admin')) {
        return '「admin」は使用できません。';
      }
      return true;
    }
  })}
/>

npm install @hookform/resolvers yup

import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';

// スキーマ定義
const schema = yup.object({
  email: yup.string().email('メールアドレスの形式が不正です').required('必須項目です'),
  password: yup.string().min(6, '6文字以上必要です').required('必須項目です')
});

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: yupResolver(schema)
  });

  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email')} placeholder="メールアドレス" />
      {errors.email && <p style={{ color: 'red' }}>{errors.email.message}</p>}

      <input type="password" {...register('password')} placeholder="パスワード" />
      {errors.password && <p style={{ color: 'red' }}>{errors.password.message}</p>}

      <button type="submit">ログイン</button>
    </form>
  );
}

const { register, clearErrors } = useForm();

<input
  {...register('email')}
  onChange={() => clearErrors('email')}
/>

const { handleSubmit, formState: { isSubmitting } } = useForm();

<button type="submit" disabled={isSubmitting}>
  {isSubmitting ? '送信中…' : '送信'}
</button>

const { reset } = useForm();
const onSubmit = data => {
  console.log(data);
  reset();
};

× 入力エラーです
○ メールアドレスの形式が正しくありません（例：user@example.com）

<div className="form-field">
  <label htmlFor="email">メールアドレス</label>
  <input id="email" type="email" {...register('email')} />
  {errors.email && <p className="error-text">{errors.email.message}</p>}
</div>

.form-field {
  margin-bottom: 1.5rem;
}
.error-text {
  color: #ff4d4f;
  font-size: 0.85rem;
  margin-top: 4px;
}

{isSubmitSuccessful && (
  <p style={{ color: 'green' }}>送信が完了しました！</p>
)}

<button type="submit" disabled={isSubmitting}>
  {isSubmitting ? '送信中...' : '送信'}
</button>

<input
  id="email"
  type="email"
  aria-invalid={!!errors.email}
  aria-describedby={errors.email ? 'email-error' : undefined}
/>
{errors.email && (
  <p id="email-error" role="alert">{errors.email.message}</p>
)}

const messages = {
  ja: {
    required: 'この項目は必須です。',
    email: 'メールアドレスの形式が正しくありません。'
  },
  en: {
    required: 'This field is required.',
    email: 'Invalid email address format.'
  }
};

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

export function useLoginForm() {
  const { register, handleSubmit, formState: { errors, isSubmitting }, reset } = useForm();

  const onSubmit = async (data) => {
    console.log('送信:', data);
    await new Promise((resolve) => setTimeout(resolve, 1000)); // 疑似送信
    reset();
  };

  return { register, handleSubmit, errors, isSubmitting, onSubmit };
}

import { useLoginForm } from './useLoginForm';

function LoginForm() {
  const { register, handleSubmit, errors, isSubmitting, onSubmit } = useLoginForm();

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email', { required: '必須項目です' })} />
      {errors.email && <p>{errors.email.message}</p>}

      <input type="password" {...register('password', { required: '必須項目です' })} />
      {errors.password && <p>{errors.password.message}</p>}

      <button type="submit" disabled={isSubmitting}>送信</button>
    </form>
  );
}

function TextField({ label, name, register, error, type = "text" }) {
  return (
    <div className="form-group">
      <label>{label}</label>
      <input type={type} {...register(name)} />
      {error && <p className="error">{error.message}</p>}
    </div>
  );
}

<TextField
  label="メールアドレス"
  name="email"
  type="email"
  register={register('email', { required: 'メールアドレスは必須です' })}
  error={errors.email}
/>

// schemas/userSchema.js
import * as yup from 'yup';

export const userSchema = yup.object({
  email: yup.string().email('形式が不正です').required('必須項目です'),
  password: yup.string().min(6, '6文字以上必要です').required('必須項目です'),
});

// LoginForm.jsx
import { userSchema } from './schemas/userSchema';
import { yupResolver } from '@hookform/resolvers/yup';
import { useForm } from 'react-hook-form';

const { register, handleSubmit, formState: { errors } } = useForm({
  resolver: yupResolver(userSchema),
});

import { render, screen, fireEvent } from '@testing-library/react';
import LoginForm from './LoginForm';

test('入力が空の場合エラーが表示される', async () => {
  render(<LoginForm />);
  fireEvent.click(screen.getByText('送信'));
  expect(await screen.findByText('メールアドレスは必須です')).toBeInTheDocument();
});