FormDataオブジェクトは、非同期処理(XMLHttprequest, fetch)を使用してデータを送信するために、keyとvalueのセット値を追加することができるインターフェイスです。
WEB開発で非同期処理を使用する場合に、ユーザーのアクションに応じて一部のデータのみ書き換え・更新を行いたいことは多々あります。FormDataを使用すると、DOMツリー内にForm要素を作成して形式的なステップを踏む必要がないため、一部のinput要素の値を取得して、$.ajax, XMLHttpRequest, fetchを使用してサーバーにデータを送信することができます。
FormDataで送信されるデータは、JSONなどと異なりマルチパートのフォームデータとして扱われるので、MIMEタイプの設定が必要なファイルデータの送信にも適しています。
これから数回に分けて、①FormDataの使い方、②データの送信、③ファイルの取り扱いについて解説していきます。
DOM要素から自動的にデータを取り込む
<input type="text" id="form1" name="form1">
// DOM要素の取得
const form1 = document.getElementById('form1');
// オブジェクトの作成
const formData = new FormData(form1);
FormDataのコンストラクタに、フォーム要素のDOMオブジェクトを渡すことで自動的にフォームの内容を取り込むことができます。
FormDataの中身をみる
FormDataのオブジェクトの中身は、entries()を使用して確認することができます。ES6のスプレッド演算子を使えば下記のコードでオブジェクト内のデータを確認することができます。
console.log([...formData.entries()]);任意の値をFormDataに追加・作成する
FormDataオブジェクトはフォーム要素の内容を自動的にキャプチャするだけでなく、データの追加や新しく作成することが可能です。
FormDataオブジェクトのset()やappend()を使用して、オブジェクトに対してKeyとValueのセットでデータを追加します。
set()
// 空のFormDataオブジェクトを作成
const formData = new FormData();
// データをセットする
formData.set('name', 'name1');
formData.set('name', 'name2');
append()
// 空のFormDataオブジェクトを作成
const formData = new FormData();
// データをセットする
formData.append('name', 'name1');
formData.append('name', 'name2');
formData.append('name', 'name3');
set()とappend()の違い
上記のサンプルコードではFormDataオブジェクトにデータをセットするという観点では同じことをしていますが、データ追加後のオブジェクトの中身は異なります。それはset()とappend()には明確な処理の違いがあります。
set()は同じkeyがオブジェクト内に存在する場合、そのデータを上書きする特性を持ちます。
一方でappend()はkeyの重複に関係なく、エントリーリストにデータを追加します。
今回は、FormDataの概要とデータを追加する方法を解説しました。非同期処理でシステム開発に関わるフロントエンドエンジニアはよく使用するオブジェクトなので、ぜひ次回のサーバーサイドにデータを送信する内容も見てみてください。
【JavaScript】Fetch APIを使用してFormDataを送信する方法 : /javascript/send-formdata
参考: https://developer.mozilla.org/ja/docs/conflicting/Web/API/FormData/Using_FormData_Objects
