HTMLフォームからキー/値形式のデータを取得する方法【jQuery活用ガイド】

HTMLフォームに入力されたデータをキー/値（key/value）の形式で取得したい場合、jQueryを使うと非常に簡単に実現できます。フォームの値をまとめて取得し、Ajax通信などにそのまま渡せるため、実務でもよく使われるテクニックです。

serializeArray()メソッドとは

jQueryのserializeArray()は、フォーム内の入力要素（input、select、textareaなど）の値を、名前と値のペアからなるオブジェクトの配列として取得するメソッドです。戻り値はJavaScriptの配列なので、そのままAjaxリクエストのデータとして利用できます。

サンプル：HTMLフォームの準備

まず、以下のようなシンプルなHTMLフォームを用意します。

<form id="form1">
    <input type="text" name="demo" />
</form>

このフォームには、name="demo"という属性を持つテキスト入力欄が1つ含まれています。ポイントはname属性で、これがキー（プロパティ名）として使用されます。

サンプル：JavaScriptでキー/値データを取得する

次に、jQueryを使ってフォームのデータを取得し、Ajaxで送信する例を見てみましょう。

var data = $('form#form1').serializeArray(); // [{'demo': '入力された値'}]
$.ajax({
    data: data
});

serializeArray()を実行すると、次のような配列が返されます。

[
    {
        "name": "demo",
        "value": "ユーザーが入力した値"
    }
]

Ajax通信との組み合わせ

取得したデータは、$.ajax()のdataオプションにそのまま指定できます。これにより、フォームの内容をサーバーへ簡単に送信可能です。

$.ajax({
    url: 'submit.php',
    type: 'POST',
    data: data,
    success: function(response) {
        console.log('送信成功:', response);
    }
});

serialize()との違い

jQueryには似たメソッドとしてserialize()もあります。serialize()は「demo=値」という形式のURLエンコード済み文字列を返すのに対し、serializeArray()はJSONのようなオブジェクト配列を返します。JavaScript側で柔軟にデータを扱いたい場合は、serializeArray()が便利です。

まとめ

HTMLフォームからキー/値形式のデータセットを取得するには、jQueryのserializeArray()を使うのが最も手軽な方法です。取得したデータはそのままAjaxリクエストに渡せるため、フォーム送信処理の実装が大幅にシンプルになります。