Reactでフォームを作成するのは、Webアプリケーションを作る上でとても重要です。しかし、ただフォームを作るだけではなく、ユーザーが正しい情報を入力できるようにバリデーションを実装することも大切です。このガイドでは、初めてReactを使う人向けに、フォーム入力とバリデーションの基本を紹介します。

Reactとは？

Reactは、ユーザーインターフェースを作成するためのJavaScriptライブラリです。コンポーネントという小さな部品を組み合わせて、視覚的にリッチなアプリケーションを構築します。フォームもコンポーネントの一部として考えることができます。

フォームの基本を理解しよう

フォームは、ユーザーから情報を受け取るための方法です。Reactでは、フォームの状態を管理するために「ステート」と呼ばれる機能を使います。例を見てみましょう。

シンプルなフォームの作成

import React, { useState } from 'react';

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

    const handleSubmit = (event) => {
        event.preventDefault();
        alert(`こんにちは、${name}さん！`);
    };

    return (
        <form onSubmit={handleSubmit}>
            <label>名前:</label>
            <input 
                type="text" 
                value={name} 
                onChange={(e) => setName(e.target.value)} 
            />
            <button type="submit">送信</button>
        </form>
    );
}

export default SimpleForm;

このコードでは、フォームに名前を入力し、送信ボタンをクリックするとアラートが表示されます。「useState」は、フォームの状態を管理するためのフックです。

バリデーションを追加しよう

ユーザーが正しい情報を入力しているかをチェックするためにバリデーションを行います。例えば、名前が空でないかを確認してみましょう。

function ValidatedForm() {
    const [name, setName] = useState('');
    const [error, setError] = useState('');

    const handleSubmit = (event) => {
        event.preventDefault();
        if (name.trim() === '') {
            setError('名前を入力してください');
        } else {
            alert(`こんにちは、${name}さん！`);
            setError('');
        }
    };

    return (
        <form onSubmit={handleSubmit}>
            <label>名前:</label>
            <input 
                type="text" 
                value={name} 
                onChange={(e) => setName(e.target.value)} 
            />
            <button type="submit">送信</button>
            {error && <p style="color:red">{error}</p>}
        </form>
    );
}

export default ValidatedForm;

ここでは、名前が空の場合にエラーメッセージを表示するようにしました。「setError」を使ってエラーメッセージを管理し、条件によって表示しています。