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

Key Takeaways

1. FormDataとObject.fromEntries()は、フォームからJSONを取得する迅速な方法を提供します。
2. 同じ名前の複数のフィールドを処理するには、getAll()または手動ループを使用します。
3. サーバーに送信する前に、必ず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()を組み合わせると、単純なフォームに対して簡潔なソリューションが提供され、手動による反復処理は、複雑なフォームに対してより高い柔軟性を提供します。

FAQs

FormDataはチェックボックスと複数選択入力を処理できますか？

はい、ただし、選択されたすべての値を収集するには、getAll()を使用するか、手動でループする必要があります。

JSON出力でオフになっているチェックボックスはどうなりますか？

オフになっているチェックボックスはFormDataに含まれません。必要に応じて明示的に処理してください。

この方法はファイルアップロードと互換性がありますか？

FormDataにはファイルオブジェクトが含まれますが、JSONとは別に処理する必要があります。

サーバーサイドプロジェクトをホストするならLeapcellにお任せください。

Leapcellは、Webホスティング、非同期タスク、Redis向けの次世代サーバーレスプラットフォームです。

多言語サポート

• Node.js、Python、Go、Rustで開発できます。

無制限のプロジェクトを無料でデプロイ

• 使用量に応じて料金が発生します — リクエストや料金はかかりません。

圧倒的なコスト効率

• アイドル料金なしの従量課金制。
• 例：25ドルで平均応答時間60msで694万リクエストをサポートします。

合理化された開発者エクスペリエンス

• 簡単なセットアップのための直感的なUI。
• 完全に自動化されたCI/CDパイプラインとGitOpsの統合。
• 実用的な洞察を得るためのリアルタイムメトリックとロギング。

簡単なスケーラビリティと高パフォーマンス

• 簡単な高並行性を処理するための自動スケーリング。
• 運用上のオーバーヘッドはゼロ — 構築に集中するだけです。

詳細については、ドキュメントをご覧ください。

Xでフォローしてください：@LeapcellHQ