2016-10-29

デベロッパーツールで見かけた&#65279の正体

はじめに

ある日、Chromeのデベロッパーツールでソースコードを眺めていたところ、謎の文字列がソースに紛れ込んでいるのを発見しました。それが#&65279という文字列です。こんな文字入れてないよなあと思いつつ、HTMLファイルを確認してみると、やっぱり文字列が書かれているはずの場所には何も記載されていない。おかしいと思いつつテキストエディタ(Atom)で開いたHTMLファイル上でカーソルを行き来させていたら、おかしな点に気が付きました。

おかしな点

それは、カーソルを移動させても動かない部分がある、という点です。右に1つカーソルをずらしたはずなのに、カーソルは動いておらず、もう一度右に入力をいれるとカーソルが動きました。そしてその、カーソルが動かなかった部分がまさに、謎の文字列#&65279がデベロッパーツール上で記載されていることになっている箇所でした。

もしやと思ってカーソルの動かなかった部分の手前でdeleteキーを押して、謎の空間を削除して更新してみると、デベロッパーツール上でも#&65279が表示されなくなりました。

#&65279の正体と原因

とりあえず文字列が消えたのは良いのですが、気になったのはその正体。調べてみると、どうやらBOMと呼ばれるプログラムがテキストのエンコード形式を区別するための小さなデータだったようです。HTMLやPHPのファイルはUTF-8で保存しますが、UTF-8にはBOMありとBOMなしの2種類があるようで、BOMありで保存してしまうとこの文字列が付与されるのでしょう。

しかし、BOMありで保存した記憶はないので、なんでだろうと思ってもう少し調べてみたら、どうやらWindows標準のテキストエディタであるメモ帳でデータを保存するとBOMが付いてしまうらしく、何かの拍子にメモ帳でファイルを開いてしまったせいでBOMが紛れ込んだのかもしれません。

さいごに

BOMはテキストの先頭に付与されるモノなので、サイトのマージンを0にしてるのに空間が開いてしまう、等に心当たりがある方は、一度BOMの確認をしてみると良いかもしれません。また、先頭だけにあるとも限らないので、心配な方は、デベロッパーツールの検索機能を利用して探してみてはいかがでしょうか。



コメントする(※は必須項目です)













画像認証