【JavaScript】HistoryAPIの使い方

今回は、ブラウザの履歴を操作できるhistoryAPIについて学習した内容をまとめました。

✅ HistoryAPIとは？

HistoryAPIは、ブラウザの「戻る」「進む」などの 履歴を操作できる機能。

通常のWebサイトでは、
リンクをクリックしてページが遷移すると、そのページが履歴に追加される。
それによって、ブラウザの「戻る」「進む」ボタンを押すと、履歴をたどってページを移動することができる。

HistoryAPIの特徴

通常は「ページ遷移が起きたとき」しか履歴が追加されないが、
HistoryAPIを使えば、ページ遷移が発生しない状況でも、履歴を操作することができる。

さらに、履歴にはURLだけでなく、任意の値を一緒に保存することもできる。
「モーダルが開いているか」「検索条件は何か」「どのタブを表示しているか」など、情報を一緒に保存しておけば、その値を使ってアプリ側で画面を復元できる。

使いどころの例

例１：ポップアップやモーダルの開閉状態を履歴に残しておく
➡︎「戻る」を押すと自然に閉じられる

例２：検索条件や絞り込み結果を履歴に追加する
➡︎「戻る」で前の検索条件が復元される

例３：タブ切り替えや画面の表示状態をURLに反映する
➡︎ ページをリロードしても同じ状態を再現できる

例４：SPA（シングルページアプリケーション）のルーティング
➡︎ 実際にはページ遷移をしていなくても、URLを切り替えて履歴を積み重ねられる

✅ HistoryAPIの操作方法

戻る

history.back();

ブラウザの「戻る」ボタンを押した時と同様の挙動。

進む

history.forward();

ブラウザの「進む」ボタンを押した時と同様の挙動。

履歴の追加

history.pushState(state, title, url);

状態と一緒にブラウザの履歴に追加する。
ページをリロードせずにURLの変更もできる。

• state: 履歴と一緒に記録するオブジェクト型のデータ
• title：ページのタイトル
• url：指定したいドメイン以下のURL

履歴の変更

history.replaceState(state, title, url);

状態と一緒に現在の履歴を上書きする。
ページをリロードせずにURLの変更もできる。

• state: 履歴と一緒に記録するオブジェクト型のデータ
• title：ページのタイトル
• url：指定したいドメイン以下のURL

URL変更の監視

window.addEventListener('popstate', (event) => {
    const { state } = event;
})

「戻る」「進む」などのURLの移動が行われた際に、popstateイベントが発生する。
pushState()やreplaceState()で保存したstateはevent.stateから取得できる。

✅ コード例

タブの選択状態よってURLの操作・状態の保存をする場合のコードサンプル。
tab2を選択している場合のURL： https://example.com/tab2

<div>
  <button class="tab tab1">タブ1</button>
  <button class="tab tab2">タブ2</button>
  <button class="tab tab3">タブ3</button>
</div>

<div id="tab1" class="tabContent">タブ1の内容</div>
<div id="tab2" class="tabContent" style="display:none;">タブ2の内容</div>
<div id="tab3" class="tabContent" style="display:none;">タブ3の内容</div>

<script>
  const tabs = document.querySelectorAll('.tab');
  const tabContents = document.querySelectorAll('.tabContent');

  // タブの内容を表示する関数
  const showTabContent = (tabId) => {
    tabContents.forEach(content => {
      content.style.display = (content.id === tabId) ? 'block' : 'none';
    });
  };

  // タブをクリックしたとき
  tabs.forEach(tab => {
    tab.addEventListener('click', () => {
      const tabId = tab.classList[1]; // "tab1", "tab2", "tab3"
      showTabContent(tabId);
      history.pushState({ tab: tabId }, '', '/' + tabId);
    });
  });

  // 「戻る」「進む」で履歴を復元
  window.addEventListener('popstate', (event) => {
    const tabId = event.state?.tab || 'tab1';
    showTabContent(tabId);
  });

  // 初期ロード時の処理
  const initialTab = location.pathname.replace('/', '') || 'tab1';
  showTabContent(initialTab);
  history.replaceState({ tab: initialTab }, '', '/' + initialTab);
</script>

補足：
単純に「タブの表示状態」だけならURLだけでOK。

• タブごとのスクロール位置を残したい
• タブ内の内容がフィルタで絞り込まれている
• フォームの入力内容を復元したい

のような場合には、URLだけでは表現しづらい情報になるため、stateに保存しておくのが便利。

✅ まとめ

HistoryAPIは、ブラウザの履歴を操作できる機能。

• 「戻る」「進む」
• 履歴を追加・変更
• popstateで履歴の変化を監視

ポイント
ページ遷移がなくても履歴を管理できる。
URLや状態をうまく保存すれば、直感的で自然なUIが作れる。