価格.comのあの挙動が長年謎だったけど最近ついにその挙動がまねできるかもしれないものがわかった

あれってURLがサブドメインから変わるけれど、画面の一部しか書き換わりませんよね。どうやっているのかすごく気になっていたのですが、最近完全に真似は出来ないものの、それっぽいことができるpushStateというものを知りました。

これなに

ブラウザーは今までにアクセスした場所の履歴を覚えています。実はこれ、JavaScriptからもアクセスすることができるのですが、pushStateを使うと改変しちゃうことができます。
history.pushState('', '', 'hoge.html');
でURLがhttp://example.com/hoge.htmlに書き換わります。書き換わるだけです。あとは必要な部分だけAjaxで書き換えてあげれば画面の一部分だけを更新できるという寸法です。ただこれ、同じオリジンでないと書き換えできないため、価格.comのまねをするには至りません。あれはサブドメイン変えてきてますからね…なおGitHubはこれを使ってシームレスな画面遷移を実現しているそうです。

使い方

どちらかというと心がけなのですが、リンク先はちゃんと実体があるものにしておきましょう。サイトにアクセスしてくれる人のブラウザーがpushStateに対応している保証はありませんからね。