【ひすとりーえーぴーあい】

History API とは？

最終更新: 2026年10月8日

💡 URLと履歴を、ページを読み込み直さずに更新する

ブラウザの現在のタブやウィンドウのセッション履歴をJavaScriptから操作するAPI。pushState()やreplaceState()では、ページを読み込み直さずに履歴とURLを更新できる。

📌 このページのポイント

pushStateは履歴を追加、replaceStateは現在の履歴を更新。どちらも呼び出し時にページを読み込み直さない。

ひよこ

「戻る」ボタンとHistory APIは関係あるの？

ペンギン先生

そうだよ。今のタブやウィンドウのセッション履歴をJavaScriptから扱うAPIなんだ。back()やforward()で履歴を移動できる。この移動では、別のページを読み込むこともあるよ。

ひよこ

操作できるってことは、履歴を書き換えられるの？

ペンギン先生

pushState()で新しいエントリを追加し、replaceState()で現在のエントリを更新できる。どちらも、その呼び出しでは新しいページを読み込まないよ。URLを変える場合は、現在のページと同一オリジンである必要があるんだ。

ひよこ

ページを読み込み直さないのに、URLだけ変わるってどういうこと？

ペンギン先生

ブラウザのURL欄と履歴を更新するだけなので、画面の内容は自動では変わらないよ。SPAではアプリ側のJavaScriptで内容を差し替えて、URLと画面を対応させるんだ。

ひよこ

「戻る」ボタンを押したときはどうなるの？

ペンギン先生

SPA内で作った履歴に戻るときは、popstateを受け取って保存した状態に合わせて画面を復元できる。pushState()やreplaceState()を呼ぶだけではpopstateは発生しないよ。別の文書に戻る場合は、ページの読み込みが起こることもあるんだ。

ひよこ

これってSPAでよく使われてるやつだよね？

ペンギン先生

そうだね。ページ全体を読み込まずに画面を切り替えるSPAのルーティングで使われる。pushState()なら履歴を追加し、replaceState()なら現在の履歴を置き換える。URLの変更と画面の表示をアプリ側でそろえるのが大切なんだ。

まとめ：ざっくりこれだけ覚えればOK！

「History API」って出てきたら「ブラウザのセッション履歴を操作し、ページを読み込み直さずURLも更新できる仕組み」と思えばだいたいOK！

📖 おまけ：英語の意味

「History API」＝履歴API

💬 Historyは履歴のこと。対象は今のタブやウィンドウのセッション履歴で、ブラウザに保存された全閲覧履歴の一覧を読み書きするAPIではないんだよ

参考資料