JavaScriptで戻る・進むを制御する方法（History API解説）

はじめに
- 対象読者
History APIとは
History APIの基本的な使用方法
フォーム入力中のブラウザバックを防止する方法
さいごに

はじめに

こんにちは、株式会社TOKOSのナオキです！

プロジェクトを実装している際、ブラウザの「戻る」や「進む」の動作に悩まされたことはありませんか？
たとえばユーザーがフォーム入力中に誤って戻るボタンを押してしまい、入力内容が消えてしまうといったケースです。

そんな悩みを解決してくれるのが、今回ご紹介するHistory API です。

History APIを活用すれば、アプリケーションにおける画面遷移をより直感的に、ユーザー体験を損なうことなく実現できます。
この記事では、基本的な使い方から具体的な実装例までをわかりやすく解説していきますので、ぜひ最後まで読んでみてください！

対象読者

初学者の方
フロントエンド開発をされている方

History APIとは

History APIとは、ブラウザが持つ「履歴」をJavaScriptから操作することのできるAPIのことです。
通常、ブラウザの「戻る」「進む」ボタンはユーザーが操作するもので、開発者が直接制御することはできません。
しかし、History APIを使うことで、アプリケーションから以下のような操作が可能になります。

ブラウザの「戻る」「進む」と同じ動作を実行する
ページをリロードせずにURLを変更し、履歴に新しい状態を追加する
現在の履歴を新しい内容で置き換える
ユーザーが戻る / 進むを操作したときにイベントを検知して処理を実行する

History APIの基本的な使用方法

ここでは代表的な使用方法を紹介します！

履歴を移動する方法

history.back() – 1つ前に戻る

JavaScript

history.back();

history.back();

ブラウザの「戻る」と同じ動作です。

history.forward() – 1つ先に進む

JavaScript

history.forward();

history.forward();

ブラウザの「進む」と同じ動作です。

history.go() – 指定した数だけ移動する

JavaScript

history.go(0);  // 現在のページを再読み込みする
history.go(1);  // 1つ先に進む
history.go(-2); // 2つ前に戻る

history.go(0);  // 現在のページを再読み込みする
history.go(1);  // 1つ先に進む
history.go(-2); // 2つ前に戻る

負の数で戻り、正の数で進みます。

履歴を追加・置き換える方法

history.pushState() – 履歴を追加

JavaScript

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

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

指定したURLをリロードしないで更新し、履歴をブラウザに保存することができます。

第一引数には、履歴に紐づけて保存して置きたいデータを指定できます。
戻る / 進むで追加した履歴に戻った場合、window.history.stateで保存した情報を取得できます。

第二引数には、元々ページのタイトルを指定することができましたが、現在では対応しているブラウザがほとんどなく無視されてしまいます。
省略することが出来ないので空文字を渡します。
以下ドキュメントからの引用：
このパラメータは歴史的な理由で存在しており、省略することはできません。空の文字列を渡すと、メソッドの将来の変更に対して安全になります。

第三引数には、URLを指定できます。同一オリジンのURLのみ指定可能です。

ナオキ

同一オリジンとは、スキーム、ドメイン、ポート番号がすべて同じであることだね！

history.replaceState() – 履歴を置き換える

JavaScript

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

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

現在の履歴を新しい内容で置き換えることができます。

引数にいれる値は、上記のpushState()と同じです。

pushState() が新しい履歴を追加するのに対して、replaceState() は今の履歴を上書きします。
つまり、履歴の数は増えずに中身だけ差し替わるということです。

履歴の変化を検知する方法

popstate – 履歴の変更を検知

JavaScript

window.addEventListener("popstate", (event) => {
  console.log("ユーザーにて「進む / 戻る」操作が行われました");
  console.log(event.state)
});

window.addEventListener("popstate", (event) => {
  console.log("ユーザーにて「進む / 戻る」操作が行われました");
  console.log(event.state)
});

戻る / 進むで履歴の変更がされたときに発生するイベントです。

event.stateにてpushState やreplaceState で保存したデータを取得することができます。

フォーム入力中のブラウザバックを防止する方法

Web上のフォームを利用していると、ユーザーが誤って「戻る」ボタンを押してしまい、入力内容が消えてしまうことがあります。
これはユーザーにとって大きなストレスとなります。
この問題をHistory APIを活用して軽減する方法を紹介します。

JavaScript

// 履歴を追加して「戻る」で前のページにすぐ戻れないようにする
history.pushState(null, "", "/form");

// popstateイベントで検知して「はい / いいえ」のダイアログを表示
window.addEventListener("popstate", (event) => {
  const result = confirm("入力内容が失われます。本当に戻りますか？");
  if (result) {
    // はい → 実際に戻す
    history.back();
  } else {
    // いいえ → 履歴を積み直して戻らせない
    history.pushState(null, "", "/form");
  }
});

// 履歴を追加して「戻る」で前のページにすぐ戻れないようにする
history.pushState(null, "", "/form");

// popstateイベントで検知して「はい / いいえ」のダイアログを表示
window.addEventListener("popstate", (event) => {
  const result = confirm("入力内容が失われます。本当に戻りますか？");
  if (result) {
    // はい → 実際に戻す
    history.back();
  } else {
    // いいえ → 履歴を積み直して戻らせない
    history.pushState(null, "", "/form");
  }
});