JavaScriptオブジェクトをクエリ文字列にエンコードする方法

クエリ文字列（クエリストリング）は、複数のクエリパラメータから構成され、サーバーへデータを送信するために使用されるURLの一部です。この部分は省略可能ですが、利用する場合は開発者が自ら構築する必要があります。その際に役立つのが、JavaScriptのネイティブメソッドであるencodeURIComponent()です。

encodeURIComponent()とは

encodeURIComponent()は、URI（Uniform Resource Identifier）の構成要素をエンコードするための関数です。特定の文字を、その文字のUTF-8エンコーディングを表す1〜4個のエスケープシーケンスに置き換えて処理します。これにより、日本語などのマルチバイト文字や特殊記号も、安全にURLへ含められるようになります。

ES6以降の新しい構文を活用すれば、オブジェクトをクエリ文字列形式へ変換することもシンプルに実装できます。以下がその例です。

サンプルコード

let obj = {
    name: 'John',
    age: 25,
    city: 'Chicago'
};
let qs = Object.keys(obj)
          .map(k => `${encodeURIComponent(k)}=${encodeURIComponent(obj[k])}`)
          .join('&');
console.log(qs);

このコードでは、Object.keys()でオブジェクトのキー一覧を取得し、map()で各キーと値を「キー=値」の形式に整形しています。それぞれencodeURIComponent()でエンコードし、最後にjoin('&')で&区切りの文字列に連結しています。

実行結果

上記のコードを実行すると、コンソールには次の出力が表示されます。

name=John&age=25&city=Chicago

補足：URLSearchParamsを使ったより簡潔な方法

モダンなブラウザ環境では、標準APIのURLSearchParamsを使うことで、さらに短く書くことも可能です。

const qs = new URLSearchParams(obj).toString();
console.log(qs); // name=John&age=25&city=Chicago

URLSearchParamsはキーと値を自動的にエンコードしてくれるため、encodeURIComponent()を手動で呼び出す必要がなく、コードの可読性と保守性が向上します。レガシー環境をサポートする必要がある場合のみ、ES6構文による手動実装を選ぶとよいでしょう。