JavaScript　history.pushStateを使ったブラウザバックの履歴管理方法

　JavaScriptのpushStateメソッドを使うことで、Webページの履歴に現在のページの状態を保持する方法を解説します。

履歴を管理するにはどうしたらいいですか？

履歴を管理するにはpushStateメソッドを使います。
　pushStateメソッドは、履歴管理のためのメソッドであり、Webページの履歴に現在のページの状態を保持することができます。

受講者数No.1！初心者からプロへ導く信頼のスクール

短期間で習得可能！未経験から実践力を磨く充実のプログラム

テックアカデミー公式ページへ ≫

今なら無料相談でAmazonギフトカードがもらえる！

pushStateメソッドとは

　pushStateメソッドは、HTML5で導入された履歴管理のためのメソッドです。

Webページを閲覧していると、ブラウザの「戻る」ボタンや「進む」ボタンを使って、過去に閲覧したページや再度閲覧したいページに戻ることがあります。このようなページ遷移を行うと、ブラウザは履歴を管理しています。

　pushStateメソッドを使用することで、JavaScriptを使用して現在のページの状態を履歴に追加することができます。例えば、Webサイトの一部をAjaxでロードしている場合、新しいページが表示されたわけではなく、JavaScriptによって新しいコンテンツが表示された場合があります。この場合、pushStateメソッドを使用して、履歴に正しいページの状態を追加することができます。

　また、pushStateメソッドを使用することで、ユーザーがページを戻ったり進んだりした際に、正しいページの状態が保持されるようになります。これにより、ユーザーがページ遷移時に不具合に遭遇することを防止することができます。

pushStateメソッドは、次のような構文を持ちます。

window.history.pushState(state, title, url);

state : オブジェクト形式のステートオブジェクト。状態を表す情報を保存することができます。
title : タイトル。ブラウザのタブに表示される文字列です。
url : URL。履歴に追加するURLを指定します。

pushStateメソッドを使用することで、ブラウザの履歴に新しいエントリを追加できます。これにより、ページを戻ったり進んだりする際に、正しいページの状態が保持されるようになります。

サンプルプログラムを使った解説

　以下のサンプルコードは、ボタンをクリックすることで、現在のURLに「?page=2」というクエリパラメータを追加し、履歴に新しいエントリを追加します。

<button onclick="addPageTwo()">ページ2へ移動</button>

<script>
function addPageTwo() {
  var stateObj = { page: 2 };
  var title = "Page 2";
  var newUrl = "?page=2";

  history.pushState(stateObj, title, newUrl);
}
</script>

　このサンプルコードを実行すると、URLが https://example.com/?page=2 に変更され、ブラウザの履歴に新しいエントリが追加されます。

pushStateメソッドは、現在のページの履歴スタックに新しいエントリーを追加し、履歴状態を変更します。引数として、stateObj、title、newUrlを渡します。これらの引数は、新しい履歴状態を識別するために使用されます。

　このプログラムを実行することで、ページ内で動的に状態を変更しても、ブラウザの「戻る」ボタンを使って前の状態に戻れるようになります。

このように、pushStateメソッドを使用することで、Webページの履歴管理が簡単にできるようになります。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。