Corredor

ウェブ、プログラミングの勉強メモ。

URL に付く「#!」って何だったの? ~ Hashbang の復習 ~

Twitter の URL とかで「#!」っていうのが付くのをよく見かけてたけど、最近気が付いたらこういう URL じゃなくなってた。そこで、「#!」コレって何だったの?を調べてみた。


#!」は Hashbang (ハッシュバング)、略して Shebang と呼ぶらしい。Hash # に Bang ! ってことみたい。

言われるまで気付かなかったけど、これって要は URL に付けるハッシュ。古くは <a name="hoge">、最近なら <div id="hoge"> みたいに HTML 中に定義した ID の場所に、something.html#hoge と飛べる、あのハッシュだ。あのハッシュの直後に ! を付けて、Ajax で操作しましょう、ということみたい。

別に Ajax でアレコレするなら ! は要らないんだけど、JavaScript で制御されるページを Google Bot がうまくクロールできないから、ということで、Google が特別措置で Hashbang #! という仕様を作ったらしい。

BotによるJavaScriptナビゲーションを諦めたグーグルのエンジニアは渋々「#!の後をクエリストリングとして渡すからそれに相当するコンテンツを返せ」というspecを公開した。
これを#!に対するGoogleの奨励と勘違いしたデベロッパーたちは#!URLを「唯一の真実の道」として歩み始める

そう、これは苦肉の策で始まった仕様であった。


で、じゃあ最近なくなったのはなんで?というと、HTML5 の pushState という機能ができたので、これに移行したみたい。

Hashbang を利用したURLは現在では「あまり使うべきではない」と言われています。
また HTML5 で pushState という機能が採用され Hashbang を使わずともブラウザヒストリを記録しつつクライアントサイドで画面を書き換えることができるようになりました。


pushState って何?というと、ブラウザの履歴を操作できる History API の一つで、今まではハッシュ (Hashbang) を書き換えることで各サイトが JavaScript を使って擬似的にそれを管理していたものが、標準 API でできるようになった、ということらしい。

というわけで、いつの間にか時代遅れな技術になっていた Hashbang ちゃんでした。