History API

ヒストリエーピーアイ（API & Web機能）

意味ブラウザ履歴の操作

History APIとは？

History APIは、ブラウザのセッション履歴を操作するためのAPIです。ページ遷移なしでURLを変更したりできます。

History APIの具体的な使い方

URLの変更と履歴操作の例

// 新しい履歴エントリを追加
function addHistoryEntry(path, state) {
  history.pushState(state, '', path);
  console.log(`新しいURLに変更されました: ${path}`);
  console.log(`履歴が変更されました。現在のstate:`, state);
}

// 履歴を1つ戻る
function goBack() {
  history.back();
}

// 履歴を1つ進む
function goForward() {
  history.forward();
}

// 使用例
addHistoryEntry('/page1', { page: 1 });
addHistoryEntry('/page2', { page: 2 });

// popstateイベントのリスナーを追加
window.addEventListener('popstate', function(event) {
  console.log('現在のURL:', location.pathname);
  console.log('現在のstate:', event.state);
});

👇出力結果

新しいURLに変更されました: /page1
履歴が変更されました。現在のstate: { page: 1 }
新しいURLに変更されました: /page2
履歴が変更されました。現在のstate: { page: 2 }

History APIを使用してURLを変更し、履歴を操作する例です。新しい履歴エントリの追加、戻る、進む操作を行い、popstateイベントをリッスンしています。

History APIに関するよくある質問

Q. pushStateとreplaceStateの違いは？

A. pushStateは新しい履歴エントリを追加しますが、replaceStateは現在の履歴エントリを置き換えます。pushStateを使うと「戻る」ボタンで前のページに戻れますが、replaceStateではそれができません。

Q. stateオブジェクトの用途は？

A. stateオブジェクトは、URLに関連付けられたデータを保存するために使用されます。これにより、ページ遷移時にデータを保持したり、popstateイベントでそのデータを取得したりできます。

Q. サーバーへの通信は発生しますか？

A. いいえ、History APIを使用してURLを変更しても、サーバーへの通信は発生しません。これはクライアントサイドでのみ動作し、ページの再読み込みを行わずにURLを変更できます。

History APIが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのHistory APIやPerformance API、Vibration API、Navigator API、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。