HTML5で追加されたHistory APIでURLを操作する主な方法

環境

• windows10
• DockerDesktop for Win 3.5.x
• VsCode
• gitbash 2.32.0.1

History API is 何?

• Webブラウザの「履歴」を操作できるAPI。HTML5で追加された。
• 主に、SPA開発などでサーバーへの通信によるページ遷移がなく、ブラウザ側でurlを操作する必要があるときに使用することがある
• HistoryAPIを利用することで、SPAにも関わらずURLを書き換え、別のページに遷移したかのように見せることが可能

ページ移動

前のページに戻る

window.history.back();

次のページに進む

window.history.forward();

指定ページ数だけ移動

戻る

window.history.go(-1)

進む

window.history.go(1)

履歴の追加

• history.pushStateを使用する
• 現在表示されているページの情報にURLを発行(定義)する
• 画面でいうと、以下の箇所
  

パスの変更

絶対パス

history.pushState({}, '', '/hoge');

相対パス

history.pushState({}, '', 'hoge');

ハッシュの変更

同じページ内で移動する場合等に使用する

history.pushState({}, '', '#hoge');

クエリーを追加

history.pushState({}, '', '?key=value');

履歴情報の置き換え

window.history.replaceState({}, null, '/foo')

履歴情報の監視

ブラウザの「戻る」「進む」または、同様の操作が行われた際に呼び出されるイベント

window.onpopstate = function (e) {
  // イベントを感知して、何か処理を実行
}

まとめ

いかがでしたでしょうか。本記事では、HTML5で追加されたHistory APIでURLを操作する主な方法について紹介しています。