仮想DOM学習のまとめ

なぜ仮想DOMなのか？

vueの学習を始めた初日、V-NODEや仮想DOMの話に出くわしたのですが、その話がすごい面白くて、詳しく調べてみたので、今回まとめを記載することにしました。

私はDOMについての知識もいい加減だったので、いい機会なのでそちらについても調べて、忘れないようにまとめてみようと思います。

あくまで初心者なのでざっくりまとめています。間違いがあれば教えていただきたいです。

DOMってなに？

簡潔に説明すると、

ブラウザで受け取ったHTMLを操作するためのオブジェクト（的な物）。

なぜ（的な物）とつけたかというと、DOMは色々な機能や規則が詰まっている集合体のため、一概にどんな物と言えないようです。そのため今回は便宜上オブジェクト（的な物）として例えました。

また、DOM（Document Object Modelの略）の略称で、Documentオブジェクトを通して、Webブラウザの操作や情報取得ができます。

Documentオブジェクトとは？

Documentオブジェクトとは、 Windowオブジェクト内にあるオブジェクトの一つ。

 ・Windowオブジェクト：ブラウザの全ての情報を保持しているオブジェクトで、ブラウザそのもの。

・Documentオブジェクト：Windowオブジェクト内に存在し、受け取った現ブラウザのHTML情報の保持を担当している。現在開いているWEBページの情報そのもの。

このDocumentオブジェクトは検証で確認すると、ツリー構造という家系図のような構造になっており、DOMツリーと呼ばれます。

DOMの動き（WEBページを開いた時）

HTMLとJavaScriptのソースコードを書き、WEBページで開くと以下のような挙動をします。

1、ブラウザ（Chromeやfirefoxなど）がHTMLを読み込む

2、HTMLを元にDOMツリーを構築

3、ブラウザがJSを読み込み、nodeのメソッドやプロパティからDOMを操作

４、Documentオブジェクト内のDOMツリーを構築

５、変更されたHTMLをブラウザが読み込む

６、ブラウザに反映

この挙動は全てブラウザ内で行われます。これが、この先に説明する仮想DOMが存在する理由になってきます。

nodeとは？

nodeとは、DOMツリー（Documentオブジェクト）を構成する各オブジェクトたちです。長くなるので詳しくは書きませんが、家系図みたいな構造でWEB情報を表現しています。

このオブジェクトたちのプロパティやメソッドを通して、 JavaScriptはWEBページ内の情報を取得・保存・操作を行います。

じゃあ、仮想DOMって何なのか？

仮想DOMはその名の通り、仮想のDOMです。

詳しく説明すると、WEBページを開くとき、Vueは内部に仮想DOMを構築してからブラウザにアクセスします。その内部に構築したDOMのことを仮想DOMと呼びます。

なぜ仮想DOMが必要なのか？

結論から書くと、仮想DOMを使うと処理や負荷が減るためです。

先ほどの通常のDOMの動きだと、JavaScriptで変更がある度にDOMはHTMLを読み込んで何度も一から再構築されます。その動きのコストを減らす仕組みが仮想DOMです。

負荷を減らす、仮装DOMの動き

以下は、JavaScriptに変更を加えて、WEBブラウザを更新するときの仮装DOMの動きです。

1、仮装DOMを二つ構築

2、1の一つをJavascriptで変更を加えて再構築

3、2と変更していない本物のDOMコピーとの差分を出す

4、差分のみ本物のDOMへ渡す

このように差分のみ渡すので、本物のDOMを用いて一からDOMを構築する動作するときよりも、負荷を小さくする事が可能になります。

まとめ

簡単に今回の流れをまとめると、

DOMはDocumentオブジェクトのことで、Documentオブジェクトは一つ一つのnodeによって家系図のような構造で構築されている。

そのnodeを通してJSはHTMLの操作や情報取得をしている。

仮想DOMはVue内でコピーDOM内で操作を行い、真DOMとの差分だけをブラウザに渡すので、負荷の少ない仕組みを可能にしている。

最後に

DOMについてかなり調べたので理解した気になっていたのですが、いざ説明しようとすると難しかったです。特にDOMのことを何と表現したらいいのかかなり悩みました。

これからvueを扱いながらもっと深く理解して、知識をブラッシュアップしていけたらいいなと思います。