Tips: クライアント上で特定のクエリパラメータのみを書き換える

これは何

この記事はフロントエンド強化月間の参加記事です。

クライアント上でURLの特定のクエリパラメータのみを書き換える上手い方法をまとめておきます。

クライアントでクエリパラメータを書き換えるときの問題

クライアント上で検索やページネーションの状態をクエリパラメータとして保存したい場合は多くあると思います。
愚直に変更する方法として、以下のようにURLにクエリパラメータを追加する方法があります。

誤った例1

window.location.href = `/path?page=1`

しかしこの方法には問題があります。その問題とは「他のクエリパラメータを欠損させてしまう」ことです。
例えばもともと?foo=1のような値が設定されていた時、上の実装ではこの値を欠損させてしまいます。

こクエリパラメータを欠損させないようにするために、以下のような方法を考えるとします。

誤った例2

window.location.search = `${window.location.search}&page=1`

しかしこれにも問題があります。次の問題は「すでに指定したクエリパラメータが付与されていたとき、2個同じクエリが設定されてしまう」問題です。

例えは上の例だと、すでにpage=2みたいな値が設定されていた場合、結果はpage=2&page=1のようになってしまいます。

クライアントでクエリパラメータを書き換える正しい方法

本来やりたかったことは以下のようなことです。

1. 触っていないパラメータはそのまま状態を引き継ぐ
2. 追加しようとしたパラメータがすでに設定されていた場合、追加ではなく更新を行う

この条件を満たすような実装は、URLSearchParamsを用いることで実現することができます。

正しい例

const params = new URLSearchParams(window.location.search) // クエリパラメータを操作するためのオブジェクト
params.set('page', '1') // クエリパラメータに存在しない場合は追加、存在しているときは更新を行う
window.location.search = params.toString() // 新たなクエリパラメータとして設定

これで、要件を満たした正しいクエリの更新を行うことができます。

参考文献