MENU
  1. ホーム
  2. React
  3. Reactで非同期バリデーションを使ったフォーム実装ガイド

Reactで非同期バリデーションを使ったフォーム実装ガイド

React

Reactで非同期バリデーションを活用したフォームを作成することは、現代のWebアプリケーション開発において非常に重要です。ユーザー入力のリアルタイムチェックは、使いやすいインターフェースを提供するだけでなく、サーバーとのやり取りを効率的に行い、不正なデータ送信を防ぐ効果があります。本記事では、非同期バリデーションの基礎から実践的な実装方法、そしてUXの向上までを詳しく解説します。Reactのフォーム作成における課題を解決し、よりスムーズでユーザーフレンドリーな体験を提供するためのステップを見ていきましょう。

目次

非同期バリデーションの概要


非同期バリデーションとは、入力データをリアルタイムでサーバーや外部APIと連携して確認するプロセスを指します。通常のバリデーションがクライアント側で即時に処理されるのに対し、非同期バリデーションはネットワークを介したやり取りが必要です。

非同期バリデーションが必要な理由


非同期バリデーションは、以下のような状況で特に有効です：

  • ユニーク性の確認：ユーザー名やメールアドレスが他のユーザーと重複していないか確認する場合。
  • 外部システムとのデータ一致：登録番号や認証コードが正しいかを検証する場合。
  • 動的な制約：特定の条件下でルールが変わる場合（例：キャンペーンコードの有効期限）。

非同期バリデーションの仕組み

  1. ユーザーがフォームに入力するたび、非同期リクエストが発生。
  2. 入力データがサーバーに送信され、検証処理が行われる。
  3. サーバーからのレスポンスを受け取り、クライアント側で結果を反映する。

非同期バリデーションは適切に実装することで、無駄なサーバーリクエストを避けつつ、ユーザーがスムーズにフォームを操作できるようになります。

Reactフォームとバリデーションの基本

Reactを使ったフォームの作成では、フォームデータの管理とバリデーションが重要な役割を果たします。バリデーションを適切に設計することで、入力エラーを減らし、ユーザーの利便性を向上させることができます。

Reactフォームの仕組み


Reactでは、フォームの状態をコンポーネントの状態（state）で管理します。以下の手順でフォームを構築します：

  1. 状態の定義：useStateを使い、フォームの入力値を管理します。
  2. イベントハンドリング：onChangeイベントを利用して、入力値を状態に反映します。
  3. 送信処理：onSubmitイベントで入力データを処理します。
import React, { useState } from 'react';

function SimpleForm() {
  const [username, setUsername] = useState('');

  const handleChange = (e) => {
    setUsername(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Submitted:', username);
  };

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

一般的なバリデーションの実装


クライアントサイドでの基本的なバリデーションには以下が含まれます：

  • 必須フィールドのチェック：空白のまま送信されないようにする。
  • フォーマットのチェック：メールアドレスやパスワードの形式を検証する。
  • 範囲のチェック：入力値の長さや数値の範囲を制限する。

例：入力値が空の場合のエラー表示

function BasicValidationForm() {
  const [username, setUsername] = useState('');
  const [error, setError] = useState('');

  const handleChange = (e) => {
    setUsername(e.target.value);
    setError(''); // 入力中はエラーをクリア
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!username.trim()) {
      setError('Username is required');
    } else {
      console.log('Submitted:', username);
    }
  };

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

Reactフォームと非同期バリデーションの連携


この基本形に非同期バリデーションを追加することで、さらに高度なフォームが作成できます。次のセクションで、非同期バリデーションの具体的な実現方法を詳しく説明します。

非同期バリデーションの実現方法

非同期バリデーションをReactフォームで実現するには、入力データをサーバーやAPIとリアルタイムでやり取りし、その結果をフォームに反映する仕組みを作ります。ここでは、基本的な非同期バリデーションの流れとコード例を解説します。

非同期バリデーションの基本的な流れ

  1. 入力イベントの監視：ユーザーがフォームに入力するたびに、非同期バリデーションを開始します。
  2. 非同期リクエストの送信：入力値をサーバーに送信して検証します。
  3. 結果の取得と反映：レスポンスに基づいてバリデーションの結果を状態に保存します。
  4. エラー表示：バリデーションエラーがあればユーザーに通知します。

非同期バリデーションの実装例

以下の例では、ユーザー名がすでに使用されていないかを確認する非同期バリデーションを実装しています。

import React, { useState } from 'react';

function AsyncValidationForm() {
  const [username, setUsername] = useState('');
  const [error, setError] = useState('');
  const [isValidating, setIsValidating] = useState(false);

  const validateUsername = async (name) => {
    setIsValidating(true); // バリデーション中フラグ
    setError(''); // エラーをクリア

    try {
      const response = await fetch(`/api/validate-username?username=${name}`);
      const result = await response.json();

      if (!result.isValid) {
        setError('Username is already taken');
      }
    } catch (e) {
      setError('Error validating username');
    } finally {
      setIsValidating(false); // バリデーション終了
    }
  };

  const handleChange = (e) => {
    const value = e.target.value;
    setUsername(value);

    if (value.trim()) {
      validateUsername(value); // 入力値を非同期検証
    } else {
      setError('Username is required');
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!error && username.trim()) {
      console.log('Form submitted:', username);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Username:
        <input
          type="text"
          value={username}
          onChange={handleChange}
          disabled={isValidating} // バリデーション中は無効化
        />
      </label>
      {isValidating && <p>Validating...</p>}
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <button type="submit" disabled={!!error || isValidating}>
        Submit
      </button>
    </form>
  );
}

export default AsyncValidationForm;

コードのポイント

  1. validateUsername関数：APIと通信して入力値を検証します。
  2. 状態管理：errorでエラーメッセージ、isValidatingでバリデーション中の状態を管理します。
  3. 非同期処理の制御：finallyでバリデーション終了時にフラグをリセットします。

リアルタイムバリデーションの注意点

  • リクエストの抑制：入力ごとにリクエストを送ると負荷が高まるため、デバウンスを利用して頻度を制御します。
  • エラーハンドリング：ネットワークエラーやタイムアウト時の処理を忘れないようにします。
  • パフォーマンス：無駄なレンダリングを防ぐため、必要最低限の状態だけを更新します。

次のセクションでは、APIとの連携をさらに詳細に解説します。

APIとの連携

非同期バリデーションを実現するために、フォーム入力値をAPIと連携して検証する方法を詳しく解説します。ここでは、ReactとAPI間のデータフローや注意点について説明し、具体的なコード例を交えながら進めます。

ReactとAPIのデータフロー

  1. 入力データの取得：フォームフィールドから入力値を取得します。
  2. 非同期リクエストの送信：入力値をAPIに送信し、サーバー側でバリデーションを実行します。
  3. レスポンスの処理：APIのレスポンスに基づいてフォームの状態を更新します。
  4. エラーメッセージの表示：エラーがある場合はユーザーにフィードバックします。

API連携のためのコード例

以下の例では、APIエンドポイントを使用してメールアドレスのユニーク性を確認する非同期バリデーションを実装しています。

import React, { useState } from 'react';

function EmailValidationForm() {
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');
  const [isChecking, setIsChecking] = useState(false);

  // APIとの連携によるバリデーション
  const validateEmail = async (email) => {
    setIsChecking(true); // 検証中フラグを設定
    setError(''); // エラーを初期化

    try {
      const response = await fetch('/api/validate-email', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ email }),
      });

      if (!response.ok) {
        throw new Error('Network response was not ok');
      }

      const result = await response.json();

      if (!result.isValid) {
        setError('Email is already in use');
      }
    } catch (e) {
      setError('An error occurred while validating');
    } finally {
      setIsChecking(false); // 検証終了
    }
  };

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

    if (value.trim()) {
      validateEmail(value); // API検証を呼び出し
    } else {
      setError('Email is required');
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!error && email.trim()) {
      console.log('Email submitted:', email);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Email:
        <input
          type="email"
          value={email}
          onChange={handleChange}
          disabled={isChecking} // 検証中は入力をブロック
        />
      </label>
      {isChecking && <p>Checking email...</p>}
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <button type="submit" disabled={!!error || isChecking}>
        Submit
      </button>
    </form>
  );
}

export default EmailValidationForm;

コード解説

  1. fetchによるPOSTリクエスト：メールアドレスをAPIエンドポイントに送信します。
  2. 非同期処理の制御：isChecking状態で検証中のUIを制御します。
  3. レスポンスのチェック：APIからのレスポンスを元にバリデーション結果を更新します。

API設計のポイント

  • 適切なエンドポイント設計：/api/validate-emailのような明確なエンドポイントを使用します。
  • セキュリティ：データ検証ロジックはサーバー側に配置し、信頼できないクライアント入力に依存しないようにします。
  • スピードと効率性：レスポンスの迅速化を意識して設計します（例：キャッシュを活用）。

非同期バリデーションとAPIのベストプラクティス

  • デバウンス：リクエストを頻繁に送らないようにデバウンスを適用します（例：300ms間隔）。
  • レスポンスのスキーマ：APIレスポンスは一貫性のあるフォーマット（例：{ isValid: true }）を維持します。
  • エラーハンドリング：ネットワークエラーやタイムアウトへの対応を実装します。

次のセクションでは、Reactのフォームライブラリを活用した非同期バリデーションの効率化を解説します。

フォームライブラリの活用

非同期バリデーションを効率的に実装するためには、React Hook FormやFormikなどのフォームライブラリを活用するのが効果的です。これらのライブラリは、状態管理やバリデーションロジックを簡略化し、生産性を向上させます。

React Hook Formを使った非同期バリデーション


React Hook Formは、軽量で柔軟性のあるフォームライブラリです。独自のregisterメソッドとuseFormフックを使うことで、フォームデータの管理が容易になります。

以下は、React Hook Formで非同期バリデーションを実装する例です。

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

function AsyncValidationWithReactHookForm() {
  const {
    register,
    handleSubmit,
    setError,
    clearErrors,
    formState: { errors, isSubmitting },
  } = useForm();

  const onSubmit = (data) => {
    console.log('Form submitted:', data);
  };

  const validateUsername = async (value) => {
    if (!value.trim()) {
      return 'Username is required';
    }
    try {
      const response = await fetch(`/api/validate-username?username=${value}`);
      const result = await response.json();
      if (!result.isValid) {
        return 'Username is already taken';
      }
    } catch {
      return 'Validation error occurred';
    }
    return true;
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>
        Username:
        <input
          type="text"
          {...register('username', {
            validate: validateUsername, // 非同期バリデーションを設定
          })}
        />
      </label>
      {errors.username && <p style={{ color: 'red' }}>{errors.username.message}</p>}
      <button type="submit" disabled={isSubmitting}>
        Submit
      </button>
    </form>
  );
}

export default AsyncValidationWithReactHookForm;

コードのポイント

  1. register関数：フォームフィールドを登録します。
  2. validateプロパティ：カスタムバリデーションとして非同期関数を設定します。
  3. エラー管理：errorsオブジェクトでエラー状態を確認します。

Formikを使った非同期バリデーション


Formikは、高度なフォーム管理機能を提供するライブラリです。Formikでは、validate関数やonSubmitハンドラーを活用して非同期バリデーションを実装できます。

以下はFormikを使用した非同期バリデーションの例です。

import React from 'react';
import { Formik, Field, Form, ErrorMessage } from 'formik';

function AsyncValidationWithFormik() {
  const validateUsername = async (value) => {
    if (!value.trim()) {
      return 'Username is required';
    }
    try {
      const response = await fetch(`/api/validate-username?username=${value}`);
      const result = await response.json();
      if (!result.isValid) {
        return 'Username is already taken';
      }
    } catch {
      return 'Validation error occurred';
    }
  };

  return (
    <Formik
      initialValues={{ username: '' }}
      onSubmit={(values) => {
        console.log('Form submitted:', values);
      }}
    >
      {({ isSubmitting }) => (
        <Form>
          <label>
            Username:
            <Field name="username" validate={validateUsername} />
          </label>
          <ErrorMessage name="username" component="p" style={{ color: 'red' }} />
          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </Form>
      )}
    </Formik>
  );
}

export default AsyncValidationWithFormik;

コードのポイント

  1. Fieldコンポーネント：入力フィールドの自動管理を行います。
  2. validateプロパティ：バリデーション関数を指定します。
  3. ErrorMessageコンポーネント：エラーメッセージの簡単なレンダリングをサポートします。

ライブラリ選択のポイント

  • React Hook Form：シンプルなフォーム構築と軽量なパフォーマンスを求める場合に適しています。
  • Formik：複雑なフォームロジックや大規模なプロジェクトでの使用に最適です。

どちらのライブラリも非同期バリデーションをサポートしており、フォームの作成効率を大幅に向上させます。次のセクションでは、エラーメッセージの表示とUX向上の具体的な方法を解説します。

エラーメッセージの表示とUX向上

エラーメッセージの適切な表示は、フォームの使いやすさを大きく左右します。非同期バリデーションでは、リアルタイムで検証結果をユーザーにわかりやすく伝えることが重要です。このセクションでは、効果的なエラーメッセージの表示方法と、UX（ユーザーエクスペリエンス）を向上させるための工夫を解説します。

エラーメッセージの設計

エラーメッセージの設計では、次のポイントを考慮する必要があります：

  1. 即時性：ユーザーが入力後すぐにエラーを確認できるようにする。
  2. 具体性：何が問題で、どのように修正すればよいかを具体的に示す。
  3. 視覚的強調：エラーメッセージが目立つデザインを採用する。

以下の例では、エラーをリアルタイムで表示し、修正を促す設計を実装しています。

import React, { useState } from 'react';

function ErrorDisplayForm() {
  const [username, setUsername] = useState('');
  const [error, setError] = useState('');
  const [isValidating, setIsValidating] = useState(false);

  const validateUsername = async (value) => {
    setIsValidating(true);
    setError('');
    try {
      const response = await fetch(`/api/validate-username?username=${value}`);
      const result = await response.json();
      if (!result.isValid) {
        setError('This username is already in use. Try another one.');
      }
    } catch {
      setError('An error occurred. Please try again later.');
    } finally {
      setIsValidating(false);
    }
  };

  const handleChange = (e) => {
    const value = e.target.value;
    setUsername(value);
    if (value.trim()) {
      validateUsername(value);
    } else {
      setError('Username cannot be empty.');
    }
  };

  return (
    <form>
      <label>
        Username:
        <input type="text" value={username} onChange={handleChange} />
      </label>
      {isValidating && <p>Validating username...</p>}
      {error && <p style={{ color: 'red', fontWeight: 'bold' }}>{error}</p>}
      <button type="submit" disabled={!!error || isValidating}>
        Submit
      </button>
    </form>
  );
}

export default ErrorDisplayForm;

エラーメッセージ表示のベストプラクティス

  1. インライン表示
    エラーメッセージは入力フィールドの直下に表示することで、エラー箇所を直感的に示します。
  2. 色とアイコンの活用
    赤色やエラーマークを使用して、エラー状態を視覚的に強調します。
  3. 修正ガイドの提供
    「もう少し長いユーザー名を入力してください」など、修正方法を具体的に指示します。

UXを向上させる工夫

リアルタイムフィードバック


入力中にエラーを即座に反映することで、ユーザーがその場で修正できるようにします。

状態に応じたボタンの活性化


バリデーションエラーがある場合は送信ボタンを無効化し、ユーザーが誤った状態で進むのを防ぎます。

<button type="submit" disabled={!!error || isValidating}>
  Submit
</button>

親切なメッセージ


「〇〇が必要です」「もう一度入力してください」のように、否定的な表現ではなく前向きな表現を心がけます。

ローディングインジケーター


非同期バリデーション中には「Validating…」などのメッセージを表示し、処理中であることを明示します。

UX向上の効果


これらの工夫を実装することで、ユーザーは次のようなメリットを得られます：

  • エラーの場所や原因を迅速に理解できる。
  • 修正方法が明確で、ストレスを感じない。
  • フォーム送信時のミスを防ぎ、スムーズに操作できる。

次のセクションでは、非同期バリデーションのパフォーマンス最適化について解説します。

パフォーマンス最適化

非同期バリデーションは、リアルタイムでのサーバーとの通信を伴うため、効率的な設計が重要です。無駄なリクエストや遅延を減らし、スムーズなユーザー体験を提供するためのパフォーマンス最適化手法を紹介します。

非同期リクエストの最適化

デバウンスの実装


入力ごとにリクエストを送信すると、サーバーの負荷が高まります。デバウンスを利用してリクエスト頻度を制御します。以下はlodashライブラリを使ったデバウンスの例です。

import React, { useState, useCallback } from 'react';
import debounce from 'lodash.debounce';

function DebouncedValidationForm() {
  const [username, setUsername] = useState('');
  const [error, setError] = useState('');
  const [isChecking, setIsChecking] = useState(false);

  const validateUsername = async (value) => {
    setIsChecking(true);
    setError('');
    try {
      const response = await fetch(`/api/validate-username?username=${value}`);
      const result = await response.json();
      if (!result.isValid) {
        setError('Username is already taken');
      }
    } catch {
      setError('An error occurred. Please try again.');
    } finally {
      setIsChecking(false);
    }
  };

  const debouncedValidation = useCallback(debounce(validateUsername, 300), []);

  const handleChange = (e) => {
    const value = e.target.value;
    setUsername(value);
    if (value.trim()) {
      debouncedValidation(value);
    } else {
      setError('Username is required.');
    }
  };

  return (
    <form>
      <label>
        Username:
        <input type="text" value={username} onChange={handleChange} />
      </label>
      {isChecking && <p>Validating...</p>}
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <button type="submit" disabled={!!error || isChecking}>
        Submit
      </button>
    </form>
  );
}

export default DebouncedValidationForm;

リクエストのキャンセル


ユーザーが入力を変更した場合、古いリクエストをキャンセルして最新の入力値のみを検証します。以下はAbortControllerを使った例です。

const validateUsername = async (value, controller) => {
  setError('');
  setIsChecking(true);
  try {
    const response = await fetch(`/api/validate-username?username=${value}`, { signal: controller.signal });
    const result = await response.json();
    if (!result.isValid) {
      setError('Username is already taken');
    }
  } catch (error) {
    if (error.name !== 'AbortError') {
      setError('An error occurred. Please try again.');
    }
  } finally {
    setIsChecking(false);
  }
};

const handleChange = (e) => {
  const value = e.target.value;
  setUsername(value);
  controller.abort(); // 古いリクエストをキャンセル
  controller = new AbortController(); // 新しいリクエスト用のコントローラーを作成
  if (value.trim()) {
    validateUsername(value, controller);
  } else {
    setError('Username is required.');
  }
};

UIパフォーマンスの最適化

入力中のローディング表示


非同期処理中は、ローディングインジケーターを表示して処理中であることを示します。

{isChecking && <p>Checking availability...</p>}

エラーメッセージの遅延表示


入力中はエラーメッセージを一時的に非表示にして、余計な混乱を防ぎます。

if (!isChecking && error) {
  return <p style={{ color: 'red' }}>{error}</p>;
}

サーバーサイドの最適化

キャッシュの活用


最近の検証リクエスト結果をキャッシュし、同じ入力値へのリクエストを短絡的に処理します。

バッチ処理


複数のバリデーションリクエストをまとめて処理するAPIを設計することで、通信回数を削減します。

パフォーマンス最適化の効果

  • サーバーへの負荷が軽減され、応答速度が向上します。
  • ユーザーはスムーズな操作感を得られます。
  • 必要最小限のリソースで効果的な非同期バリデーションを実現できます。

次のセクションでは、非同期バリデーションを利用した応用例について解説します。

応用例：メール登録フォーム

非同期バリデーションを活用した実践的な応用例として、メールアドレスの登録フォームを構築します。この例では、APIを利用して入力されたメールアドレスが有効かつ未登録であるかを検証します。

実装の概要


このメール登録フォームでは以下の機能を実装します：

  1. メールアドレスの形式チェック：正しいフォーマットで入力されているかを確認。
  2. 非同期バリデーション：サーバーに問い合わせ、メールアドレスの重複を検証。
  3. リアルタイムフィードバック：入力中にエラーメッセージを表示し、修正を促す。

コード例：メール登録フォーム

以下はReact Hook Formを使用した具体的なコード例です。

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

function EmailRegistrationForm() {
  const {
    register,
    handleSubmit,
    setError,
    clearErrors,
    formState: { errors, isSubmitting },
  } = useForm();

  const onSubmit = (data) => {
    console.log('Email submitted:', data.email);
  };

  const validateEmail = async (value) => {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(value)) {
      return 'Invalid email format';
    }

    try {
      const response = await fetch('/api/validate-email', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ email: value }),
      });

      const result = await response.json();
      if (!result.isValid) {
        return 'This email is already registered';
      }
    } catch {
      return 'Error validating email. Please try again later.';
    }
    return true;
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>
        Email Address:
        <input
          type="email"
          {...register('email', {
            validate: validateEmail, // 非同期バリデーションを適用
          })}
        />
      </label>
      {errors.email && <p style={{ color: 'red' }}>{errors.email.message}</p>}
      <button type="submit" disabled={isSubmitting}>
        Register
      </button>
    </form>
  );
}

export default EmailRegistrationForm;

コードの解説

  1. validateEmail関数
  • メールアドレスのフォーマットチェックを行います。
  • APIエンドポイントにリクエストを送信し、登録状況を検証します。
  1. エラーメッセージの表示
  • 入力が無効な場合はリアルタイムでエラーメッセージを表示します。
  1. 送信ボタンの制御
  • バリデーションが完了するまで送信ボタンを無効化し、誤操作を防ぎます。

UX向上の工夫

リアルタイム検証とインジケーター


バリデーション中はローディングメッセージを表示し、処理状況を明確にします。

{isSubmitting && <p>Validating email...</p>}

ポジティブなフィードバック


エラーがない場合、フォームを送信する準備が整ったことを視覚的に示します。

アクセシビリティの配慮

  • エラーメッセージをaria-live属性で設定し、スクリーンリーダーがエラーを読み上げるようにします。

応用例の効果

  • ユーザーが間違いに気づきやすくなり、登録の成功率が向上します。
  • サーバー側でのエラー発生を最小限に抑えることができます。
  • フォームの使いやすさと信頼性を高め、良好なユーザー体験を提供できます。

次のセクションでは、本記事の内容を簡潔にまとめます。

まとめ

本記事では、Reactで非同期バリデーションを活用したフォームの実装方法について解説しました。非同期バリデーションの基本概念から、APIとの連携、フォームライブラリの活用、UX向上の工夫、そして実践的な応用例までを詳しく説明しました。

非同期バリデーションを適切に実装することで、ユーザーがエラーを即座に修正できる直感的なフォームを作成できます。また、デバウンスやリクエストキャンセルといったパフォーマンス最適化を施すことで、効率的でストレスのないユーザー体験を提供できます。

Reactフォームでの非同期バリデーションは、ユーザーの利便性とシステムの信頼性を高めるための重要な技術です。このガイドを活用し、より高度でユーザーフレンドリーなフォーム構築に挑戦してみてください。

React
フォーム React 非同期バリデーション

コメント

コメントする

目次