フォームは Web アプリケーションに不可欠であり、ユーザーの対話とデータ収集を可能にします。 React.js では、効率と保守性を確保するために、状態管理とコンポーネント駆動型アーキテクチャを使用してフォームを構築します。このガイドでは、React.js でフォームを構築し、アプリケーションを堅牢で使いやすいものにするためのベスト プラクティスについて説明します。
 

1.制御されたコンポーネントを使用する

React でフォーム入力を処理するには、制御されたコンポーネントが推奨される方法です。フォーム データをコンポーネントの状態に保持するため、管理と検証が容易になります。
 
すべてのフォーム入力値を状態に保存します。オブジェクトを作成し、すべての入力を状態のプロパティにマップします。以下の例

import React, { useState } from 'react';

const MyForm = () => {


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

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

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
  };

return (
  

2.エラー処理

エラー処理と検証はフォームの重要な部分です。ユーザーが入力したすべての値を検証してエラーをチェックし、次のようなすべてのケースに対処する必要があります。

• null/未定義を取得しています
• 空の値を取得しています
• 無効なデータ型など

ユーザー エクスペリエンスを向上させ、サーバーの負荷を軽減し、最終的にパフォーマンスを向上させるために、クライアント側の検証を実装する必要があります。 Yup などのライブラリやカスタム検証ロジックを利用して、データの整合性を確保します。

カスタム検証ロジックを実装する方法を見てみましょう

const validate = (formData) => {
  const errors = {};
  if (!formData.name) errors.name = 'Name is required';
  if (!formData.email) errors.email = 'Email is required';
  return errors;
};
const MyForm = () => {
  const [formData, setFormData] = useState({ name: '', email: '' });
  const [errors, setErrors] = useState({});
  const handleSubmit = (e) => {
    e.preventDefault();
    const validationErrors = validate(formData);
    if (Object.keys(validationErrors).length === 0) {
    console.log(formData);
    } else {
    setErrors(validationErrors);
  }
};
return (
  

作業を容易にするために、Yup パッケージを使用してフォーム データをスムーズに検証する必要があります。これは、React-Hook-Form や Formik などのフォーム ライブラリで使用される非常に人気のあるパッケージです。
はいドキュメント: https://www.npmjs.com/package/yup
 

3.サードパーティのライブラリを活用する

Formik や React Hook Form などのライブラリはフォーム管理を簡素化し、すぐに使える強力な機能を提供し、開発者がよりスケーラブルで柔軟な方法でフォームの構築と検証を容易にします

Formik の使用:

ドキュメント:- https://formik.org/docs/overview

import React from 'react';
import ReactDOM from 'react-dom';
import { Formik, Field, Form } from 'formik';


const BasicForm = () => (
   
 
    
Sign Up
     {
    await new Promise((r) => setTimeout(r, 500));
    alert(JSON.stringify(values, null, 2));
  }}
>
  

    First Name
    


    Last Name
    


    Email
    
   Submit
  
 

);


ReactDOM.render(, document.getElementById('root'));

クリックしてライブ Formik デモをチェック

結論

React.js でのフォームの構築は、次のベスト プラクティスに従うことで簡単かつ効率的に行うことができます。状態管理に制御されたコンポーネントを使用し、入力を徹底的に検証し、サードパーティ ライブラリを活用し、適切なスタイルで UX を強化し、パフォーマンスを最適化して応答性の高い堅牢なフォームを作成します。
これらのガイドラインに従うことで、フォームの信頼性、ユーザーフレンドリー、保守性を確保でき、ユーザーと開発者の両方にシームレスなエクスペリエンスを提供できます。