それマグで!

知識はカップより、マグでゆっくり頂きます。 takuya_1stのブログ

習慣に早くから配慮した者は、 おそらく人生の実りも大きい。

JSでHTTP GET クエリ文字列を JS オブジェクトから作成する-

js で http query をオブジェクトからビルドする

JavascriptのオブジェクトをURLのGET引数に変換したいときには、npm 探しますか? ライブラリ探しますか?

URLSearchParams ができています。

GETパラメタを扱うときは、これがあれば、だいたい解決する

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

URLSearchParams は 古くは querystring と呼ばれた関数です。パワーアップして帰ってきました。

https://developer.mozilla.org/en-US/docs/Archive/Add-ons/Add-on_SDK/High-Level_APIs/querystring

Object( hash ) → queryString の変換

手軽で便利な使い方です。

new URLSearchParams( {a:1 , b:3} ).toString();
'a=1&b=3'

便利ですね。

ネストには注意

そのままでは、ネストできません。ネストできません。

オブジェクトのネスト:

Object文字列になります。

> new URLSearchParams( {a:{x:10,y:11}, b:3} ).toString();
'a=%5Bobject+Object%5D&b=3'

残念。toString されているだけです。

配列でネスト

配列も同じです。

> a = new URLSearchParams( {a:[10,11], b:3} ).toString();
'a=10%2C11&b=3'
> decodeURIComponent(a)
'a=10,11&b=3'
>

残念ですね。toStringされているだけです。

URLのGETパラメタを正しく扱うので、同名のパラメタが2個あっても良い。

これもオブジェクトを扱うときの注意点なのですが、キー名はダブることがあります。

オブジェクトではダブリを扱えないのですが、URLSearchParamsは扱えてしまいます。

> new URLSearchParams("start=大阪&via=心斎橋&via=難波&dest=天王寺")
URLSearchParams { 'start' => '大阪', 'via' => '心斎橋', 'via' => '難波', 'dest' => '天王寺' }

Objectをパラメタ変換しようとしたり逆にObjectで取り出そうとしたとき、ネストをどう扱うか、ダブるキー名をパラメタに含めるなど、キーを扱うときは注意を払う必要があります。

Object {} と URLSearchParams は等価交換できないのです。配列になってくれたりしないのです。

iteratorで使うURLSearchParams

> new URLSearchParams("start=大阪&via=心斎橋&via=難波&dest=天王寺").entries()
URLSearchParams Iterator {
  [ 'start', '大阪' ],
  [ 'via', '心斎橋' ],
  [ 'via', '難波' ],
  [ 'dest', '天王寺' ] }

こちらは、全パラメータをきれいにiterator で回るのです。

node の組込querystringなら、配列になってくれる

https://nodejs.org/api/querystring.html
querystring.parse("start=大阪&via=心斎橋&via=難波&dest=天王寺")
[Object: null prototype] {
  start: '大阪',
  via: [ '心斎橋', '難波' ],
  dest: '天王寺'
}

node 組み込みの querystring ならば、配列になってくれていたので、このほうが便利だったと思うんですね。

きれいなオブジェクトになる querystring

URLSearchParams と違って node の querystring ならオブジェクトになってきれいだと思う。

> a = querystring.parse("start=大阪&via=心斎橋&via=難波&dest=天王寺")
[Object: null prototype] {
  start: '大阪',
  via: [ '心斎橋', '難波' ],
  dest: '天王寺'
}
> a
[Object: null prototype] {
  start: '大阪',
  via: [ '心斎橋', '難波' ],
  dest: '天王寺'
}
> querystring.stringify(a)
'start=%E5%A4%A7%E9%98%AA&via=%E5%BF%83%E6%96%8E%E6%A9%8B&via=%E9%9B%A3%E6%B3%A2&dest=%E5%A4%A9%E7%8E%8B%E5%AF%BA'
> decodeURI(querystring.stringify(a))
'start=大阪&via=心斎橋&via=難波&dest=天王寺'

結論

URLSearchParamsが使えますが、ネストなど複雑なパラメタは扱いづらい。

node 環境下では querystring を使える。

ならば、ブラウザにnpmで互換パッケージをポーティングしたほうが便利なのかもしれません。

参考資料