🤖

サルでもわかるDOMと仮想DOM(自分用)

2023/02/12に公開

JavaScript

はじめに

こんにちは、現在カナダで大学生をしています(@billy_orz)です。
重たい文章を読むのが苦手なのでぃ分用にノリで理解できるような説明をしていきます。
間違った場所もあるかもなので指摘していただけると幸いです。

エヴァで理解するDOM

それではDOMとは何んたるかを説明した文章を読んでみよう。

ドキュメントオブジェクトモデル (DOM)はウェブ文書のためのプログラミングインターフェイスです。ページを表現するため、プログラムが文書構造、スタイル、内容を変更することができます。
DOM は文書をノードとオブジェクトで表現します。そうやって、プログラミング言語をページに接続することができます。
[MDN web docs - DOMの紹介より引用

なるほど分からん。恐らくエンジニアが読めば一発で理解できるだろうがただの大学生にはさっぱりだ。
しかしこう考えると読むのも辛くなるドキュメントが理解しやすくなる

「HTMLとかJavascriptとか色々あってめんどくさいし、ひとまとめにして操作しやすい構造にしようぜ！そいつの名前はDOMだ！」

つまりDOMとはWebページを簡単に弄くり回せるような形って事だ。
ここで勘違いされるのが「HTMLファイル＝DOM」
違う、ミサトさんとNERVくらい違う。
DOMはHTML/CSS/JavaScriptなどで構成されている。
ミサトさん一人だと使徒に立ち向かえないのと同じように、HTMLだけだとしょっぱいページくらいしか作れない。Webページにはゲンドウ(CSS)もフユツキ(Javascript)も必要、そして彼らで運営されるのがNERV(DOM)なのだ...

仮想DOMとは？

DOM ツリー

それを理解するにはDOM ツリーという概念を理解する必要がある。
DOM ツリーをツリー状にしたもの。そのまんまだ。
例えばこんな感じのHTML文を見たことがあるであろう...

<document>
<html>
<head>
<title>
aaa
</title>
</<head>>
<body>
<h1>
bbb
</h1>
</body>

これがDOMだ。そしてこれをツリー状にしたものが

新人フロントエンドエンジニアが仮想 DOM について色々調べてみたより引用

この構造をツリー構造と呼び、にツリーの要素ひとつひとつを ノード と呼ぶ。

じゃあこのツリーで何が出来るのか。
例えばDOMツリーの最上階は「document」で、documentとはHTML全体を表している事が分かる。すなわちどんな場所にもアクセス可能な神だ。
たまにdocument.getelementbyid("id-desu")とか見たことあるだろう。これはdocument内からid-desuの属性を持つelement(要素)を見つけろという意味だ。
そしてbody.getelementbyid("id-desu")とするとbody内からid-desuと呼ばれるelement(要素)を見つけろという意味になる。このときhead内の要素は調べないのでbody内にアクセスしたい要素があることを知っている場合、documentを使うのに比べて効率アップする。

このようにツリー構造は要素へのアクセスを手助けしてくれる。

なぜ仮想 DOMが必要なのか

例えばボタンをクリックするとtitleに「こんにちは」と出てくるWebページがあるとする。
あなたはボタンをクリックした際、DOMがtitleノードの部分だけを更新してくれると考えているはずだ。
しかしそれは違う。
なんとDOMはレンダリング、つまりWebのどんな小さな内容でも変更されたとき、それを反映するためにわざわざDOM ツリーをすべて(documentからTextまで)再構築するのだ。
これは正直効率が悪すぎる。

これを防ぐために生まれたのか仮想 DOM、必要最低限の情報を持ったぺらっぺらのツリーだ。
混乱を防ぐため、ぺらぺらじゃない方をリアルDOMと呼ぶ。
リアルDOMが変更された時２つの仮想DOMが作られる、変更前と変更後だ
仮想DOMはこの2つのツリーを比べて変更箇所をみつける。そして変更差分だけリアルDOMに反映するので、変更が最小限に抑えられるという仕組みだ。

例の場合titleから下のノードが変更されることになる。documentやheadを変更しない分処理が早い。

まとめ

DOMとはWebページを簡単に弄くり回せるような形。
仮想DOMとはDOMの変化を効率的に行うために必要なぺらっぺらなDOM