FormData

FormDataは、HTMLフォームのデータを簡単に扱うためのWebAPIのインターフェースです。主にフォームの内容をサーバーに送信する際に使用されます。

使用例：

// フォーム送信イベントのリスナー
form.addEventListener('submit', function(e) {
    e.preventDefault(); // デフォルトの送信を防ぐ
    const formData = new FormData(this); // データの取得
    console.log(formData.get('username')); // 'username'フィールドの値を取得

    // データの追加
    formData.append('timestamp', Date.now());

    // サーバーへの送信（Fetch APIを使用）
    fetch('/submit-url', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));
});

この例では、フォームが送信されたときにFormDataオブジェクトを作成し、データを操作してからサーバーに送信しています。

インタラクティブデモ

デモコンポーネントのコード：

// FormDataデモコンポーネント
const FormDataDemo = () => {
    const [result, setResult] = useState('');

    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        const formData = new FormData(e.currentTarget);

        // タイムスタンプを追加
        formData.append('timestamp', new Date().toISOString());

        // 結果を表示
        let resultHTML = '<h3>FormDataの内容:</h3>';
        formData.forEach((value, key) => {
            resultHTML += `<p><strong>${key}:</strong> ${value}</p>`;
        });

        setResult(resultHTML);

        // 通常はここでサーバーにデータを送信しますが、
        // このデモではコンソールに出力するだけにします
        console.log('サーバーに送信されるデータ:', Object.fromEntries(formData));
    };
    // ...
};