JavaScriptにおけるFormDataの扱い

次のようなフォームがあるとします：

html<form action="/target/" method="POST">
  <input name="test1" value="123">
  <input name="test2" value="456">
  <input type="submit">
</form>

このフォームのデータをキーと値のペアとして取得したいとします。 そのためにはループを実行して目的のデータを構築しなければならないことは明らかです。 しかし、JavaScriptにはより簡単な方法があります。フォームのデータを整然とした形式で取得できる特別なオブジェクトFormDataを使用することができます。

このオブジェクトの扱いについて見ていきましょう。 まずは、フォームへの参照を取得します：

javascriptlet form = document.querySelector('form');

次に、このフォームを使用してオブジェクトを作成します：

javascriptlet formData = new FormData(form);

このオブジェクトをコンソールに出力できますが、この方法ではフォームのデータを確認することはできません：

javascriptconsole.log(formData);

フォームのデータを確認するために、このオブジェクトを配列に変換します：

javascriptconsole.log(Array.from(formData));