仮想DOMはなぜライブラリ/FWに使われるのか [30seconds of interviews]

JavaScript

仮想DOMとは

仮想DOM(virtual DOM)は、DOMをJavaScriptオブジェクトの形式で表現したもの。

これらのオブジェクトには、ノード名/属性/子ノードなど、実際に表示されるDOMノードを記述するプロパティがある。

<div class="counter">
  <h1>0</h1>
  <button>-</button>
  <button>+</button>
</div>

上記マークアップの仮想DOMは、次のようになる。

{
  nodeName: "div",
  attributes: { class: "counter" },
  children: [
    {
      nodeName: "h1",
      attributes: {},
      children: [0]
    },
    {
      nodeName: "button",
      attributes: {},
      children: ["-"]
    },
    {
      nodeName: "button",
      attributes: {},
      children: ["+"]
    }
  ]
}

仮想DOMを使う理由

ライブラリやフレームワークは仮想DOMをパフォーマンス向上の手段として使っている。

アプリケーションの状態が変わる時、更新を反映するためにDOMの再構築を行う必要があるが、これにはコストがかかる。

仮想DOMを使うことで、状態が変更されたときに古い仮想DOMと新しい仮想DOMの差分を比較し、その差分だけを実際のDOMに反映させることができる。 そのため、仮想DOMを使うことで一般的にはDOM変更の際のコストを小さくし、その結果表示速度を向上させることができる。

30secondsofinterviews.org