useRefでEメールバリデーション

アジェンダ

React でフォームのバリデーションを実装する際、useRef フックを使用すると、DOM 要素へ直接アクセスできるため便利です。ここでは、input type='email' で入力される E メールアドレスのバリデーションを useRef を用いてどのように実装するかを記述させていただきます。

手順

ステップ 1: useRef のインポート

まず、useRef フックを React からインポートします。

import React, { useRef } from 'react';

ステップ 2: useRef の利用

次に、useRef を使って input 要素への参照を作成します。

const emailInputRef = useRef<HTMLInputElement>(null);

ステップ 3: バリデーション関数の作成

Eメールのバリデーションロジックを関数として定義します。この例では、簡単な正規表現を使っていますが、実際にはもっと複雑なロジックが必要になるかもしれません。

const validateEmail = (email: string): boolean => {
  const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return re.test(email);
};

ステップ 4: バリデーションの実行とフィードバックの表示

続いて、フォームの送信イベントでバリデーションを実行し、結果に基づいてユーザーにフィードバックを表示します。

const handleSubmit = (event: React.FormEvent) => {
  event.preventDefault();
  const email = emailInputRef.current?.value;

  if (email && validateEmail(email)) {
    alert('Eメールが有効です。');
  } else {
    alert('無効なEメールアドレスです。');
  }
};

ステップ 5: コンポーネントのレンダリング

最後に、input 要素と送信ボタンを含むフォームをレンダリングします。

const EmailForm = () => {
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="email">Eメール:</label>
      <input type="email" id="email" ref={emailInputRef} required />
      <button type="submit">送信</button>
    </form>
  );
};

これで、完成になります。上記のコードは基本的な E メールバリデーションを示していますが、useRefを用いてHTML5のバリデーション機能を直接利用する方法も紹介します。これにより、よりリッチなバリデーションフィードバックを提供することができます。

追加の実装: HTML5バリデーションの利用

フォームが送信された際に、useRefを通じて直接アクセスしたinput要素のHTML5バリデーション結果を使用する方法をおまけで記述します。

import React, { useRef } from 'react';

function EmailForm() {
  const emailInputRef = useRef<HTMLInputElement>(null);

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();

    if (!emailInputRef.current.validity.valid) {
      alert('入力されたメールアドレスは無効です。');
    } else {
      alert('送信成功！');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        メールアドレス:
        <input type="email" ref={emailInputRef} required />
      </label>
      <button type="submit">送信</button>
    </form>
  );
}

export default EmailForm;