history.pushstate の役割

HTML5で追加された新しいブラウザAPIで、ページ全体を更新せずにURLと履歴の変更ができます。

その働きは以下の通りです。

1. ブラウザのURLをページを再読み込みせずに変更するには、pushStateメソッドを使用します。これは、新しいページを読み込むことなくURLを更新し、単一ページアプリケーション（SPA）を実装する際に非常に役立ちます。
2. ブラウザ履歴の更新：pushStateメソッドを使うと、ブラウザの履歴に新しいURLを追加でき、ユーザーはブラウザの進む/戻るのボタンで、そのURLから対応するページステートに移動できます。
3. pushStateメソッドとpopstateイベントを併用するとフロントエンドルーティングが実現し、URLの変化に合わせて異なるページのコンテンツが読み込まれます。これにより、SPAのページ遷移効果が実現され、フロントエンドとバックエンドの分離も容易になります。

なお、pushStateメソッドはURLとブラウザの履歴を変更するだけで、ページの更新や新しいコンテンツの読み込みは行いません。新しいコンテンツの読み込みが必要な場合は、他の技術（AJAX など）を組み合わせて実現する必要があります。