【JavaScript】history.back – ひとつ前のページに戻る

Webブラウザには、履歴を管理するhistoryオブジェクトがあります。その中の history.back()メソッドを使うことで、履歴のひとつ前のページに戻ることができます。今回は、その基本的な使い方や使用時の注意点についてまとめていきたいと思います。

history.back()とは？

history.back()は、ブラウザの「戻る」ボタンと同じ動作をするメソッド です。

基本構文

history.back();

このメソッドを実行すると、現在のページの1つ前のページに戻ります。

基本的な使い方

戻るボタンを実装

document.getElementById('backButton').addEventListener('click', function() {
  history.back();
});

<button id="backButton">前のページに戻る</button>

addEventListenerを使用して、buttonをクリックするとユーザーが直前に訪れたページに遷移します。

サンプルコード

戻るボタンの非表示処理（履歴がない場合）

document.addEventListener('DOMContentLoaded', function() {
  if (history.length <= 1) { // 履歴の数を確認
    document.getElementById('backButton').style.display = 'none';　// 非表示
  }
});

history.lengthをチェックし、履歴が1件以下の場合は戻るボタンを非表示にします。ユーザーが直接ページを開いた場合など、戻る先がない時に不要なボタンを表示しないようにします。

location.hrefを使う

history.back()は履歴がないと動作しません。そのため、代わりに特定のページへ遷移させる処理を加えることもできます。

document.getElementById('backButton').addEventListener('click', function() {
  if (history.length > 1) {
    history.back();
  } else {
    location.href = '/default-page.html';
  }
});

history.lengthをチェックして、履歴がない場合は特定のページへリダイレクトさせます。ユーザーが直接ページを開いた場合に適用可能です。

使用時の注意点

履歴がない場合は動作しない

history.back()は、ブラウザの履歴に前のページがないと動作しません。そのため、履歴がない場合の代替処理を用意すしましょう。

if (history.length > 1) {
  history.back();
} else {
  alert('戻る履歴がありません');
}

シングルページアプリケーション（SPA）では適切に機能しないことがある

history.back() はブラウザの履歴を操作するため、SPA の場合、期待通りの挙動をしないことがあります。window.history.pushState()やwindow.history.replaceState()を利用して履歴を適切に管理する必要があります。