← カテゴリ一覧に戻る

フォームデータの送信

FormData fetch POST Object.fromEntries

フォームの入力値を収集してサーバーに送信する方法をまとめます。FormDataとJSON送信の使い分けが重要です。

デモ：フォームデータの収集

コード例

js
const form = document.querySelector('form');

form.addEventListener('submit', async (e) => {
  e.preventDefault();

  // ===== FormData 方式（ファイルアップロードに対応）=====
  const formData = new FormData(form);

  // 個別取得
  formData.get('name');        // "山田太郎"
  formData.getAll('tags');     // 複数選択された値の配列

  // オブジェクトに変換
  const obj = Object.fromEntries(formData.entries());
  // { name: "山田太郎", email: "..." }

  // fetch で送信
  await fetch('/api/submit', {
    method: 'POST',
    body: formData, // Content-Type は自動設定
    // headers は設定しない（boundary が自動追加される）
  });

  // ===== JSON 方式（REST APIに多い）=====
  const data = Object.fromEntries(new FormData(form).entries());
  await fetch('/api/submit', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data),
  });

  // FormData の手動操作
  formData.append('userId', '42');  // 追加
  formData.set('name', '新しい名前'); // 上書き
  formData.delete('tmp');            // 削除
  formData.has('email');             // true/false

ファイルアップロードの例

js
// ファイルアップロード（FormData を使う）
const fileInput = document.querySelector('input[type="file"]');
const formData = new FormData();

// 単一ファイル
formData.append('file', fileInput.files[0]);

// 複数ファイル
for (const file of fileInput.files) {
  formData.append('files', file);
}

// メタデータと一緒に送信
formData.append('description', '添付ファイルの説明');

// 進捗付き送信（XHR）
const xhr = new XMLHttpRequest();
xhr.upload.addEventListener('progress', (e) => {
  const percent = (e.loaded / e.total * 100).toFixed(0);
  progressBar.style.width = percent + '%';
});
xhr.open('POST', '/api/upload');
xhr.send(formData);

🤖 AIプロンプトテンプレート

以下の要件を満たすTypeScript + Reactコンポーネントを作成してください。

- FormDataを使ったフォームデータの収集と送信のサンプルを示す
- テキスト・ファイル・チェックボックスなど複数種類の入力を含むフォームの例を含める
- FormDataにデータを追加・削除・取得するAPIの使い方を示す
- multipart/form-dataでファイルをアップロードするサンプルを含める
- FormDataをJSONに変換してAPIに送信するサンプルを含める
- コメントは日本語で記述する

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo