コミュ障だから明日が僕らをよんだって返事もろくにしなかった

何かを創る人に憧れたからブログをはじめたんだと思うよ

隙あらばBOM語り

BOM語りしちゃうぞ

説明しようBOMとは……

バイトオーダーマーク (英: byte order mark) あるいはバイト順マーク(バイトじゅんマーク)は通称BOM(ボム)といわれる、Unicodeの符号化形式で符号化したテキストの先頭につける数バイトのデータのことである。このデータを元にUnicodeで符号化されていることおよび符号化の種類の判別に使用する。

のことだ!またひとつ賢くなってしまったな!


おわり

BOM語りしちゃうぞ Take2

はい、おはようございます。僕です。

ということで、BOMって言ったら上のことだろうって66%ぐらいの人が納得していただけると思うのですが今日はそっちのBOMではなくてこっちのBOM(Browser Object Model)の話をしようと思ったのです。

【BOM】
ブラウザのオブジェクトモデル(BOM)は、ブラウザ固有である慣例によって公開されたすべてのオブジェクトを参照するWebブラウザDocument Object Modelとは異なり、実装の標準や厳密な定義はないため、ブラウザベンダは自由にBOMを実装することができます。

私たちが文書を表示するウィンドウとして見るもの、ブラウザプログラムはオブジェクトの階層的な集合として見ます。ブラウザはドキュメントを解析するときに、ドキュメントを定義し、表示方法を詳細に示すオブジェクトのコレクションを作成します。ブラウザが作成するオブジェクトはDocumentオブジェクトと呼ばれます。それはブラウザが利用するオブジェクトのより大きなコレクションの一部です。このブラウザオブジェクトの集まりは、まとめて「ブラウザオブジェクトモデル」、つまりBOMと呼ばれます。

これです。JavaScriptをいじっているときにあらわれる謎のおまじないwindow.alert()とかdocument.getElementByid()とかのwindowとかdocumentについてです。


f:id:andron:20190512150748p:plain
ブラウザでは上のような階層構造でアプリケーションを利用するための "やりとり" を定めています。例えば、window.document.なんちゃらだったらwindowオブジェクトのdocumentオブジェクトのなんちゃらって命令にアクセスしますよってなことをやってますん。んで、このwindowは省略してdocument.なんちゃらってかけたりします。これは、documentだけでなく他のオブジェクトに対しても言えるのでscreenだったりlocationでも省略できます。あとwindow.alert()みたいなやつもalert()って感じで省略できちゃいます。そういう感じでJavaScriptでつかえる"やりとり"が定義されているそうです。
ですので、今日は上の図のBOMってなにがあるのかなどを意味もなく見ながらBOM語りでもしたいと思ったのです。ちなみにdocumentに関しての話はみんな大好きDOM(Document Object Model)なんて呼ばれていたりします。その配下HTMLのパーツに対してできるやりとりがいっぱいあるぞ。


ということでどんな機能があるのか見ていきたいと思います。「Window」と「Document」に関しては多分よく使うやつだと思うので今回は確認しないです。また僕が隙あらばBOM語りしたくなったらやろうと思うので次回までおあずけだ!

そんなわけでBOMでなにができるか見ていきます。

Navigator

Navigatorをみていきます。ブラウザ情報とかを取得できます。

想定したよりも多かったのと別に表示させても面白みを感じなくて中途半端だけどNavigatorオブジェクトで表示できる要素はこんな感じ。詳細は参考リンク参照な。Vueの使い方へたくそすぎてループすらさせてないゴミコードになってしまった……。ただdata部分眺める分には見やすいと思う。他の部分は見てはいけないし、触れてもいけない。

参考:Navigator
Navigator - Web API | MDN


Location

Locationみていきます。

概ねURL欄の文字列から推測できる要素をいじる系のやつ。コードはそのまま流用しているのでゴミコードのままです。

参考:Location
Location - Web API | MDN


History

Historyオブジェクトは特に表示させて面白いものがない。履歴とかいじれます。でも面白いもの作れなかったから埋め込みはなしです。

参考:History
History - Web API | MDN


Screen

Screenみていきます。

画面情報を取得するやつ。ぶっちゃけると仕様みても "画面" ってのが何を指しているのかわかってなかったりする。ウィンドウの方でもウィンドウサイズ取得系のやつがあるのでさらに違いが分かってなかったりする。まあ、必要になったらちゃんとみます。それまではまあいいかな…。

参考
Screen - Web API | MDN


とりあえず僕の知る限りのBOMに関してはこんな感じです。DOMよりも未整備の魔境なんで知っておく必要があるかは知らないです。