導入：なぜHistory APIが必要なのか？
Webサイトを閲覧しているとき、ブラウザの「戻る」ボタンを押した経験は誰にでもありますよね。通常、ページを遷移すると完全に新しいページが読み込まれますが、最近のWebアプリ（SPAなど）では、ページ全体をリロードせずにコンテンツだけを切り替えることがよくあります。
ここで課題になるのが「ブラウザの履歴」です。コンテンツを切り替えても、ブラウザの履歴には反映されず、ユーザーが「戻る」ボタンを押すと、サイト全体から離脱してしまうことがあります。これを解決し、ブラウザの履歴をJavaScriptから自由に制御できるのが「History API」です。
基礎知識：History APIの仕組み
History APIは、ブラウザのセッション履歴を操作するための機能です。主にwindow.historyオブジェクトを通じてアクセスします。
特に重要なのが「pushState」というメソッドです。これは、現在のページをリロードすることなく、履歴スタックに新しいエントリを追加する機能です。これにより、ユーザーが「戻る」ボタンを押したときに、JavaScriptで「前の状態」を復元することが可能になります。
実装：履歴を操作する手順
履歴を追加するには、主に以下の3つの引数をとるpushStateメソッドを使用します。
1. stateオブジェクト：履歴に関連付けるデータ（状態）
2. title：新しいページのタイトル（現状のブラウザではほとんど無視されます）
3. url：ブラウザのアドレスバーに表示するURL（ドメイン内である必要があります）
この後、ユーザーが戻るボタンを押したときに発生する「popstateイベント」を監視することで、画面の状態を元に戻す処理を実行します。
サンプルプログラム：履歴を操作して画面を切り替える
以下のコードをHTMLファイルとして保存し、ブラウザで開いて確認してみてください。ボタンを押すたびにURLが変わり、戻るボタンで前の状態に戻ります。
応用・注意点：現場で気をつけること
現場でHistory APIを使う際、もっとも注意すべき点は「サーバー側の対応」です。
pushStateでURLを書き換えた状態でユーザーが「再読み込み（リロード）」を行うと、ブラウザはそのURLに対してサーバーへリクエストを送ります。しかし、そのURLがサーバー上に物理的に存在しない場合（SPAの仮想的なパスの場合）、404エラーになってしまいます。
これを防ぐには、サーバー側で「どのURLにアクセスがあってもindex.htmlを返す」ような設定（リライト設定）が必要です。また、stateには巨大なデータは入れず、あくまで状態を復元するための最小限の識別子（IDなど）を入れるのがパフォーマンス向上のコツです。