このページでは、window.history.pushState、window.history.replaceState、およびwindow.history.stateについて詳細に解説します。以下のリンクをクリックすると、各セクションにジャンプできます。

• window.history.pushStateとは
• window.history.replaceStateとは
• window.history.stateとは
• 使用例

window.history.pushStateとは

window.history.pushStateは、現在のブラウザ履歴に新しいエントリを追加するためのメソッドです。このメソッドを使用すると、ページを再読み込みしたり実際にURLを移動することなく、アプリケーションの状態とURLを更新できます。

主な引数は以下の通りです：

• state: 履歴エントリに関連付けるデータオブジェクト。任意のJavaScriptオブジェクトを指定可能です。
• unused: 将来の互換性のための引数ですが、現在は無視されます。
• url: 履歴エントリに設定する新しいURL（オプション）。現在のURLと同じオリジンである必要があります。

例えば、以下のコードは現在の履歴に新しいエントリを追加します：

history.pushState({ page: 1 }, "Title", "/page1");

このコードにより、ブラウザのアドレスバーに/page1が表示されますが、ページ遷移は行われません。

window.history.replaceStateとは

window.history.replaceStateは、現在の履歴エントリを新しい情報で置き換えるためのメソッドです。pushStateと異なり、新しい履歴エントリを追加せず、現在のエントリを上書きします。

引数はpushStateと同様です。

例えば：

history.replaceState({ page: 2 }, "Title", "/page2");

このコードにより、ブラウザのアドレスバーが/page2に変更されますが、新しい履歴エントリは作成されません。

window.history.stateとは

window.history.stateは、現在の履歴エントリに関連付けられたstateオブジェクトを返します。このプロパティを使用すると、現在の状態に関する情報を取得できます。

例えば、次のコードでstateを確認できます：

history.pushState({ page: 3 }, "Title", "/page3");
console.log(history.state); // { page: 3 }
    

履歴に新しいエントリを追加するたびにstateが更新されるため、状態管理が容易になります。

使用例

以下に、pushState、replaceState、およびstateを活用する具体的な例を示します。

例1: シングルページアプリケーション（SPA）のナビゲーション

document.querySelector("#link1").addEventListener("click", function () {
    history.pushState({ section: "home" }, "Home", "/home");
    document.title = "Home Page";
    document.querySelector("#content").textContent = "ホームセクションへようこそ！";
});
document.querySelector("#link2").addEventListener("click", function () {
    history.pushState({ section: "about" }, "About", "/about");
    document.title = "About Us";
    document.querySelector("#content").textContent = "このページはAboutセクションです。";
});
    

例2: 状態の復元

popstateイベントを使用して、ユーザーがブラウザの「戻る」ボタンや「進む」ボタンを押したときに状態を復元する方法です：

window.addEventListener("popstate", function (event) {
    if (event.state) {
        console.log("現在の状態:", event.state);
    } else {
        console.log("初期状態");
    }
});
    

例3: 動的なURLの更新

フォームの送信を防ぎつつ、URLを更新する例です：

document.querySelector("form").addEventListener("submit", function (e) {
    e.preventDefault();
    const query = document.querySelector("input").value;
    history.pushState({ query: query }, "Search", "/search?q=" + encodeURIComponent(query));
    document.querySelector("#results").textContent = "検索結果: " + query;
});
    

これらのメソッドを活用すると、ページ遷移なしで動的なURLや状態管理を実現でき、モダンなWebアプリケーションの構築に役立ちます。