はじめに
こんにちは、エンジニアを目指す大学院生です。
今回は知っているようであまり知らないDOMとReactで用いられる仮想DOMについてまとめます。
DOM(Document Object Model)とは
DOMとは、HTMLなどのマークアップ言語とCSSを、JavaScriptなどのプログラミング言語からアクセスできるようにするためのAPIである。(プログラミング言語ではない!)
DOMは、HTMLの各要素をオブジェクトとして表現する。そのため、JavaScriptだけでなく、RubyやPythonなどの他の言語からも操作できる。
また、DOMはオブジェクトをツリー構造として表現している。ドキュメントを構成する各要素(オブジェクト)をノードと言う。
<html>
<head>
<title>タイトル</title>
</head>
<body>
<h1>DOMとは</h1>
<p id="description">DOMはツリー構造</p>
</body>
</html>
このHTMLは、ツリー構造では以下のように表される。
Document
└── html
├── head
│ └── title
│ └── "タイトル"
└── body
├── h1
│ └── "DOMとは"
└── p-"description"
└── "DOMはツリー構造"
各オブジェクトはメソッドやプロパティを持っていて、それらを利用することでDOMを操作できる。
仮想DOMとは
DOMとは別物で、メモリ上に仮想的に作成されるDOMである。仮想DOMとDOMの差分を検知して、差分のみを更新して描画することでパフォーマンスを向上させることができる。仮想DOMを用いた場合は変更箇所が少しであっても、全て再描画されてしまう。
仮想DOMを用いた更新の手順
- 変更前の仮想DOM1を作成
- 変更後の仮想DOM2を作成
- 仮想DOM1と仮想DOM2の差分を計算
- 差分があった部分だけをDOMに反映させて更新
差分がある部分だけを更新することで、最小限のDOM操作に抑え、レンダリングにかかる時間を短くすることができる。
参考文献