JavaScriptのhistory.pushState()とは？

＜目次＞

(１) JavaScriptのhistory.pushState()とは？
　(１-１) 概要
　 (１-２) 構文
　 (１-３) サンプルプログラム
　 (１-４) 使いどころ

(１) JavaScriptのhistory.pushState()とは？

(１-１) 概要

history.pushState()メソッドを使うと、ブラウザのセッション履歴に狙ったレコードを追加する事ができます。pushState()メソッド自体の挙動としては、ブラウザのアドレスバーに出ているURLを「書き換え」しつつ、表示されているページはそのまま残す、という動きになります。

（history.pushStateの機能）

・①ブラウザのアドレスバーのURLを指定のURLに書き換え

・②ブラウザの履歴に指定のURLのレコードを登録

（図１１１）

＞目次にもどる

(１-２) 構文

（構文）

history.pushState(state, title [, url])

（構文説明）

引数名	必須/任意	説明
state	必須	履歴レコードとセットで生成されるJavaScriptのオブジェクトです。セット＆取得はそれぞれ次のように実施できます。 ●セット例 const state = { ‘user_id’ : ‘A001’, ‘user_name’ : ‘Rainbow’ } ●取得例セットしたstateオブジェクトの取り出しは次のように行えます。 var tmp = history.state;
title	必須	理論上はブラウザのタブのタイトルを変更しますが、2021年3月時点では殆どのブラウザでこの「title」引数を無視しているようです。そのため、実質的に利用されるのは「url」引数を使ったアドレスバーのURL書き換えのみで、その用途で使う際の「title」引数はnullで利用されるケースが多いです。
url	任意	アドレスバーのURLの変更後の値を指定します。 pushState()メソッドを実行後、ブラウザのアドレスバーはこのURLに指定した値に書き換わります。

＞目次にもどる

(１-３) サンプルプログラム

●JavaScript

JSP側の画面を押下すると「history.pushState」が実行され、その後「history.state」でstateで与えたObjectを取得してコンソールに表示しています。

（サンプル）

function PushStateTest(){
 
        //# history.pushStateの挙動確認①
        const state = { 'user_id' : 'A0001','user_name' : 'Rainbow' }
        const title = ""
        const url = './IT0xxx_JsHistoryPushState_AFTER.jsp'
        history.pushState(state,title,url)
 
        //# 第一引数(state)の取得・利用例
        var tmp = history.state;
        console.log(tmp);
 
}

●JSP

JavaScriptを起動するボタンを設置するための簡単な画面です。

（サンプル）

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/IT0xxx_JsHistoryPushState_syntax.js" type="text/javascript" charset="UTF-8"></script>
<title>JavaScript history.pushState Test</title>
</head>
<body>
<h2>■history.pushStateの挙動確認①</h2>
<input type="button" value="PushStateテスト実行" onclick="PushStateTest()">
</body>
</html>

（図１３１）実行結果

挙動として以下の点が確認できています。

・アドレスバーのURLが書き換わっている

・ただし、表示されている内容はそのまま（再描画はされない）

・stateでセットしたオブジェクトが正しくコンソールに表示されている

（動画）

実際に画面のボタンを押してURLが書き換わる様子を動画にしたので、もしよければご確認ください。

動画プレーヤー

Media error: Format(s) not supported or source(s) not found

ファイルをダウンロード: https://rainbow-engine.com/wp-content/uploads/2021/06/RP-IT0365_JavaScript_history_pushstate/RP-IT0365_131_bandicam-2021-03-29-11-51-16-827.mp4?_=1

00:00

ボリューム調節には上下矢印キーを使ってください。

＞目次にもどる

(１-４) 使いどころ

さて、ここまでお読みになって「この機能ってどんな場面で使うの？」と疑問に思われた方もいらっしゃるかと思います。今回はJava（JSP/Servlet）においてpushStateが非常に有効に作用する用途を１つご紹介いたします。

●利用シーン

Servletにてforwardメソッドを使って、別画面（JSP）に遷移させる際に、通常だとURLがServletのまま残ってしまいます。

（図１４１）BEFORE

（動画）

動画プレーヤー

Media error: Format(s) not supported or source(s) not found

ファイルをダウンロード: https://rainbow-engine.com/wp-content/uploads/2021/06/RP-IT0365_JavaScript_history_pushstate/RP-IT0365_141_bandicam-2021-03-29-12-12-32-268.mp4?_=2

00:00

ボリューム調節には上下矢印キーを使ってください。

しかし、pushStateを利用する事で、このフォワード後のURLを実際に表示されているJSPのものに書き換える事ができます。これにより、ブラウザの履歴上もServletのURLではなく、JSPのURLが記録されるようになります。

（図１４２）AFTER

（動画）

動画プレーヤー

Media error: Format(s) not supported or source(s) not found

ファイルをダウンロード: https://rainbow-engine.com/wp-content/uploads/2021/06/RP-IT0365_JavaScript_history_pushstate/RP-IT0365_142_bandicam-2021-03-29-12-18-14-115.mp4?_=3

00:00

ボリューム調節には上下矢印キーを使ってください。

まとめると次のようなイメージです。

（図１４３）

●利用シーンのソースコード

上記の（図１４２）AFTERのサンプルプログラムを掲載します。

JSP① ⇒ [ボタン押下] ⇒ Servlet ⇒ [forwardメソッド] ⇒ JavaScript発動 ⇒ JSP②

■JSP①

（ポイント）

ボタンを押下すると、formのactionで指定したServlet「IT0xxx_JsHistoryPushState_SERVLET」を実行するだけの画面です。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JavaScript history.pushState Test</title>
</head>
<body>
<h2>■history.pushStateの挙動確認②</h2>
<form method="POST" action="IT0xxx_JsHistoryPushState_SERVLET" name="Forward1">
<input type="text" name="field1" />
<br />
<br />
<input type="submit" value="Go To IT0xxx_JsHistoryPushState_SERVLET"/>
</form>
</body>
</html>

■Servlet

（ポイント）

特に処理は実施しておらず、単に「IT0xxx_JsHistoryPushState_AFTER.jsp」へforwardメソッドでフォワードしているのみです。

import java.io.IOException;
 
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
@WebServlet("/IT0xxx_JsHistoryPushState_SERVLET")
public class IT0xxx_JsHistoryPushState extends HttpServlet {
    private static final long serialVersionUID = 1L;
 
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String nextPage = "/IT0xxx_JsHistoryPushState_AFTER.jsp";
        RequestDispatcher rd = getServletContext().getRequestDispatcher(nextPage);
        rd.forward(request, response);
    }
}

■JavaScript

（ポイント）

ここが一番のポイントです。サンプルと同様に「history.pushState」が実行されてURLが書き換わり、その後「history.state」でstate引数で与えたObjectを取得してコンソールに表示しています。

更に全体をjQueryの「$(document).ready()」で囲む事によって、ドキュメントがロードされたタイミングで自動実行され、ユーザーからは元々URLが書き換え後（AFTER）の「IT0xxx_JsHistoryPushState_AFTER.jsp」であったかのように見えます。

$(function (){
 
    //# history.pushStateの挙動確認①
    const state = { 'user_id' : 'A0001','user_name' : 'Rainbow' }
    const title = ""
    const url = './IT0xxx_JsHistoryPushState_AFTER.jsp'
    history.pushState(state,title,url)
 
    //# 第一引数(state)の取得・利用例
    var tmp = history.state;
    console.log(tmp);
 
});

■JSP②

（ポイント）

URL書き換えのJavaScriptを発動させるため、jQueryのライブラリをインポートしています。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="js/IT0xxx_JsHistoryPushStateTest.js" type="text/javascript" charset="UTF-8"></script>
<title>JavaScript history.pushState Test</title>
</head>
<body>
<h2>■history.pushStateの挙動確認②</h2>
<div>
Input Value = <%=request.getParameter("field1") %>
</div>
<br />
<a href="IT0xxx_JsHistoryPushState.jsp" >→ Back To IT0xxx_JsHistoryPushState.jsp.jsp</a>
</body>
</html>

＞目次にもどる