その技術の概要と、利用する意味にフォーカスした記事になります。
注意
未経験から転職した、一年目のエンジニアが、作成したものになります。
そのため、至らぬ表現や、誤った表現をしている場合があります。
経験豊富な先輩エンジニアの方々へ
もし、誤った情報を記載していた際は、大変お手数をおかけしますが、ご指摘いただけますと幸いです。
少しでも、皆様のお役に立てれば幸いです。
記事の内容
- どんな内容なのか
- どういう目的で使うか
- どうやって使えばいいか
どんな内容なのか
FormData インターフェイスは、フォームフィールドおよびそれらの値から表現されるキーと値のペアのセットを簡単に構築する手段を提供します。これは fetch()、XMLHttpRequest.send()、navigator.sendBeacon() の各メソッドを用いることで送信が可能です。エンコーディング型を "multipart/form-data" に設定した場合にフォームが使用するものと同じ形式を使用します。
つまり、「キーと値のペアのセットを簡単に構築する手段」です。
また、使用できるメソッドの中に、「append」や「set」などがあり、オブジェクトとしてデータを追加できるものです。
どういう目的で使うか
送信用のフォームデータを作成したり、送信方法を管理するフォーム要素内のデータを取得するために使用できます。
引用：mdn web docks
Formのデータを作成する際に使用します。
既存の
<form>のデータを含む FormData オブジェクトを構築するには、 FormData オブジェクトの作成時にその form 要素を指定します。
引用：mdn web docs
HTMLのformタグのデータを、そのままFormDataオブジェクトに入れる事で、formの内容を反映する事ができる。
formに入力されている情報を、そのまま送信したりできるイメージです。
ゼロから FormData オブジェクトを作成する
以下のように FormData オブジェクトはあなた自身で作成でき、インスタンス化したら append() メソッドを呼び出すことでフィールドに付加します:
引用：mdn web doc
Formからデータを作成するだけでなく、自分でインスタンス化して、そのインスタンスに対して値を追加していく、こともできる。
どうやって使えばいいか
細かい使用方法は、別のサイトをご参照ください
ここでは、ざっくりと概要をお伝えします。
- 中身を追加する(メソッド：set, append)
- 中身を確認する(メソッド：entries)
- 送信する
大きく三つに分類できるかなと思います。
参考文献
この記事を書く際に、参考にさせていただいたサイトをご紹介します。