APIを用いた設計を行っているとURLパラメータを操作したいという状況に多々遭遇します。
古典的に、location.searchで取得した文字列を分割して、変換して・・・を繰り返していると、どこかで不具合にぶつかるものです。
URLを用いることで、パラメータをスムーズに付け外しすることができると学んだので、備忘録として記載します。
URLの取得
new URL(location.href);
location.hrefの部分にはもっと細かい書き方が多くありますが、既に付与されているパラメータをURLごと全て取得したいのであればこれが1番シンプルかなと思います。
APIを使う時など、現在のURLとは別に新しくURLを生成したいのであれば、
new URL('/api/xxx', 'https://example.com');
とすることで取得できます。
URLに反映するときは、
location.href = new URL(location.href);
で反映できます。
パラメータの追加
URLインターフェースで生成したURLからは、リンク要素と同じようにhrefやhashを取得することができます。
パラメータに関してもsearchで取得することができますが、?から始まる文字列では使い勝手が悪いので、searchParamsを使用して取得します。
const url = new URL(location.href); // https://example.com?id=0
url.searchParams.set('id', '1') // https://example.com?id=1
url.searchParams.set('name', 'test') // https://example.com?id=1&name=test
url.searchParams.append('name', 'test') // https://example.com?id=1&name=test&name=test
setは上書き、appendは既存に同じパラメータが存在したとしても新たに追加します。
その他
パラメータを削除するdeleteや、パラメータを持っているかを返すhasなども存在します。
searchParamsを用いることで、?や&の付け忘れやエスケープによるヒューマンエラーも起きにくくなります。ソースコード上で何を行いたいのかも分かりやすくなります。
意外にも最近の技術ではなく、ほぼ全てのブラウザで対応している（IE除く）ので、どんどん使っていきたいですね。
