小
小松崎鉄雄
formDataとは何か?
2026年02月26日
要約を生成中...
一言で言うと:
フォームに入力されたデータのかたまり
🔍 具体例で考える
あなたの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" の値が取れる
🎮 つまりこういう対応
inputのname | 取り出しコード |
|---|---|
name="title" | formData.get("title") |
name="composer" | formData.get("composer") |
name="file" | formData.get("file") |
🧠 超重要ポイント
formDataは
❌ Reactのpropsではない
❌ useStateでもない
✅ HTMLフォームのデータ
📺 イメージ図
[ブラウザ]
<form>
title = "エチュード"
composer = "ショパン"
file = sample.xml
</form>
↓ submit
FormDataという箱が作られる
↓ サーバーへ送信
uploadScore(formData)🔥 なぜこれが特別?
昔はこうでした:
onSubmit={handleSubmit}const formData = new FormData(event.target)自分で作っていた。

