FormData オブジェクト
フォームから multipart ペイロードを作成します。
「FormData オブジェクト」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
FormDataとは
FormDataは、フォームのフィールドとその値を表すキーと値のペアを構築するためのブラウザー API です。ファイルを含むデータをサーバーに送信するための標準的な方法です。
multipart/form-dataとしてエンコードされるため、バイナリのアップロードにも対応しています。
空のFormDataを作成する
空のFormDataを作成し、appendを使ってフィールドを1つずつ追加します。
const data = new FormData();
data.append('username', 'ada');
data.append('email', 'ada@example.com');
console.log(data.get('username'));フォーム要素から構築する
コンストラクターに<form>要素を渡すと、名前が付いたすべての入力項目が自動的に取得されます。最も一般的な使い方です。
const form = document.querySelector('#signup');
const data = new FormData(form);
for (const [key, value] of data.entries()) {
console.log(key, value);
}appendとsetの違い
appendはキーがすでに存在していても値を追加するため、1つのキーに複数の値を設定できます。setは、そのキーに存在するすべての値を置き換えます。
const data = new FormData();
data.append('tag', 'a');
data.append('tag', 'b');
console.log(data.getAll('tag'));
data.set('tag', 'only');
console.log(data.getAll('tag'));値を読み取る
getはキーに対応する最初の値を返し、getAllはすべての値を配列として返します。hasはキーの存在を確認します。
const data = new FormData();
data.append('color', 'red');
data.append('color', 'blue');
console.log(data.get('color'));
console.log(data.getAll('color'));
console.log(data.has('color'));フィールドを削除する
deleteは、キーに対応するすべての値を削除します。送信前にフィールドを取り除くときに便利です。
const data = new FormData();
data.append('keep', '1');
data.append('remove', '2');
data.delete('remove');
console.log(data.has('remove'));
console.log(data.has('keep'));エントリを反復処理する
FormDataは反復可能です。entries、keys、values、またはfor...ofループを使って、すべてのペアを順番に処理できます。
const data = new FormData();
data.append('a', '1');
data.append('b', '2');
for (const key of data.keys()) {
console.log('field: ' + key);
}ファイルを追加する
appendの値にはFileまたはBlobを指定できます。3番目の引数を省略可能で、サーバーに送信するファイル名を設定できます。
const fileInput = document.querySelector('#avatar');
const data = new FormData();
data.append('avatar', fileInput.files[0], 'profile.png');
console.log(data.get('avatar').name);multipart/form-dataを使う理由
FormDataはmultipart/form-dataとしてシリアライズされるため、1つのリクエストボディでテキストフィールドとバイナリファイルの内容の両方を送信できます。ファイルのアップロードにこの形式が使われる主な理由です。
const data = new FormData();
data.append('title', 'Vacation Photo');
data.append('photo', new Blob(['binary'], { type: 'image/png' }), 'pic.png');
console.log(data.has('photo'));オブジェクトに変換する
テキストだけの単純なフォームであれば、Object.fromEntriesを使ってFormDataを通常のオブジェクトに変換できます。ただし、同じキーが繰り返されている場合は1つの値だけが残ります。
const form = document.querySelector('#login');
const data = new FormData(form);
const plain = Object.fromEntries(data.entries());
console.log(plain);FormDataが重要な理由
FormDataは、HTMLフォームとネットワークリクエストをつなぐ役割を果たします。フィールドとファイルを収集し、同じキーの繰り返しに対応し、バイナリを安全にエンコードできます。次はFileReaderでファイルの内容を読み取り、その後fetchでFormDataを送信します。
const form = document.querySelector('#contact');
const data = new FormData(form);
data.append('source', 'web');
console.log([...data.keys()]);確認問題
FormDataにおけるappendとsetの違いは何ですか。
まとめ：FormDataオブジェクト
フォームデータをパッケージ化する方法を学びました。
new FormData(form)を使うと、名前が付いた入力項目が自動的に取得されます。appendは同じキーの繰り返しを許可し、setは既存の値を置き換えます。get、getAll、hasで値を読み取り、entriesで反復処理します。- multipart/form-dataとしてエンコードされるため、ファイルやバイナリに対応しています。
よくある質問
「FormData オブジェクト」レッスンは無料ですか？
はい。「FormData オブジェクト」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「FormData オブジェクト」で何を学びますか？
フォームから multipart ペイロードを作成します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「FormData オブジェクト」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- FormData オブジェクト
- FileReader でファイルを読み取る
- Blob とオブジェクト URL
- Fetch でファイルをアップロードする