ウェブページのナビゲーションを改善するために、JavaScriptを使用して戻るボタンと進むボタンを実装する方法を紹介します。
戻るボタンと進むボタン
JavaScriptを使って戻るボタンと進むボタンを作る方法は、通常、ブラウザの履歴を制御する history オブジェクトを使用します。以下は、基本的な戻るボタンと進むボタンの作り方です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Back and Forward Buttons</title>
</head>
<body>
<button onclick="goBack()">戻る</button>
<button onclick="goForward()">進む</button>
<script>
function goBack() {
window.history.back();
}
function goForward() {
window.history.forward();
}
</script>
</body>
</html>
このコードでは、2つのボタンをクリックしたときに goBack() と goForward() 関数が呼び出されます。goBack() 関数はブラウザの履歴を1つ前に戻り、goForward() 関数は1つ進みます。これにより、ブラウザの戻るボタンや進むボタンと同じような動作を実現できます。
よくある質問（FAQ）
Q. JavaScriptでブラウザの戻る・進むボタンを制御するには？
A. history.back()で戻る、history.forward()で進む、history.go(n)でn段階の移動ができます。popstateイベントで履歴変化を検知して処理を追加できます。
Q. SPAで戻るボタンを適切に動作させるには？
A. history.pushState()でURLを変更してHistory APIで管理します。popstateイベントでルーティング処理を行い、適切なページ状態を復元します。Vue RouterやReact Routerはこれを自動で処理します。
Q. 特定の状態へ戻る処理を実装するには？
A. history.pushState({data: state}, “”, url)でカスタムデータを履歴に保存し、popstateイベントのevent.stateから取り出して画面を復元します。
