初心者エンジニア、JavaScriptの「FormData」をゼロから学ぶ

kaede

この記事は、私のプログラミング学習の過程を記録しています。内容が必ずしも最新かつ正確であることを保証するものではないので、参考にする際は公式ドキュメントなどもご確認ください。

【基礎】FormDataの仕組みや使い方を解説
1. FormDataクラスが持つ機能
【実践】ReactでFormDataを使ってみよう

【基礎】FormDataの仕組みや使い方を解説

FormDataは、HTMLフォームから送信されたデータを操作するためのJavaScriptクラスである。

ざっくりとしたイメージ

フロント画面のフォームでユーザーが入力したデータを取得
取得したデータをFormDataオブジェクトに格納
FormDataオブジェクトをバックエンドに送信
バックエンドでデータを受け取り、データベースに保存

FormDataはクラスのため、new FormData()でインスタンス化して使用する。

const formData = new FormData();

FormDataクラスが持つ機能

append()：指定したキー（第一引数）と値（第二引数）をセットでFormDataオブジェクトに追加するメソッド

formData.append('name', 'John');
formData.append('age', 30);

get()：指定したキー（引数）に対応する値を取得するメソッド

const name = formData.get('name'); // 'John'が返される

✔️ 「FormDataオブジェクトに追加される」ってどういうこと？

append()により、formDataオブジェクト（formDataインスタンス）の内部にデータが保存される。
内部の仕組みは難しいため、formDataオブジェクト内で、以下のように格納されるイメージでOK。
( ※実際の内部でオブジェクトとしてデータを保持しているわけではない )

content = {
  name: 'John',
  age: 30,
}

【実践】ReactでFormDataを使ってみよう

例）名前と年齢を送信するフォーム

useStateを使って、nameとageの値をそれぞれ管理
フォーム送信時に、nameとageをFormDataに追加
FormDataオブジェクトをAPIで送信

import React, { useState } from 'react';

const FormComponent = () => {
　 // フォームの入力値を管理
  const [name, setName] = useState('');
  const [age, setAge] = useState('');

  const handleNameChange = (event) => {
    setName(event.target.value);
  };

  const handleAgeChange = (event) => {
    setAge(event.target.value);
  };

　 // フォーム送信時に呼び出される
  const handleSubmit = (event) => {
    event.preventDefault();

　   // 送信内容をフォームオブジェクトに格納
    const formData = new FormData();
    formData.append('name', name); // useStateのnameをフォームに格納 
    formData.append('age', age);　 // useStateのageをフォームに格納 

　   // APIを利用してフォームオブジェクトを送信（バックエンド側でDBに格納）
    fetch('/submit', {
      method: 'POST',
      body: formData,
    })
      .then(response => response.json())
      .then(data => console.log(data))
      .catch(error => console.error('Error:', error));
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">名前:</label>
        <input
          type="text"
          id="name"
          value={name}
          onChange={handleNameChange}
        />
      </div>
      <div>
        <label htmlFor="age">年齢:</label>
        <input
          type="number"
          id="age"
          value={age}
          onChange={handleAgeChange}
        />
      </div>
      <button type="submit">送信</button>
    </form>
  );
};

export default FormComponent;

kaede

参考文献について
この記事は、公式ドキュメントや他のウェブサイトを参考にしながら、プログラミング学習の内容をまとめています。特に、ChatGPT（OpenAI）の情報を多く取り入れており、自分の言葉でわかりやすく要約しています。