pushStateとreplaceState
ページ全体を再読み込みせずにブラウザーのURLを更新します
「pushStateとreplaceState」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
History API
History APIを使うと、ページ全体を移動させずにアドレスバーに表示されるURLを変更できます。クライアントサイドレンダリングと組み合わせることで、ブックマーク可能なURLを維持しながら、ネイティブアプリのように動作するSingle-Page Applicationを実現できます。
pushState
history.pushState(state, "", url)は、ブラウザーの履歴に新しいエントリを追加します。アドレスバーのURLは直ちに更新されますが、ネットワーク リクエストは発生しません。ユーザーはブラウザーの戻るボタンで前のエントリに移動できます。
history.pushState({ view: "settings" }, "", "/settings");state引数
最初の引数は、そのエントリに関連付けられる任意のシリアライズ可能なデータです。後からhistory.stateまたはpopstateイベントで読み取れます。どのタブが開いていたか、スクロール位置などのUI状態を渡すために使うと、戻る操作で表示を正確に復元できます。
title 引数
2 番目の引数はエントリのタイトルです。実際には、現在のすべてのブラウザーがこれを無視します。タイトルを変更するには document.title = "..." を直接設定してください。慣例として空文字列を渡しますが、効果はありません。
url 引数
3 番目の引数は新しい URL です。相対 URL は現在のページを基準に解決されます。新しい URL は同一オリジンでなければならず、クロスオリジンの場合は SecurityError が発生します。ブラウザーは URL を取得しません。pushState はアドレスバーと履歴を更新するだけです。
replaceState
history.replaceState(state, "", url) は新しい履歴エントリを追加する代わりに、現在の履歴エントリを置き換えます。戻る操作の新しい段階を作らずに URL を更新したい場合（フィルターのクエリ文字列を更新する場合など）に使用します。
// Update query string in place
const url = new URL(location);
url.searchParams.set("filter", "open");
history.replaceState(null, "", url);pushState の使用例
SPA のルート変更（ページ全体を再読み込みせずにナビゲーションリンクをクリックする場合）、モーダルを開く操作（戻るボタンでモーダルを閉じられるようにする場合）、ウィザードのステップ遷移などです。意味のある状態ごとに新しい履歴エントリにすることで、戻るボタンがユーザーの期待どおりに動作します。
replaceState の使用例
履歴を増やしたくないフィルター、並べ替え、ページネーションの更新、フォームの一部入力後のリダイレクト、ナビゲーション可能なエントリを作らずにトラッキングパラメーターを更新する場合などです。ユーザーが戻る操作を行うと、これらの「中間」状態は飛ばされます。
pushState 後のビューの更新
pushState は URL を変更するだけなので、DOM は別途コードで更新する必要があります。基本的な流れは、新しいコンテンツを描画してから pushState を呼び出すことです。この 2 つを組み合わせることで SPA の操作感が実現します。
function navigate(path) {
renderPage(path);
history.pushState(null, "", path);
window.scrollTo(0, 0);
}タイトルとメタ情報の更新
ナビゲーション後に document.title と og:title メタタグを更新し、ソーシャル共有やブラウザータブのタイトルに現在のビューを反映させてください。これを忘れると、後で共有したときにも最初のタイトルが残ってしまいます。これは SPA でよくある、気付きにくいバグです。
ページ読み込み時の初期 pushState
ユーザーがナビゲーションする前に pushState を呼び出すと、初期エントリが上書きされます。ページの最初のエントリに state を関連付けるには、代わりに replaceState を使用してください。履歴の深さを変えずに state を追加できます。
セキュリティ上の制約
pushState の URL は同一オリジンでなければなりません。https://evil.com に対して pushState を試みると SecurityError が発生します。これにより、別のサイトにいるとユーザーに思わせるために、ページがアドレスバーを偽装することを防ぎます。
理解度チェック
history.pushState にはない、history.replaceState の働きは何ですか。
まとめ
pushState はページを再読み込みせずに新しい履歴エントリを追加します。これは SPA ルーティングの基盤です。replaceState は現在のエントリをその場で更新するため、見た目上の URL 変更に使用します。どちらも同一オリジンの URL を必要とし、title 引数は無視します。DOM は必ず別途更新し、ナビゲーション後には document.title とメタタグも更新してください。
よくある質問
「pushStateとreplaceState」レッスンは無料ですか？
はい。「pushStateとreplaceState」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「pushStateとreplaceState」で何を学びますか？
ページ全体を再読み込みせずにブラウザーのURLを更新します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「pushStateとreplaceState」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- pushStateとreplaceState
- popstateイベント
- ハッシュベースとパスベースのルーティング
- Navigation API：モダンブラウザー