FormData API
FormDataインターフェースでプログラムからフォームデータを収集します
「FormData API」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
FormData とは
FormData は、フォームフィールドとその値を表す組み込みオブジェクトです。fetch または XMLHttpRequest で直接送信できます。手動でシリアライズしなくても、ファイルのアップロード、multipart エンコーディング、任意のキーと値の組み合わせを処理できます。
フォームから構築
document.forms.checkout.addEventListener("submit", async (e) => {
e.preventDefault();
const data = new FormData(e.target);
await fetch("/api/checkout", { method: "POST", body: data });
});fetch で送信
FormData を fetch の body として渡すと、リクエストの Content-Type が multipart/form-data に自動的に設定されます（適切な boundary も含まれます）。Content-Type を手動で設定しないでください。boundary は fetch 自身が生成する必要があります。
Append、Set、Delete
data.append(key, value) はキーを追加します（重複も許可されます）。data.set(key, value) は、そのキーに既存の値があれば置き換えます。data.delete(key) は、そのキーのすべての値を削除します。data.has(key) は存在を確認します。
const data = new FormData();
data.append("tag", "html");
data.append("tag", "css");
console.log(data.getAll("tag")); // ["html", "css"]ファイルアップロード
FormData はファイルを透過的に処理します。data.append("avatar", fileInput.files[0]) サーバーは、ファイル名と MIME タイプを含む multipart アップロードを受け取ります。これは、最新のコードで fetch を使ってファイルをアップロードする標準的な方法です。
反復処理
FormData は反復可能です。for (const [key, value] of data) { ... } 特定の反復には data.entries()、data.keys()、data.values() を使います。ログ出力、検証、またはフォームの JSON コピーの構築に役立ちます。
JSON への変換
multipart ではなく JSON として送信するには、Object.fromEntries(data) でプレーンオブジェクトを生成できます。ただし、重複するキーは失われます。重複キーを正しく扱うには、エントリを反復して手動でグループ化してください。純粋な JSON API では、FormData を経由せずにオブジェクトを直接構築する方が簡単です。
プログラムによる値の設定
空の FormData を構築し、値を手動で追加します。const data = new FormData(); data.append("title", title); data.append("file", file); フォームに由来しないデータ（ドラッグ＆ドロップされたファイル、API レスポンス、生成したペイロード）を送信するときに便利です。
送信ボタンの判定
送信ボタンが複数ある場合は、FormData の 2 番目の引数として送信元を渡します。new FormData(form, e.submitter) 送信元の name と value がデータに含まれるため、複数の操作を持つフォームで重要です。
URLSearchParams の仲間
application/x-www-form-urlencoded エンコーディング（ファイルがない場合のデフォルトのフォームエンコーディング）には、FormData から URLSearchParams を構築します。new URLSearchParams(data) プレーンテキストだけのフォームでは、multipart より軽量です。
よくある落とし穴
fetch の Content-Type ヘッダーを "multipart/form-data" に明示的に設定すると、アップロードが壊れます。ブラウザーが必要な boundary を追加できなくなるためです。FormData を送信するときは Content-Type を省略し、fetch に処理させてください。
理解度チェック
fetch で FormData を送信するとき、Content-Type を手動で設定してはいけないのはなぜですか？
まとめ
FormData はフォームの内容を表し、multipart/form-data によるファイルアップロードを含め、fetch で簡単に送信できます。フォーム要素から構築し、エントリを追加、設定、削除し、必要に応じて反復してください。送信時に Content-Type を設定しないでください。boundary は fetch が自動的に生成します。テキストだけの urlencoded フォームには URLSearchParams を使ってください。
よくある質問
「FormData API」レッスンは無料ですか？
はい。「FormData API」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「FormData API」で何を学びますか？
FormDataインターフェースでプログラムからフォームデータを収集します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「FormData API」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。