History APIについて

2025年12月5日（更新: 2025年12月5日）

Web
ブラウザ

はじめに

12月1日から25日まで、毎日1記事ずつ公開していくアドベントカレンダー企画です。この連載では、Web標準とDDDについて学びを深めていきます。第5回は「History API」をテーマとして記事を執筆しました。この回ではNavigation APIを取り上げようと思っていたのですが、調査を始めたところHistory APIの後継としてNavigation APIがあることを知りました。先にHistory APIをまとめるのが良いと思い、History APIの記事を執筆しました。この回ではHistory APIとは何か、実際どのように実装するのかを学んでいきます。

History APIとは

History APIはブラウザのセッション履歴へのアクセスを提供しています。遷移の履歴から前後のページへ移動したり、履歴自体の操作をしたりする時に活用できます。

前のページに戻る

history.back();

次のページに進む

history.forward();

履歴内の特定のページへ移動

//1つ前の前のページに戻る。back()と同様の動作。
history.go(-1);

//1つ次のページに進む。forward()と同様の動作。
history.go(1);

ブラウザのセッション履歴に項目を追加

// state: pushState()によって作られる新しい履歴項目のオブジェクト。
// unused: この引数は歴史的な理由のために存在していて、省略不可。空文字を渡しておくと安全。
// url: stateを保存するURL。この引数を指定しない場合、現在のURLが設定される。
pushState(state, unused);
pushState(state, unused, url);

現在の履歴を編集し、メソッドに引数で渡された状態オブジェクトやURLで置き換える

// state: 編集する履歴項目のオブジェクト。登録されていないオブジェクトのキーであれば、値は新規作成され、すでに存在するものであれば更新される。
// unused: この引数は歴史的な理由のために存在していて、省略不可。空文字を渡しておくと安全。
// url: 編集を行う対象のURL。
replaceState(state, unused);
replaceState(state, unused, url);

History APIのpushState, replaceStateの実装例

history.back(), history.forward(), history.go()は想像がつきやすいと思ったので、ここではpushState()とreplaceState()の実装例をまとめています。

動作の流れ

pushStateボタンを押下
DevToolsのConsoleでhistory.stateを確認
replaceStateボタンを押下
DevToolsのConsoleでhistory.stateを確認

<html>
  <body>
    <button id="pushBtn">pushState</button>
    <button id="replaceBtn">replaceState</button>
  </body>
</html>
<script>
  document.getElementById('pushBtn')?.addEventListener('click', () => {
    history.pushState({ foo: "bar" }, '', '/');
  });
  document.getElementById('replaceBtn')?.addEventListener('click', () => {
    history.replaceState({ foo: "baz" }, '', '/');
  });
</script>

クイズ

1.history.go()に0を代入、または引数なしで呼び出すとどのような挙動になるでしょうか。 :::details 回答現在のページの再読み込みをする。 :::

まとめ

history APIはブラウザの履歴からページへの移動であったり、ページに対してstateの保存・更新が出来たりすることが分かりました。次回はNavigation APIについてまとめていきたいと思います。

参考

https://developer.mozilla.org/ja/docs/Web/API/History_API https://developer.mozilla.org/ja/docs/Web/API/History/pushState https://developer.mozilla.org/ja/docs/Web/API/History/replaceState