⏳

100秒で理解する仮想DOM

2024/03/17に公開

そもそもDOMとは？

仮想DOMについて知るためには、まずDOMについて知っておく必要があります。

以下の動画で、DOMについて100秒で解説しているので、そもそもDOMをよく知らないなぁという人はぜひ確認してみてください！

では、本題です。

仮想DOMとは、UIの "仮想" 的な表現をメモリー上に保持して、実際のDOMと同期させるというプログラミング上の概念のことです。

仮想 DOM (virtual DOM; VDOM) は、インメモリに保持された想像上のまたは「仮想の」UI 表現が、ReactDOM のようなライブラリによって「実際の」DOM と同期されるというプログラミング上の概念です
reactjs

...と言っても、これだけだとちょっと難しいですよね。

なので、仮想DOMについて解説する前に、まずはDOM操作とレンダリングの関係について先に解説します。

DOM操作とレンダリングは、密接に関係しています。例えば、以下のJavaScriptコードを見てみましょう。

document.getElementById("foo").innerHTML = "Hi"

たった1行だけのコードですが、実はこのコードを実行するためには、ブラウザは以下のように沢山のステップを踏む必要があります。

そのため、複雑なDOM操作を行ったり、DOMのノードを頻繁に更新したりすると、レンダリングに時間がかかってしまうことがあります。

そこで、この問題を解決するために「仮想DOM」が生まれました。

では、具体的に仮想DOMとは何でしょうか。仮想DOMと聞くと、なんとなく難しそうな単語に聞こえますが、単なる「DOMのコピー」と考えれば分かりやすいです。

例えば、Reactでは次のような流れになります。

このように、仮想DOMの仕組みは、差分がある部分だけを更新することで、最小限のDOM操作に抑え、レンダリングにかかる時間を短くすることができます。

この記事の内容を動画でも解説しています。
仮想DOMについて手軽に学びたい人は、是非見てみてください。