📝

Reactエンジニア1年生がDOM、仮想DOMについてまとめる

2022/02/09に公開

JavaScript

最近、PJでReactを本格的に使い始めたことで、
「Reactってどういう仕組みで動いている？」と疑問に感じました。

その中で、"仮想DOM"というものがあるらしく、
それが何の役割を持っているのか全くわからなかったので、調べました。

簡単ですが、疑問に思ったことを調べてまとめたものを記事にします。

この記事を読んでほしい人

React、VueなどのモダンJavaScriptを触っている若手エンジニア
特にJavaScriptをがっつり勉強してこなかった人
今までバックエンド主体だったが、フロントエンドも最近触るようになった人

DOMとは？

Document Object Model
JavaScriptでHTMLの要素を操作するための仕組みのこと
各要素を「ノード」という言葉で説明される
- HTMLでいう「エレメント」や「タグ」のこと
HTML文書をツリー構造として扱う。
- このツリー構造をDOMツリーという。
Chrome Dev toolにて確認ができる。

仮想DOMとは？

バーチャルなDOMのこと。
ReactやVueなどのモダンJavaScriptで用いられている。

仮想DOMの役割は？

HTMLのDOMツリーを常に監視して、修正や変更をリアルタイムに反映することを可能にする。

なぜリアルDOMではなく、仮想DOMなのか？

JSで構築されるリアルDOMの場合と仮想DOMの場合で比較すると、仮想DOMのほうがメリットが大きい。

リアルDOMの場合

状態を常にチェックすることはできない。
レンダリングコストに問題が生じやすい。
ソースコードが肥大化すると、どこでなにをしているのか分かりづらい。
そういう処理が必要な場合は自分で書かないといけない。

生のJSの場合

// id=testを持つ要素の配下にHello World!!
var textElement = document.createElement("p");
textElement.textContent = "Hello World!!";
document.getElementById("test").appendChild(textElement);

jQueryの場合

// id=testを持つ要素の配下にHello World!!
var textElement = $("<p>").text("Hello World!!");
$("test").append(text)

仮想DOMの場合

状態を常にチェックしている。
リアルDOMとの差分を比較して、変更箇所のみをリアルDOMに反映するため、DOMへの操作を最小限に抑えることができる。

Reactエンジニア1年生がDOM、仮想DOMについてまとめる

この記事を読んでほしい人

DOMとは？

仮想DOMとは？

仮想DOMの役割は？

なぜリアルDOMではなく、仮想DOMなのか？

リアルDOMの場合

仮想DOMの場合

参考文献

Discussion