JavaScript　ブラウザー履歴に従ってページを前後に移動する方法

JavaScriptを使って、ユーザーがブラウザーの「戻る」または「進む」ボタンをクリックしたときに、ページを前後に移動する方法を解説します。

ブラウザー履歴に従ってページを前後に移動する方法を知りたいのですが、ブラウザー履歴を操作するためのJavaScriptのコードはどのように書けばいいですか？

ブラウザー履歴を操作するためには、window.historyオブジェクトを使用します。window.historyオブジェクトには、ブラウザー履歴のエントリーにアクセスするためのメソッドとプロパティが用意されています。また、back()とforward()メソッドを使用することで、ブラウザー履歴のエントリーを前後に移動することができます。

受講者数No.1！初心者からプロへ導く信頼のスクール

短期間で習得可能！未経験から実践力を磨く充実のプログラム

テックアカデミー公式ページへ ≫

今なら無料相談でAmazonギフトカードがもらえる！

ブラウザー履歴を操作する方法

ブラウザー履歴とは、過去に閲覧したWebページの履歴のことです。ブラウザー履歴を使うことで、過去に閲覧したWebページに戻ったり、進んだりすることができます。

ブラウザー履歴をJavaScriptで操作するには

　ブラウザー履歴をJavaScriptで操作するには、window.historyオブジェクトを使用します。このオブジェクトには、ブラウザー履歴のエントリーにアクセスするためのメソッドやプロパティが用意されています。また、back()メソッドを使用することで、1つ前のページに移動し、forward()メソッドを使用することで、1つ後のページに移動することができます。

back()とforward()メソッドとは？

back()とforward()メソッドは、window.historyオブジェクトのメソッドで、それぞれ1つ前のページに移動したり、1つ後のページに移動したりするために使用されます。

back()メソッドを使用すると、現在のページの前のページに移動することができます。これは、ブラウザーの「戻る」ボタンをクリックするのと同じ動作をします。

forward()メソッドを使用すると、現在のページの次のページに移動することができます。これは、ブラウザーの「進む」ボタンをクリックするのと同じ動作をします。

`back()`と`forward()`メソッドの使い方

以下は、back()とforward()メソッドを使用して、1つ前のページに戻ったり、1つ後のページに進んだりするJavaScriptのサンプルプログラムです。

// 1つ前のページに移動する
window.history.back();

// 1つ後のページに移動する
window.history.forward();

上記のコードでは、window.historyオブジェクトのback()メソッドを使用して、1つ前のページに移動しています。同様に、forward()メソッドを使用することで、1つ後のページに移動することができます。

サンプルプログラムを使った解説

以下のように、back()メソッドを呼び出すことで1つ前のページに移動し、forward()メソッドを呼び出すことで1つ後のページに移動することができます。

// 戻るボタンがクリックされたときに、1つ前のページに移動する
document.getElementById("back-button").addEventListener("click", function(){
  window.history.back();
});

// 進むボタンがクリックされたときに、1つ後のページに移動する
document.getElementById("forward-button").addEventListener("click", function(){
  window.history.forward();
});

back()とforward()メソッドを使用する際の注意点

back()とforward()メソッドを使用してブラウザー履歴を操作する際には、以下の注意点に注意してください。

back()とforward()メソッドは、JavaScriptを使用してページ遷移する場合に限り使用するべきです。ユーザーに対して自動的にページ遷移を行うことは、UXに悪影響を与えるため、避けるべきです。
back()とforward()メソッドを使用して、過去のページに戻ることができるため、機密情報や重要な情報が含まれているページでは、使用を控えるべきです。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。