【JavaScript】FormDataとは？使い方・送信方法を初心者向けにわかりやすく解説

フロントエンド開発•
JavaScript

はじめに

皆さんはウェブページでフォームを作成し、ユーザーから名前やメールアドレス、ファイルなどを受け取る場面を考えたことはないでしょうか。

JavaScriptにはフォームデータを効率的に管理するための便利な仕組みとして、FormData というオブジェクトがあります。

このオブジェクトを使うと、ブラウザとサーバー間でデータをやり取りする際に余計な手間を減らせることが多いです。

実務でも頻繁に使われるため、Web開発において覚えておいて損はありません。

そこで本記事では、JavaScriptでフォームデータを扱う方法の代表格である FormData について、基本的な使い方から実務での活用シーンまで、初心者にもわかりやすい形で解説していきます。

フォームから得た情報をサーバーに送るとき、あるいは画像やファイルをアップロードするときなど、あらゆる場面でFormDataは大いに役立ちます。

また、コード例を交えながら送信やデバッグの方法、セキュリティ面で注意すべきポイントも紹介するので、ぜひ最後まで読んでみてください。

この記事を読むとわかること

  • FormDataオブジェクト の役割やメリット
  • フォームに入力されたテキストやファイルを送信する方法
  • 実務で役立つ具体的な活用シーン
  • Ajax や fetch などとの連携で注意すべき点
  • デバッグやセキュリティ対策のポイント

ここではコード例を交えながら順番に解説していきますので、初心者の方でも理解しやすい構成になっています。

フォームデータとは

フォームデータとは、ウェブページ上で入力された情報をまとめたものです。

例えば、名前やメールアドレスなどの文字情報、画像やPDFファイルのようなバイナリデータなど、ユーザーがフォームを通じて提供するあらゆるデータが含まれます。

多くの場合、これらの入力内容はサーバーに送られ、処理や保存が行われます。

一方で、フォームが増えてくると扱うデータの量や形式も多様になりがちです。

そんなときに役立つのが、multipart/form-data というデータ形式と、それを簡単に扱える FormData というオブジェクトです。

初心者の方にとっては、まず「たくさんの入力フィールドやファイルを安全かつ簡単にサーバーへ送る」ことが主な関心事ではないでしょうか。

この疑問に答えてくれるのがFormDataなので、次の章ではFormDataオブジェクトの概要について見ていきます。

JavaScriptのFormDataオブジェクトの概要

FormDataは、HTMLフォームと連携してデータを管理しやすくするために用意されたJavaScriptの機能です。

昔からWeb開発では、フォームの送信において <form> タグでページがリロードされる仕組みが主流でした。

ただ、最近はシングルページアプリケーション（SPA）などが増え、ページのリロードなしで非同期通信を行うことが一般的になっています。

そこで、より柔軟にフォームデータを扱う方法が重要視され、FormDataがよく使われるようになりました。

FormDataの基本的な作成方法

FormDataオブジェクトを作成するには、主に下記の2種類の書き方があります。

1つ目は、HTML上の <form> エレメントを利用する方法です。

const formElement = document.querySelector("form");
const formData = new FormData(formElement);

2つ目は、空のFormDataを作って独自に値を追加していく方法です。

const formData = new FormData();
formData.append("username", "Yamada");
formData.append("email", "yamada@example.com");

これで、username というフィールドや email というフィールドをプログラム的に追加できます。

このように、フォームが手元にある場合はフォーム要素から直接データを取り込んでもいいですし、用途によっては空のFormDataを新規作成し、値を手動でセットしていくこともできます。

使いどころ

FormDataは次のようなケースで役立ちます。

  • ページのリロードなしでフォームを送信したい場合
  • 画像やドキュメントなどのファイルを一緒にアップロードしたい場合
  • Ajax を使った動的なフォーム送信を実装したい場合

さらに、サーバー側の処理がmultipart/form-data 形式で受け取る設計になっている場合にも、そのままFormDataを送れば対応できるため、開発効率が高まります。

FormDataを使った基本的なサンプル

ここでは実際にFormDataを使う簡単なサンプルを見てみましょう。

テキストデータだけを送る場合と、画像ファイルなどバイナリデータを含む例を順に紹介します。

テキストデータを送信する例

まずは、HTMLフォームに入力された文字情報を送信する例です。

<!-- index.html -->
<form id="user-form">
  <label>
    ユーザー名:
    <input type="text" name="username" />
  </label>
  <label>
    コメント:
    <textarea name="comment"></textarea>
  </label>
  <button type="submit">送信</button>
</form>

<script>
  const form = document.getElementById("user-form");

  form.addEventListener("submit", async (event) => {
    event.preventDefault();

    const formData = new FormData(form);

    try {
      const response = await fetch("/api/post-comment", {
        method: "POST",
        body: formData,
      });

      if (!response.ok) {
        throw new Error("サーバーエラーが発生しました");
      }

      // 送信後の処理（例：成功メッセージの表示など）
      console.log("データ送信に成功しました");
    } catch (error) {
      console.error("送信に失敗しました", error);
    }
  });
</script>

ここでは、event.preventDefault() でブラウザのデフォルトのフォーム送信（リロード）を防ぎ、代わりにFetch APIを用いて非同期通信を行っています。

new FormData(form) とするだけで、form 内の <input> や <textarea> の値が自動的にFormDataに含まれます。

あとは fetch の body にそのFormDataを渡すことで、フォームの値をサーバーに送る仕組みを実装できます。

画像ファイルを送信する例

次に、画像ファイルなどを扱う例です。

<!-- upload.html -->
<form id="upload-form">
  <label>
    ファイルを選択:
    <input type="file" name="filedata" accept="image/*" />
  </label>
  <button type="submit">アップロード</button>
</form>

<script>
  const uploadForm = document.getElementById("upload-form");

  uploadForm.addEventListener("submit", async (event) => {
    event.preventDefault();

    const formData = new FormData(uploadForm);

    try {
      const response = await fetch("/api/upload-file", {
        method: "POST",
        body: formData,
      });

      if (!response.ok) {
        throw new Error("ファイルアップロードに失敗しました");
      }

      console.log("アップロード成功");
    } catch (error) {
      console.error("アップロード中にエラーが発生しました", error);
    }
  });
</script>

<input type="file" ...> の要素が含まれている場合、ユーザーが選択した画像ファイルなども自動的にFormDataへ含まれます。

サーバー側が multipart/form-data に対応していれば、このまま送信するだけで画像アップロードが実装できます。

このように、ユーザー名やメールアドレスといったテキストデータだけでなく、ファイル形式のデータを一緒に送るケースにも対応できるのがFormDataの強みです。

よくある実務での活用シーン

FormDataは、実務でもさまざまな場面で利用されます。

多くのプロジェクトで、JavaScriptを使ったフォームの送信機能が必要となるからです。

以下に代表的な活用シーンを挙げてみます。

ユーザー登録フォームやプロフィール編集

ユーザーの登録情報を入力してもらう際に、文字情報だけでなくプロフィール画像などをまとめて送信する場面はよくあります。

例えばユーザー登録画面で、ユーザー名、メールアドレス、自己紹介、プロフィール画像などを一気に送信できます。

FormDataを使うと、複数の入力フィールドやファイルもスムーズに送信できるため、実装がシンプルになります。

問い合わせフォーム

企業のウェブサイトなどでは、問い合わせフォームを提供していることが一般的です。

名前やメールアドレス、問い合わせ内容、さらに添付ファイル（例：スクリーンショット）を受け取りたい場合があります。

FormDataを使えば、これらを一度にサーバーへ送信できるので、処理しやすくなります。

商品登録や在庫管理システム

ECサイトの管理画面や在庫管理システムなどでも、商品名や価格、商品画像などを一括でアップロードする場面が登場します。

こういった部分でもFormDataは便利です。

複数の商品画像をまとめて送信したい場合などでも、一つひとつの append 操作を繰り返すか、ファイル入力を複数用意して送るか、といった柔軟な対応ができます。

カスタムアプリケーションでのファイルアップロード

近年は業務システムや社内ポータルサイトなど、カスタマイズされたアプリケーションが多く存在します。

それらでユーザーがレポートや書類、画像資料などをアップロードする場面でも、FormDataを利用すると実装しやすいです。

このように、さまざまな分野でFormDataが活躍し、実務における開発効率を高めてくれるのが特徴です。

送信方法の比較：Ajax, fetch, XMLHttpRequestとの連携

フォームを送信する方法はいくつかあります。

例えば、 XHR (XMLHttpRequest) や fetch などがありますが、FormDataとの連携方法は少しずつ異なります。

以下では、それぞれの方法を簡単に比較してみます。

fetchとFormDataの組み合わせ

近年主流の方法です。

fetch("/api/example", {
  method: "POST",
  body: formData, // そのまま渡せる
});

Content-Type ヘッダーを自動で multipart/form-data に設定してくれます。

シンタックスがシンプルなうえ、Promiseベースなので記述が読みやすくなっています。

XMLHttpRequestで送信

XHRを使って送信したい場合は、下記のように書けます。

const xhr = new XMLHttpRequest();
xhr.open("POST", "/api/example");

xhr.onload = () => {
  if (xhr.status === 200) {
    console.log("送信成功");
  } else {
    console.error("エラーが発生しました");
  }
};

xhr.send(formData);

こちらも特にコンテンツタイプを指定しなくても、FormDataを渡せば multipart/form-data としてサーバーへ送信可能です。

ライブラリを使ったAjax送信

jQueryなどのライブラリを使う場合は、設定方法に制限があることがあります。

例えば $.ajax() で送るとき、processData や contentType の値を調整しないと意図した形式にならないケースがあります。

ただし、ライブラリを使わなくても、原則として FormDataをそのまま送信 すれば大丈夫なので、最近はネイティブの fetch が採用されるケースが増えている印象です。

いずれの方法でも、コード量が比較的少なく、複数のフィールドやファイルをまとめて送信できるのは大きなメリットと言えるでしょう。

フォームデータの確認方法とデバッグ

FormDataは便利ですが、データが正しくセットされているか確認したいこともあります。

ブラウザのデベロッパーツールを使ってネットワーク通信を確認するやり方が一般的ですが、FormData自体に含まれた値をJavaScriptのコンソールでチェックすることも可能です。

const formData = new FormData();
// 値の追加
formData.append("username", "Tanaka");
formData.append("email", "tanaka@example.com");

// 全てのエントリを取得して確認
for (const [key, value] of formData.entries()) {
  console.log(key, value);
}

formData.entries() はキーと値のペアを返します。

ファイルが含まれている場合は、その value が File オブジェクトになります。

また、送信した後はブラウザの開発者ツールのネットワークタブで、どのようなデータが送信されているかを確認するとよいでしょう。

そこでは multipart/form-data による送信内容を細かくチェックできます。

フォームの送信時にうまく動かない場合、まずはブラウザのデベロッパーツールでネットワーク通信を確認するのがおすすめです。ステータスコードや送信内容をしっかり見れば原因を発見しやすくなります。

こうしたデバッグのプロセスを踏むことで、誤ったキー名や値の渡し漏れ、あるいはサーバー側での受け取り処理の不備などを早期に把握できます。

マルチパートフォームデータについて

FormDataの背後では、HTTPの multipart/form-data という仕組みが使われています。

これは、複数のパート（テキストやバイナリファイルなど）をひとつのリクエストボディにまとめて送信する方式を指します。

マルチパートフォームデータのイメージ

簡単にイメージを表すと、以下のようにデータが区切り線（boundary）で分割されます。

Content-Type: multipart/form-data; boundary=----WebKitFormBoundary...

------WebKitFormBoundary...
Content-Disposition: form-data; name="username"

Tanaka
------WebKitFormBoundary...
Content-Disposition: form-data; name="filedata"; filename="image.png"
Content-Type: image/png

...ファイル内容...
------WebKitFormBoundary...--

ブラウザやFormDataがこのマルチパート構造を自動で組み立てるので、開発者が実際に上記のような文字列を自力で書く必要はありません。

バイナリデータとテキストの混在

multipart/form-data はテキストとファイルデータを同時に含められる特徴を持ちます。

例えばユーザー名、パスワード、プロフィール画像を一度に送りたい場合でも、FormDataでappendして送信すれば問題なくサーバーに渡せます。

実務では、この柔軟性がありがたい場合が多いです。

サーバー側の処理

サーバー側では、multipart/form-data を正しく解析できるミドルウェアやライブラリが導入されている必要があります。

例えばNode.jsのExpressを使う場合、multer などのライブラリを使えば、この形式のデータを受け取るのが簡単になります。

一方で、サーバーが適切に設定されていないとエラーになることもあるので注意が必要です。

セキュリティ上の注意点

フォームを扱う場合、セキュリティ面への配慮が不可欠です。

特にファイルアップロードを受け付けるなら、攻撃者が悪意あるファイルを送り込むリスクを考慮しなければなりません。

悪意あるファイルのアップロード

例えば、実行可能ファイルやスクリプトをアップロードされると、サーバー側で何らかの悪さをされる可能性があります。

これを防ぐには、拡張子の制限やファイルのタイプチェック、ウイルススキャンなどの仕組みを整えるのが一般的です。

CSRF対策

フォーム送信に関しては、Cross-Site Request Forgery（CSRF）という攻撃手法も念頭に置く必要があります。

これは、利用者のブラウザに保存された認証情報を利用し、意図しないリクエストを送らせる攻撃です。

この対策として、CSRFトークンをフォームに埋め込み、送信時にサーバー側でトークンをチェックするなどの仕組みを導入することがあります。

大きすぎるファイルの処理

大容量のファイルをアップロードされると、サーバーのストレージやメモリに負担がかかりすぎてパフォーマンスが低下する可能性があります。

アップロード制限を設定したり、ファイルを扱うAPIだけを切り出して別のサーバーに配備したり、といった方法を検討することがあります。

ファイルアップロードを無制限に許可すると、予想外に大きいデータや不適切なファイルが届く可能性があります。上限や種類を制限するなどの対策は早めに検討した方が安全です。

このように、フォーム送信はユーザーにとって使いやすい反面、開発者側のセキュリティ対策が重要になります。

FormDataそのものは利便性が高いですが、その運用には常にセキュリティ意識が伴うという点を押さえておきましょう。

まとめ

ここまで、FormData を使ったフォーム送信の仕組みや特徴を見てきました。

  • フォーム要素から自動的にデータを収集してくれるため、入力フィールドが増えても手間が少ない
  • 画像やPDFなどのファイルをまとめて送信可能
  • Ajaxやfetchなどと組み合わせることで、リロードなしのスムーズな送信が実装できる
  • セキュリティ上の注意（ファイルの種類やサイズ制限、CSRF対策など）は必ず検討すべき

初心者の方でも、フォームの仕組みと非同期通信の基本を押さえておけば、FormDataをすぐに活用できます。

実務での開発では、複数の入力欄やファイルアップロードを組み合わせるケースが多いため、このオブジェクトの使い方を覚えておくと役立つでしょう。

これを機に、皆さんもぜひFormDataを活用してみてください。

JavaScriptをマスターしよう

この記事で学んだJavaScriptの知識をさらに伸ばしませんか？
Udemyには、現場ですぐ使えるスキルを身につけられる実践的な講座が揃っています。

JavaScriptの人気講座ランキングを見る筆者おすすめ No.1 講座！「ちゃんと学ぶ、HTML/CSS + JavaScript」
フロントエンド開発の新着記事をチェック

フロントエンドエンジニアとは？初心者にもわかりやすい徹底解説