formDataとは何か？

一言で言うと：

フォームに入力されたデータのかたまり

🔍 具体例で考える

あなたのUploadModalにはこれがあります：

<form action={action}>
  <input name="title" />
  <input name="composer" />
  <input name="file" type="file" />
</form>

ユーザーが：

• 曲名：エチュード

• 作曲者：ショパン

• ファイル：sample.xml

と入力して「登録」ボタンを押す。

その瞬間に何が起きる？

ブラウザが自動で：

{
  title: "エチュード",
  composer: "ショパン",
  file: (ファイルデータ)
}

というデータをまとめます。

これが

👉 formData

📦 もう少し正確に

formDataは

Web標準のオブジェクト

名前は：

FormData

💡 取り出し方

あなたのServer Action：

export async function uploadScore(formData: FormData)

ここで受け取っているのが

そのフォームの中身。

取り出し例

const title = formData.get("title")

ここで：

👉 name="title" の値が取れる

🎮 つまりこういう対応

🧠 超重要ポイント

formDataは

❌ Reactのpropsではない
❌ useStateでもない

✅ HTMLフォームのデータ

📺 イメージ図

[ブラウザ]

<form>
  title = "エチュード"
  composer = "ショパン"
  file = sample.xml
</form>

↓ submit

FormDataという箱が作られる

↓ サーバーへ送信

uploadScore(formData)

🔥 なぜこれが特別？

昔はこうでした：

onSubmit={handleSubmit}

const formData = new FormData(event.target)

自分で作っていた。