JavaScriptのHistory.pushState()メソッドの動作を確認してみた

#JavaScript

若槻龍太

2022.02.10

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、CX事業本部 IoT事業部の若槻です。

今回は、JavaScriptのHistory.pushState()メソッドの動作を確認してみました。

History.pushState()とは

history.pushState()は、Webブラウザの履歴に状態を追加できるメソッドです。

History.pushState() - Web API | MDN

パラメーターは次の3つです。

state：履歴に追加したいオブジェクトを指定。
title：通常は使用されないため、空文字を指定。
url（オプション）：履歴に追加したいURL文字列を指定。

次の実装はstateを指定しつつ、hello-world.htmlパスを履歴に追加している例です。

const state = { 'page_id': 1, 'user_id': 5 }
const title = ''
const url = 'hello-world.html'

history.pushState(state, title, url)

また次の実装はfoo=barのクエリパラメータを履歴に追加している例です。

const url = new URL(window.location);
url.searchParams.set('foo', 'bar');
window.history.pushState({}, '', url);

動作確認

ここまでの説明だけだとピンと来ないと思うので、ボタンクリックでhistory.pushState()を行うデモアプリで動作を確認してみます。

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <script type="text/javascript">
    const buttonClick1 = () => {
      const state = { page_id: 1, user_id: 5 };
      const title = '';
      const url = 'hello-world.html';
      window.history.pushState(state, title, url);
    };

    const buttonClick2 = () => {
      const state = { page_id: 2, user_id: 8 };
      const url = new URL(window.location);
      url.searchParams.set('foo', 'bar');
      window.history.pushState(state, '', url);
    };
  </script>

  <body>
    <h1>Hello Vanilla!</h1>
    <input
      type="button"
      value="hello world"
      onclick="buttonClick1()"
    />
    <input
      type="button"
      value="foo bar"
      onclick="buttonClick2()"
    />
  </body>
</html>

下記デモアプリのボタンをクリックすると、ナビゲーションバーのURLが変更されることが確認できます。ナビゲーションバーの戻る/進むボタンも使えるかと思います。

またhistory.stateを使用すると、履歴に格納されたstateを取得することができます。

デモアプリでボタンクリックにより履歴を追加した上で、history.stateをブラウザで実行すると、最後にhistory.pushStateした際のstateを取得できます。

Reactにおけるhistory.pushState()

さて、URLを変更するだけのhistory.pushState()メソッドがどんなところで使われるかと言うと、ReactなどのSingle Page ApplicationでのRoutingライブラリなどを通して使うことになります。

Declarative routing for React apps at any scale | React Router

Single Page ApplicationではWebアプリへの最初のアクセス時にJavaScriptコードのいくつかの大きな塊をダウンロードします。以降のアプリ内でのページ遷移ではスクリプトによるページコンテンツの書き換えとRoutingライブラリによるURLの変更が行われることにより、仮想的なページ遷移が行われるため、ユーザーからすると高速なページ遷移が行われているように感じ、ユーザーエクスペリエンスの向上に繋がります。このRoutingライブラリにおいてhistory.pushState()が使われています。