要約

  • W3Cの2009年4月のHTML 5作業草案は、pushState()で状態付きの履歴を加え、保存された項目に戻ったときにpopstateを届ける仕組みを記した。一つの文書の中の画面も、戻る道の途中に置けた。
  • 2014年のHTML5勧告はreplaceState()も規定し、小さなゲームがevent.stateから前の画面を組み立て直す例を示した。ブラウザーは切符を保管し、ページは舞台を直す。

戻るボタンは約束を守っていた。一つ前の履歴項目へ移ったのだ。ところがページは次の場面の衣装を着たまま、客席に向かって平然と立っていた。読者はボタンを責める。ブラウザーは正しい切符を持っている。舞台係が前の背景を見失ったのである。

サイトが文書全体を読み込み直さずに一部を入れ替えると、この食い違いが目立つ。写真一覧で次の写真を見る。検索結果が差し替わる。地図が別の町へ動く。画面は進んだのに、アドレスは動かないことがある。読者が戻るを押すと、欲しかった写真や結果を通り越して別のページへ飛んでしまう。ページが内部の変化を履歴に渡していなければ、ブラウザーは存在を知らない場面へ戻れない。

2009年4月23日付のW3C HTML 5作業草案は、二つの記憶を結ぶ方法を説明した。Historyにはback、forward、goがある。pushState(data, title, url)は状態を持つ項目をセッション履歴へ加え、保存された状態の項目が再び有効になるとpopstateが届けられる。一つの文書の中の画面にもURLと状態を与え、ブラウザーが辿れる足場を作れた。

草案にある例の一つは、位置をURLとして保存できるゲームだ。駒が進む。ページが新しい位置を描き、URLと履歴の項目も進む。戻るを押せば、ブラウザーは前の項目とその状態を取り出す。駒を前の位置に描き直すのはゲームのコードだ。ブラウザーが切符をしまっておいても、舞台の小道具まで組み立ててくれるわけではない。

項目を増やすか、今の項目を書き換えるかも大事な選択になる。2014年10月28日のW3C HTML5勧告は、pushState()が項目を加え、replaceState()が現在の項目を更新すると説明する。読者が後で戻りたい画面なら一つの段にする。現在の画面の修正なら同じ段に置ける。キーを一つ打つたびに段を増やせば、戻る一回が長旅になる。肝心な画面の変更を記録しなければ、読者の足跡を飛び越える。

2014年の文書には、一本の線の上を動く小さなゲームの例がある。位置が変わるとhistory.pushState(...)を呼ぶ。履歴を辿ってpopstateが来ると、onpopstateがsetupPage(event.state)へ状態を渡して画面を整える。短いコードに役割分担が詰まっている。ブラウザーは履歴の項目を選び、ページはその場面を再現する。アドレスバーだけが正しく、舞台は別の芝居のままでは、劇場の看板が間違った幕の上に掛かっているようなものだ。

URLには境界もあった。2014年の勧告は、ページが履歴に書くURLを現在の文書と照らして制限した。WHATWGの現行HTML標準にある履歴とナビゲーションの章も、URLを書き換えられる範囲を定める。HTTPやHTTPSのページでは、許された条件のもとでパス、クエリー、フラグメントを変えられる。別のサイトの名前を勝手に掲げることはできない。画面と一緒に動くアドレスは、正直な住所であるべきだ。

状態の値は、ブラウザーとアプリがやり取りする小さなメモである。ブラウザーは履歴の項目と一緒に値を保管する。ページはその意味を決める。選択したタブ、地図の位置、カードの識別子かもしれない。読者が戻るとpopstateがそのメモを届ける。ページが読まずに放っておけば、アドレスと画面が別々の話を始める。記録係のブラウザーは間違えていない。舞台係が合図を聞き逃した。

このAPIが読者の戻るボタンをサイトへ譲ったわけではない。押すのは読者で、履歴を移動するのはブラウザーだ。ページは、内部の変化をいつ新しい項目にするか、そこへ何を記録するか、戻ったときにどの画面を描くかを選ぶ。この協力によって、一つの文書の中で姿を変えるサイトにも、見慣れた帰り道ができた。

2009年の草案と2014年の勧告は、この契約の二つの場面を見せる。草案は状態付きの項目を加える方法をすでに説明していた。勧告は追加と置き換えを並べ、履歴のイベントから画面を再構築する例を示した。WHATWGの現行文書も、より広いナビゲーションの仕組みの中で古典的な履歴操作を規定している。変わったのはボタンの形ではない。ブラウザーは順番を覚え、ページは各場面の姿を覚えるようになった。

読者の望みは昔から単純だ。戻るを押したら、さっきの場所が見たい。History APIは動くページに、その期待を守る道具を渡した。ブラウザーが正しい履歴へ戻ったのにページが次の舞台から動かなければ、台詞を覚えていたのは戻るボタンだけである。