Javascriptでフェード付きページ移動をしているように見せかけ、実際はBodyとURLのみを変更する処理の実装

Question

タイトルの通りです。調べても出てこなかったので質問させていただきます。
まずそういう表現の方法の名前すらもわからなかったのでよく分からないタイトルになってしまいました。

サンプルはこちらです。普通にページを移動しているように見えますが、ChromeのConsoleで見たところ何か処理をしているようです。移動しているのにページの読み込みを行っていないように感じます。本当にページを移動しているだけだったらごめんなさい。

回答よろしくお願いいたします。

Answer 1

表題のような、「JavaScriptでページ書き換え・アドレスバー書き換えを行って、ページ遷移をエミュレーションする技術」は、「pjax」と通称されています（もともとは、こういったことを実現するJavaScriptライブラリの名前でしたが、技術概念自体もそう呼ばれています）。

pjaxは、pushStateとAjaxの2つから成り立っています。

• pushState…ブラウザのアドレスバーに履歴を残したり、ブラウザの「戻る」や「進む」に対応して挙動を切り替える技術
• Ajax。JavaScriptからHTTPアクセスを行う技術

Comments

[RusuBana]

返信が遅れ申し訳ありません。
表題にしたような技法は「pjax」と言うのですね。
どういった仕組みで成り立っているのかの説明もしていただきありがとうございます。

Answer 2

コードを読んだわけではありませんが、history.pushState() メソッドが書かれていましたので、これを使っていると思います。

これにより URL バーには http://mozilla.org/bar.html と表示されますが、bar.html が存在しているかどうかに関わらずブラウザが bar.html をロードすることはありません。

Manipulating the browser history - Web developer guide | MDN

.pushState() を使ってURLを変更し履歴を追加する一方で動的にページを変更し、「戻る」を押された際の処理はpopStateイベントで動的にページを再構成する、というやり方だと思います。

Comments

[RusuBana]

ご回答有り難うございました。あなたの回答も具体的で大変参考になったのですが、先に回答していただき、表題のような表現方法自体の名称を回答してくださった方をベストアンサーにさせていただきました。