仮想 DOM を最初から設計する: ステップバイステップ ガイド

React や Vue などのフロントエンド ライブラリについて聞いたことがある場合は、仮想 DOM という用語に遭遇したことがあるかもしれません。仮想 DOM は、DOM の更新をより効率的に行うことで Web 開発のスピードアップに役立つ賢い概念です。

このガイドでは、一般的なコードのような手順を使用して、シンプルな仮想 DOM を最初から実装する方法を詳しく説明します。

仮想DOMとは何ですか?

仮想 DOM は、実際の DOM (Web ページの構造) の軽量のメモリ内表現にすぎません。実際の DOM を直接更新する (これには時間がかかります) 代わりに、最初に仮想 DOM に変更を加え、何が変更されたかを把握してから、更新する必要がある実際の DOM の部分のみを更新します。これにより時間を節約し、アプリを高速化します!

---

ステップ 1: 仮想 DOM をツリーとして表現する

Web ページの構造をツリーとして想像してください。各要素 (

、

、

など) はツリー内の「ノード」です。 仮想 DOM ノード は、これらの要素の 1 つを表す小さなオブジェクトです。

これが例です:

Virtual DOM Node:
{
  type: 'div',
  props: { id: 'container' },  // attributes like id, class, etc.
  children: [                 // children inside this element
    {
      type: 'p',              // a <p> tag (paragraph)
      props: {},
      children: ['Hello, world!']  // text inside the </p><p> tag
    }
  ]
}
</p>

これは

について説明します。 id="container" の要素。これには

が含まれます。 「Hello, world!」.

というテキストを含む要素

重要なポイント:

• 各ノードにはタイプがあります (例: div、p)。
• 小道具 (ID、クラスなど) を含めることができます。
• 他の要素またはテキストである可能性のある子もあります。

---

ステップ 2: 仮想 DOM を実際の DOM にレンダリングする

仮想 DOM を作成したので、それをページ上の実際の HTML に変換する方法が必要です。

仮想 DOM ノードを受け取り、それを実際の HTML 要素に変換する render という関数を書いてみましょう。

function render(vNode) {
  // 1. Create a real element based on the Virtual DOM type (e.g., div, p).
  const element = document.createElement(vNode.type);

  // 2. Apply any attributes (props) like id, class, etc.
  for (const [key, value] of Object.entries(vNode.props)) {
    element.setAttribute(key, value);
  }

  // 3. Process the children of this Virtual DOM node.
  vNode.children.forEach(child => {
    if (typeof child === 'string') {
      // If the child is just text, create a text node.
      element.appendChild(document.createTextNode(child));
    } else {
      // If the child is another Virtual DOM node, recursively render it.
      element.appendChild(render(child));
    }
  });

  return element;  // Return the real DOM element.
}

ここで何が起こるのでしょうか？

• 要素 (document.createElement(vNode.type)) を作成します。
• 任意の属性 (ID、クラスなど) を追加します。
• テキストを追加するか、各子要素で render を再度呼び出すことによって、子 (テキストまたはその他の要素) を処理します。

---

ステップ 3: 新旧の仮想 DOM を比較 (差分)

Web アプリで何かが変更されると (テキストや要素のスタイルなど)、新しい仮想 DOM が作成されます。ただし、実際の DOM を更新する前に、古い仮想 DOM と 新しい仮想 DOM を比較して、何が変更されたかを把握する必要があります。これは「差分」と呼ばれます。

2 つの仮想 DOM を比較する関数を作成しましょう:

Virtual DOM Node:
{
  type: 'div',
  props: { id: 'container' },  // attributes like id, class, etc.
  children: [                 // children inside this element
    {
      type: 'p',              // a <p> tag (paragraph)
      props: {},
      children: ['Hello, world!']  // text inside the </p><p> tag
    }
  ]
}
</p>

差分の仕組み:

• ノード タイプの変更: 要素のタイプが変更された場合 (
  を

  に変更するなど)、置換対象としてマークします。

• テキストの変更: 内部のテキストが変更された場合は、テキストを更新します。
• 属性と子: 要素の属性 (小道具) または子が変更されているかどうかを確認します。

---

ステップ 4: 実際の DOM にパッチを適用する

何が変更されたのかがわかったら、それらの変更を実際の DOM に適用する必要があります。このプロセスをパッチ適用と呼びます。

パッチ機能は次のようになります:


function render(vNode) {
  // 1. Create a real element based on the Virtual DOM type (e.g., div, p).
  const element = document.createElement(vNode.type);

  // 2. Apply any attributes (props) like id, class, etc.
  for (const [key, value] of Object.entries(vNode.props)) {
    element.setAttribute(key, value);
  }

  // 3. Process the children of this Virtual DOM node.
  vNode.children.forEach(child => {
    if (typeof child === 'string') {
      // If the child is just text, create a text node.
      element.appendChild(document.createTextNode(child));
    } else {
      // If the child is another Virtual DOM node, recursively render it.
      element.appendChild(render(child));
    }
  });

  return element;  // Return the real DOM element.
}

キー操作:

• REPLACE: ある要素を別の要素で完全に置き換えます。
• TEXT: 要素内のテキストを更新します。
• 更新: 変更に基づいて属性と子を更新します。

---

仮想 DOM プロセスの概要:

1. 仮想 DOM ツリー: Web ページ上の要素とその階層を表すツリーのような構造を作成します。
2. リアル DOM へのレンダリング: この仮想 DOM は実際の HTML 要素に変換され、ページに配置されます。
3. 差分アルゴリズム: 何かが変更されると、古い仮想 DOM と新しい仮想 DOM を比較して違いを見つけます。
4. 実際の DOM にパッチを適用します: 可能な限り最も効率的な方法で、これらの変更を実際の DOM に適用します。

---

最終的な考え

仮想 DOM は、実際の DOM への不必要な変更を減らすことで、ユーザー インターフェイスの更新を高速化する強力なツールです。仮想 DOM を実装することで、Web アプリが要素を更新およびレンダリングする方法を最適化し、より高速でスムーズなユーザー エクスペリエンスを実現できます。

これは Virtual DOM 概念の基本的な実装ですが、React などのフレームワークがそれをどのように利用するかを理解するための基礎ができました!