JavaScriptで配列をシリアライズする方法｜jQueryのserializeArray()メソッド徹底解説

serializeArray()メソッドとは

jQueryのserializeArray( )メソッドは、.serialize()メソッドと同様にフォームおよびフォーム内のすべての要素をシリアライズします。ただし、URLエンコードされた文字列ではなく、JavaScriptでそのまま扱えるJSONデータ構造（オブジェクトの配列）を返す点が大きな特徴です。

返される配列の各要素は「{ name: フィールド名, value: 入力値 }」という形式のオブジェクトになるため、Ajax通信でのデータ送信や、取得した値の個別処理に非常に便利です。

サーバー側（PHP）の準備

まず、送信されたデータを受け取る側のPHPファイル serialize.php の内容を確認しておきましょう。

<?php
    if( $_REQUEST["name"] ) {
      $name = $_REQUEST['name'];
      echo "Welcome ". $name;
      $age = $_REQUEST['age'];
      echo "<br />Your age : ". $age;
      $sex = $_REQUEST['sex'];
      echo "<br />Your gender : ". $sex;
    }
?>

このPHPファイルは、リクエストパラメータから「名前」「年齢」「性別」を取得し、それらを画面に出力するシンプルなスクリプトです。

実装例：serializeArray()でフォームデータを送信・表示する

続いて、JavaScript（jQuery）でserializeArray()メソッドを実装したサンプルコードを紹介します。ボタンをクリックすると、フォームの入力内容がJSON形式でPHPファイルへPOST送信され、その結果がページ上に表示される仕組みです。

<html>
   <head>
      <title>The jQuery Example</title>
         <script type = "text/javascript"
            src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
         </script>
         <script type = "text/javascript" language = "javascript">
            $(document).ready(function() {
               $("#driver").click(function(event){
                  $.post(
                     "/jquery/serialize.php",
                     $("#testform").serializeArray(),
                     function(data) {
                        $('#stage1').html(data);
                     }
                  );
                  var fields = $("#testform").serializeArray();
                  $("#stage2").empty();
                  jQuery.each(fields, function(i, field){
                     $("#stage2").append(field.value + " ");
                  });
               });
            });
         </script>
   </head>
   <body>
      <p>Click on the button to load result.html file:</p>
      <div id = "stage1" style = "background-color:blue;">
         STAGE - 1
      </div>
      <br />
      <div id = "stage2" style = "background-color:blue;">
         STAGE - 2
      </div>
      <form id = "testform">
         <table>
           <tr>
             <td><p>Name:</p></td>
             <td><input type = "text" name = "name" size = "40" /></td>
           </tr>
           <tr>
             <td><p>Age:</p></td>
             <td><input type = "text" name = "age" size = "40" /></td>
           </tr>
           <tr>
             <td><p>Sex:</p></td>
             <td> <select name = "sex">
                <option value = "Male" selected>Male</option>
                <option value = "Female" selected>Female</option>
             </select></td>
           </tr>
           <tr>
             <td colspan = "2">
               <input type = "button" id = "driver" value = "Load Data" />
             </td>
           </tr>
         </table>
      </form>
   </body>
</html>

コードのポイント

$("#testform").serializeArray() を呼び出すだけで、フォーム全体の入力値をJSON構造の配列として取得できます。
$.post() の第2引数にそのまま渡すことで、Ajaxによるサーバーへのデータ送信が簡潔に実現できます。
jQuery.each() を組み合わせれば、取得した各フィールドの値を1つずつ取り出して個別に処理することも可能です。

まとめ

serializeArray()メソッドを使えば、フォームの入力値を文字列ではなくJSONデータとして柔軟に扱えます。Ajax通信でサーバーに入力データを送りたい場合や、JavaScript側で各フィールドの値を加工・検証したい場合に特に有用なメソッドなので、ぜひ活用してみてください。

JavaScriptで既存の配列に新しい値を追加するにはどうすればよいですか？

JavaScriptで日付文字列からDateオブジェクトを作成する方法

JavaScriptで配列をセット（Set）に変換する方法｜new Set()の使い方を解説
JavaScriptでは、new Set() コンストラクタを使うことで、配列を簡単にセット（Setオブジェクト）へ変換できます。セットは同じ値を自動的に1つだけ保持する性質を持つため、配列から重複した要素を取り除きたい場合にも非常に便利です。配列をセットに変換するサンプルコード以下は、ボタンをクリックすると配列がセットに変換されて表示される、完全なHTMLサンプルです。 <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport co
JavaScriptでIDごとにオブジェクトの配列をグループ化する方法
JavaScriptでオブジェクトの配列をidなどの特定のキーごとにグループ化したい場合、reduce()メソッドを使うと簡潔に実装できます。この記事では、どのプロパティにも対応できる汎用的なgroupBy関数を作成し、実際のサンプルコードとともにその仕組みを詳しく解説します。 reduce()によるグループ化の考え方 reduce()は、配列の各要素を順番に処理しながら、1つの累積値（ここではオブジェクト）を組み立てていくメソッドです。各要素からキーの値を取り出し、その値がまだ結果オブジェクトに存在しなければ新しい配列を作成して、そこへ要素を追加していくことでグループ化を実現します。サ