【JavaScript】history.pushState()を用いたURLへのパラメータ付与について

こんにちは。

業務中にJavaScriptでhistory.pushState()を用いて擬似的なページ遷移をする実装がありました。

この実装を通して「history.pushState()とは何か」「具体的に何をしているのか」について学んだ内容を備忘録的に記事にしたいと思います。

history.pushState()とは

主にurlパラメータを操作したりURLパラメータを変更した先にオブジェクトのデータを保存したい際に使われる。

構文

構文のコードはMDN様から引用。

pushState(state, unused, url)

• state：オブジェクト。遷移先にjson的にデータを持たせたい時に指定する。単にURLを書き換えたいだけなら空でも可
• unused：歴史的な理由で省略不可だが大多数のケースで空文字 ""を入れればOK
• url：渡したいURL。追記するURLの文字列を直接指定したり、パラメータを付与したURLを渡したりする

コードの例

特定の処理が行われた際に今のURLにパラメータを付与するコード。コードはMDN公式(https://developer.mozilla.org/ja/docs/Web/API/History/pushState) から引用。

const url = new URL(location);
url.searchParams.set("foo", "bar");
history.pushState({}, "", url);

このコードでは、

• 現在のURLを取得し、パラメータfooとbarをセット
• URLは付与したパラメータを持つようになる

という処理をしている。

どういった場面で使うか

JSライブラリを使わずにSPA的な挙動でURLを操作したい時

history.pushState()は再読み込みせずにURLの書き換えを行うことができるため、URLパラメータは変化させたいがリロードはさせたくない場面で使われることが多い。

JSライブラリではhistory.pushState()に相当するフックが搭載されており、history.pushState()をそのまま書く意義は薄い（例：ReactのuseNavigate）など。

そのため、何かしらの理由でJSライブラリを使わない実装でSPAのようにリロードをせずにURLを変更したい場合に役立つ。

URLごとにデータを保持したり切り替えて表示する場合

先述したようにhistory.pushState()には特定のオブジェクトとURLを紐付ける作用がある。

そのため、stateの条件設定を工夫することで「フィルターの検索結果の保持」や「タブの切り替え」といった具合にリロードをかけることなくJS側で状態の切り替えや保持ができる。

最後に

history.pushState()については、

• リロードせずにURLを書き換える用途として使われる
• Vanilla JSでSPA的なページ遷移を行う際に使われる
• 「パラメータごとに表示を切り替えたい」が、「毎回リロードはしたくない」時に有効な手段

という理解をしました。

モダンなJSライブラリでは代替手段が豊富なため使われないかもしれませんが、Web制作のようにモダンライブラリを使わないケースではまだまだ使う機会はあると考えられます。

私はどちらも触っているので、今後もhistory.pushState()は選択肢の一部として考えておきたいと思います。

参考資料