【JavaScript】FormDataの使い方｜Ajaxでフォーム送信を簡単にする方法

JavaScriptのFormDataオブジェクトを使うと、フォームデータを手軽に収集し、Ajaxで送信できます。従来のsubmitによる画面遷移を避け、非同期でデータを送ることで、スムーズなユーザー体験を実現できます。ここではFormDataの基本から応用までを解説します。

FormDataとは

FormDataはフォームの内容をキーと値のペアとして保持できるオブジェクトです。ファイルを含むデータも簡単に扱えるため、画像やドキュメントをアップロードする際にもよく利用されます。

基本的な使い方

フォーム要素を渡してFormDataを生成すると、全ての入力内容が自動的に収集されます。

<form id="myForm">
  <input type="text" name="username" value="Taro">
  <input type="email" name="email" value="taro@example.com">
  <input type="file" name="avatar">
</form>

<script>
  const form = document.getElementById('myForm');
  const formData = new FormData(form);

  // 内容を確認
  for (let [key, value] of formData.entries()) {
    console.log(key, value);
  }
</script>

値を手動で追加する

appendメソッドを使えば、フォームに存在しないデータを追加することも可能です。

const data = new FormData();
data.append('username', 'Hanako');
data.append('age', 25);

Ajaxで送信する（fetchを使用）

FormDataはそのままfetchやXMLHttpRequestで送信できます。Content-Typeは自動でmultipart/form-dataに設定されるため、自分で指定する必要はありません。

const form = document.getElementById('myForm');

form.addEventListener('submit', function(e) {
  e.preventDefault();

  const formData = new FormData(form);

  fetch('/submit.php', {
    method: 'POST',
    body: formData
  })
  .then(response => response.text())
  .then(result => {
    console.log('成功:', result);
  })
  .catch(error => {
    console.error('エラー:', error);
  });
});

送信前にデータを加工する

送信前にFormDataを編集できるため、ユーザーが入力していない値を自動的に追加したり、確認用の値を変換することも可能です。

form.addEventListener('submit', function(e) {
  e.preventDefault();

  const formData = new FormData(form);
  formData.append('timestamp', Date.now());

  fetch('/submit.php', {
    method: 'POST',
    body: formData
  });
});

サーバー側での受け取り例（PHP）

サーバーでは通常のフォーム送信と同様にデータを受け取れます。

<?php
$username = $_POST['username'];
$email = $_POST['email'];
$file = $_FILES['avatar'];

echo "名前: $username, メール: $email";
?>

まとめ

FormDataを使えば、フォームデータを簡単に収集し、Ajaxで送信できます。特にファイルを含む送信や非同期処理との相性が良く、ユーザーに快適な入力体験を提供できます。appendによる追加、fetchとの組み合わせ、送信前の加工を理解しておくと、幅広いシーンで応用できます。