← カテゴリ一覧に戻る

URLの変更・履歴操作

history.pushState replaceState URLSearchParams

ページ遷移なしでブラウザのURLや履歴スタックを操作します。SPAのルーティングの基盤となる技術です。

デモ：URL操作（ページ遷移なし）

現在のURL:
履歴スタック数: 0

コード例

js
// ページ遷移なしでURLを変更（履歴に追加）
history.pushState({ page: 2 }, '', '/page/2');

// ページ遷移なしでURLを変更（履歴を置換）
history.replaceState({ search: 'q' }, '', '?q=hello');

// 状態取得
console.log(history.state);   // { page: 2 }
console.log(history.length);  // 履歴スタック数

// ブラウザの戻る・進む
history.back();
history.forward();
history.go(-2); // 2つ前

// popstate イベント（戻る・進むで発火）
window.addEventListener('popstate', (e) => {
  console.log('状態:', e.state);
  renderPage(e.state?.page); // ページを再描画
});

// URLSearchParams（クエリパラメータ操作）
const params = new URLSearchParams(window.location.search);
params.get('page');             // "2"
params.set('page', '3');
params.append('tag', 'js');    // 追加（同名キーも可）
params.delete('old');
params.has('page');             // true

// URLにセット
window.history.pushState({}, '', '?' + params.toString());

// URL クラス（URL全体の操作）
const url = new URL(window.location.href);
url.searchParams.set('filter', 'active');
url.pathname = '/new-path';
url.hash = '#section1';
history.pushState({}, '', url.toString());

比較：pushState vs replaceState

観点pushStatereplaceState
履歴への影響新しい履歴エントリを追加現在の履歴エントリを置換
戻るボタン前のページに戻れる元のURLに戻れない
使いどころSPAページ遷移、タブ切り替えフィルター・検索（戻り不要な変更）

NEWNavigation API（History API の後継, Chrome 102+）

History API の問題点（state管理の複雑さ、cross-documentナビゲーション非対応）を解決する新APIです。

js
// Navigation API（Chrome 102+）
navigation.addEventListener('navigate', (e) => {
  // 全ナビゲーションを interceptできる
  if (!shouldHandleUrl(e.destination.url)) return;

  e.intercept({
    async handler() {
      // 遷移前の処理
      const data = await fetchPageData(e.destination.url);
      renderPage(data);
    }
  });
});

// プログラムナビゲーション
navigation.navigate('/new-page', { state: { from: 'home' } });
navigation.back();
navigation.forward();

// 現在のエントリ
navigation.currentEntry.url;
navigation.currentEntry.state;

🤖 AIプロンプトテンプレート

以下のようなHistory APIのpushState / replaceState / popstateイベントのサンプルコードを生成してください：
- history.pushStateでページ遷移なしにURLを変更してSPAルーティングを実装
- history.replaceStateでフィルター・検索条件をURLに反映する方法
- popstateイベントでブラウザの戻る・進むに対応したページ再描画の実装
- URLSearchParamsを使ったクエリパラメータの追加・更新・削除
- URLクラスを使ってhref・pathname・hashをまとめて操作するパターン

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo