【初心者向け】フォームデータとJavaScriptオブジェクトの関係を徹底解説

2024-04-02

jQueryを使用してフォームデータをJavaScriptオブジェクトに変換する方法

前提条件

このチュートリアルを始める前に、以下のものが必要です。

HTMLファイル
jQueryライブラリ

手順

HTMLファイルにフォームを作成します。

<form id="my-form">
  <input type="text" name="name" placeholder="名前">
  <input type="email" name="email" placeholder="メールアドレス">
  <input type="submit" value="送信">
</form>

jQueryライブラリをHTMLファイルに読み込みます。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

以下のJavaScriptコードを追加します。

$(document).ready(function() {
  $("#my-form").submit(function(event) {
    event.preventDefault();

    // フォームデータを取得
    const formData = $(this).serializeArray();

    // フォームデータを変換
    const jsonData = formData.reduce((obj, item) => {
      obj[item.name] = item.value;
      return obj;
    }, {});

    // 変換結果を出力
    console.log(jsonData);
  });
});

フォームを送信すると、JavaScriptオブジェクトの内容がコンソールに表示されます。

コード解説

$(document).ready(function() { ... });：DOMContentLoadedイベントが発生した時に実行されるコードです。
$("#my-form").submit(function(event) { ... });：フォーム#my-formが送信された時に実行されるコードです。
event.preventDefault();：フォームの送信をキャンセルします。
const formData = $(this).serializeArray();：フォームデータを取得し、配列に格納します。
const jsonData = formData.reduce((obj, item) => { ... }, {});：配列formDataをループ処理し、各要素をキーと値のペアに変換し、JavaScriptオブジェクトに格納します。
console.log(jsonData);：JavaScriptオブジェクトの内容をコンソールに出力します。

フォームデータを変換する方法は他にもいくつかあります。
上記のコードは、単純なフォームデータを変換する例です。より複雑なフォームデータの場合は、コードを修正する必要があります。

関連キーワード

javascript

jquery

json

フォームデータ

JavaScriptオブジェクト

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>フォームデータをJavaScriptオブジェクトに変換</title>
</head>
<body>
  <h1>フォームデータをJavaScriptオブジェクトに変換</h1>
  <form id="my-form">
    <input type="text" name="name" placeholder="名前">
    <input type="email" name="email" placeholder="メールアドレス">
    <input type="submit" value="送信">
  </form>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
  $(document).ready(function() {
    $("#my-form").submit(function(event) {
      event.preventDefault();

      // フォームデータを取得
      const formData = $(this).serializeArray();

      // フォームデータを変換
      const jsonData = formData.reduce((obj, item) => {
        obj[item.name] = item.value;
        return obj;
      }, {});

      // 変換結果を出力
      console.log(jsonData);
    });
  });
  </script>
</body>
</html>

上記のコードは、HTMLフォームのデータをJavaScriptオブジェクトに変換する例です。
フォームには、名前とメールアドレスの入力欄があります。

実行方法

上記のコードをHTMLファイルに保存します。
ブラウザでHTMLファイルを開きます。
フォームに入力し、送信ボタンをクリックします。

関連キーワード

フォームデータをJavaScriptオブジェクトに変換する他の方法

JavaScript標準のAPIを使用する

const formData = new FormData(document.querySelector("#my-form"));
const jsonData = Object.fromEntries(formData);

console.log(jsonData);

new FormData(document.querySelector("#my-form"));：フォーム#my-formのデータを取得し、FormDataオブジェクトを作成します。
Object.fromEntries(formData);：FormDataオブジェクトをループ処理し、各要素をキーと値のペアに変換し、JavaScriptオブジェクトに格納します。

Lodashなどのライブラリを使用すると、より簡単にフォームデータをJavaScriptオブジェクトに変換できます。

const jsonData = _.fromPairs(document.querySelector("#my-form").elements);

console.log(jsonData);

_.fromPairs(document.querySelector("#my-form").elements);：フォーム#my-formのすべての要素を取得し、キーと値のペアの配列に変換します。
_.fromPairsはLodashの関数です。

自作の関数を使用する

上記のいずれの方法も使用せず、自作の関数を使用してフォームデータをJavaScriptオブジェクトに変換することもできます。

function formDataToJson(formData) {
  const jsonData = {};
  for (const pair of formData.entries()) {
    jsonData[pair[0]] = pair[1];
  }
  return jsonData;
}

const jsonData = formDataToJson(new FormData(document.querySelector("#my-form")));

console.log(jsonData);