JavaScriptを使用して、HTMLフォームデータをJSONに変換する方法

Key Takeaways

FormDataとObject.fromEntries()は、フォームからJSONを取得する迅速な方法を提供します。
同じ名前の複数のフィールドを処理するには、getAll()または手動ループを使用します。
サーバーに送信する前に、必ずJSONを検証して処理してください。

HTMLフォームデータをJSON形式に変換することは、特にAPIとのやり取りやローカルでのデータ保存を行うWeb開発において、一般的なタスクです。このガイドでは、JavaScriptを使用してこれを実現するためのさまざまな方法を説明します。

フォームデータをJSONに変換する理由

API統合: 多くの最新APIはJSON形式でデータを受け入れます。
データストレージ: JSONは、構造化されたデータを保存するのに理想的な軽量形式です。
一貫性: JSONを使用すると、アプリケーションのさまざまな部分で均一性が確保されます。

方法1：`FormData`と`Object.fromEntries()`の使用

FormData APIは、フォームデータをキャプチャする便利な方法を提供します。Object.fromEntries()と組み合わせることで、このデータをJSONオブジェクトに簡単に変換できます。

例：

<form id="myForm">
  <label>
    Name:
    <input type="text" name="name" />
  </label>
  <label>
    Email:
    <input type="email" name="email" />
  </label>
  <button type="submit">Submit</button>
</form>

<script>
  const form = document.getElementById('myForm');

  form.addEventListener('submit', function (event) {
    event.preventDefault(); // デフォルトのフォーム送信を防止

    const formData = new FormData(form);
    const jsonData = Object.fromEntries(formData.entries());

    console.log(jsonData);
    // JSON文字列に変換するには：
    // console.log(JSON.stringify(jsonData));
  });
</script>

**注：**この方法は単純なフォームには適していますが、同じ名前の複数の入力（例：チェックボックス）を期待どおりに処理できない場合があります。

方法2：同じ名前の複数の入力を処理する

チェックボックスや複数選択フィールドなど、複数の入力が同じ名前を共有するフォーム要素の場合、FormData.getAll()を使用してすべての値を取得できます。

例：

<form id="myForm">
  <label>
    Name:
    <input type="text" name="name" />
  </label>
  <label>
    Email:
    <input type="email" name="email" />
  </label>
  <fieldset>
    <legend>Topics:</legend>
    <label>
      <input type="checkbox" name="topics" value="JavaScript" /> JavaScript
    </label>
    <label>
      <input type="checkbox" name="topics" value="HTML" /> HTML
    </label>
    <label>
      <input type="checkbox" name="topics" value="CSS" /> CSS
    </label>
  </fieldset>
  <button type="submit">Submit</button>
</form>

<script>
  const form = document.getElementById('myForm');

  form.addEventListener('submit', function (event) {
    event.preventDefault();

    const formData = new FormData(form);
    const jsonData = Object.fromEntries(formData.entries());

    // 複数の選択肢を処理する
    jsonData.topics = formData.getAll('topics');

    console.log(jsonData);
  });
</script>

出力例：

{
  "name": "Alice",
  "email": "alice@example.com",
  "topics": ["JavaScript", "CSS"]
}

方法3：`forEach()`を使用した手動変換

変換プロセスをより細かく制御するには、FormDataエントリを手動で反復処理できます。

例：

<form id="myForm">
  <label>
    Name:
    <input type="text" name="name" />
  </label>
  <label>
    Email:
    <input type="email" name="email" />
  </label>
  <fieldset>
    <legend>Topics:</legend>
    <label>
      <input type="checkbox" name="topics" value="JavaScript" /> JavaScript
    </label>
    <label>
      <input type="checkbox" name="topics" value="HTML" /> HTML
    </label>
    <label>
      <input type="checkbox" name="topics" value="CSS" /> CSS
    </label>
  </fieldset>
  <button type="submit">Submit</button>
</form>

<script>
  const form = document.getElementById('myForm');

  form.addEventListener('submit', function (event) {
    event.preventDefault();

    const formData = new FormData(form);
    const jsonData = {};

    formData.forEach((value, key) => {
      if (jsonData.hasOwnProperty(key)) {
        // キーが既に存在する場合は、配列に変換するか、既存の配列に追加します
        jsonData[key] = [].concat(jsonData[key], value);
      } else {
        jsonData[key] = value;
      }
    });

    console.log(jsonData);
  });
</script>

このアプローチにより、同じキーの複数の値が正しくキャプチャされます。

追加の考慮事項

チェックボックスの値: チェックボックスがオンの場合、その値が含まれます。それ以外の場合は省略されます。必要に応じて、オフのチェックボックスを処理するようにしてください。
ファイル入力: FormDataはファイル入力をFileオブジェクトとしてキャプチャします。ファイルアップロードは別途処理する必要がある場合があります。
検証: 処理またはサーバーへの送信の前に、常にフォームデータを検証してください。

結論

JavaScriptでHTMLフォームデータをJSONに変換するには、さまざまな方法があり、それぞれが異なるシナリオに適しています。FormData APIとObject.fromEntries()を組み合わせると、単純なフォームに対して簡潔なソリューションが提供され、手動による反復処理は、複雑なフォームに対してより高い柔軟性を提供します。