SPA(Single Page Application)でWebページを開発している場合、ページの情報をJavaScriptで直接書き換えるたブラウザのアドレスバーに表示されているURLは常に同じです。これだとブラウザのバックボタン(戻るボタン)が利用できなかったり、ブックマークや外部からリンクを貼る際に非常に不便。
そこでHTML5から登場したWebブラウザの「履歴」を操作するHistoryAPIを利用することで、SPAにも関わらず情報が書き換わったタイミングでブラウザのアドレスバーに表示されているURLを書き換え、別のページに遷移したかのように見せることができます。
// example.com/foo から example.com/bar に変更 history.pushState({}, '', '/bar')
厳密にはpushState()を実行すると履歴が新しく追加されます。現在表示されているページの情報にURLを発行(定義)するイメージですね。
history.pushStateの利用例
パスを変更
冒頭の例の通りですが、第3引数にURLとしたい文字列を記述するだけです。注意点としては最初にスラッシュを付けて絶対パスにするかどうかで挙動が変わります。
// example.com/foo/bar → example.com/hoge history.pushState({}, '', '/hoge');
// example.com/foo/bar → example.com/foo/hoge history.pushState({}, '', 'hoge');
ハッシュを変更
同じページ内で移動する場合や、SPAではページ内の情報を出し分ける際にhashbang等で利用するヤツです。これも素直に第3引数で指定するだけです。
// example.com/foo → example.com/foo#hoge history.pushState({}, '', '#hoge');
すでにURLにハッシュが付いている場合は置き換わります。
// example.com/foo#huga → example.com/foo#hoge history.pushState({}, '', '#hoge');
クエリーを追加
素直に以下のように記述することもできますが、
// example.com/foo → example.com/foo?name=value history.pushState({}, '', '?name=value');
MDNのサンプルのように記述する方が楽ちんですね。
const url = new URL(window.location); url.searchParams.set('name', 'value'); history.pushState({}, '', url);
