History - 戻る・進むなどの履歴操作やURL管理を行うAPI

The History object is an API in JavaScript that enables you to perform browser history operations—such as "Back" and "Forward"—and dynamically modify or manage the URL and session history state.

History

Historyオブジェクトは、ブラウザーが保持している“セッション履歴”を操作するためのAPIを提供します。セッション履歴とは、ユーザーがサイト内でページを遷移した履歴を指しており、一般的にはブラウザの「戻る」「進む」ボタンの動作に対応しています。JavaScriptからHistoryオブジェクトを使うと、プログラム的に「前のページに戻る」や「次のページに進む」などの操作を実行したり、URLと履歴を動的に追加・変更したりできます。

なぜHistoryオブジェクトを学ぶ必要があるのか？

Historyオブジェクトの基本プロパティ

注意: history.length が “現在地のページを含む” という点を覚えておきましょう。例えば、最初に1ページだけしか見ていなければ history.length は 1 となります。

履歴の移動に関するメソッド

履歴スタックの操作（pushState / replaceState）

HTML5から登場したhistory.pushState()とhistory.replaceState()は、画面遷移を伴わずにブラウザの履歴とURLを直接操作できます。SPAのように、部分的にコンテンツを差し替えたい場合や、URLパラメータを動的に変えたい場合に非常に有用です。

// 現在の状態を“stateObj”に入れ、新しいURL“/new-page”を履歴に追加 const stateObj = { someData: '保存したいデータ' }; history.pushState(stateObj, 'new page title', '/new-page');

popstateイベント

pushState()やreplaceState()を使ってURLを動的に変更したとき、ユーザーが「戻る」や「進む」を押した際には、ページの再読み込みは行われず、代わりにJavaScriptの**popstateイベント**が発生します。このイベントを使うと、履歴の状態が変わったタイミングで画面の描画を更新するといった動きが実現できます。

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>popstateイベントの例</title>
</head>
<body>
	<h1>History API サンプル</h1>
	<button id="pushStateBtn">pushStateでURLを追加</button>
	<button id="replaceStateBtn">replaceStateでURLを置き換え</button>

	<script>
		// ボタン要素を取得
		const pushStateBtn = document.getElementById('pushStateBtn');
		const replaceStateBtn = document.getElementById('replaceStateBtn');

		// pushStateボタンが押されたときに新しい履歴を追加
		pushStateBtn.addEventListener('click', () => {
			const stateData = { message: 'Pushed!' };
			history.pushState(stateData, 'Pushed State', '/push-sample');
			console.log('pushStateでURLを /push-sample に変更しました');
		});

		// replaceStateボタンが押されたときに現在の履歴を置き換える
		replaceStateBtn.addEventListener('click', () => {
			const stateData = { message: 'Replaced!' };
			history.replaceState(stateData, 'Replaced State', '/replace-sample');
			console.log('replaceStateでURLを /replace-sample に変更しました');
		});

		// popstateイベントの監視
		window.addEventListener('popstate', (event) => {
			// event.state には pushState/replaceState でセットしたstateオブジェクトが入っている
			console.log('popstateイベントが発生:', event.state);
			// ここで画面を更新したり、URLに応じたコンテンツ切り替えをしたりできる
		});
	</script>
</body>
</html>

この例で、ユーザーがブラウザの戻るボタンをクリックすると、popstateイベントが呼び出され、コンソールにevent.stateの内容が表示されます。SPAのルーティングなどでは、この仕組みを使って柔軟に画面更新を行います。

注意点とベストプラクティス

まとめ

History APIは、Webアプリケーションをよりリッチに、かつユーザーフレンドリーにする強力な手段です。とりわけSPA開発ではほぼ必須の知識と言っても過言ではありません。ぜひ理解を深め、実際のプロジェクトで活用してみてください。