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

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

• 参考 : さらなる「#!」URL批判 - karasuyamatenguの日記
• 参考 : AngularJS の $locationProvider.html5Mode について - Qiita

「#!」は Hashbang (ハッシュバング)、略して Shebang (シバン・シェバン) と呼ぶらしい。Hash # に Bang ! ってことみたい。シェルスクリプトや CGI を書く時に、ファイルの行頭に #!/bin/bash なんて書いたりするけど、コレも同じく「シバン」と呼ばれている。

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

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

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

• 参考 : さらなる「#!」URL批判 - karasuyamatenguの日記

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

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

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

• 参考 : AngularJS の $locationProvider.html5Mode について - Qiita

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

• 参考 : pushStateでブラウザの履歴を追加する ｜ Tips Note by TAM
• 参考 : 【HTML5】HISTORY API「pushState/popState」を使って画面遷移しなくてもURLを変化させて、戻るボタンの挙動をカスタマイズする | unitopi - ユニトピ -

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