DOMってなに？仮想DOMってなに？

モダンJavaScriptの理解にはこの「DOM」の理解が必須だとか。
そこで今回はDOMについて学んでいきたいと思います。

DOM（Document Object Model）と仮想DOM

1. DOM（Document Object Model）とは

DOMは、HTMLやXMLドキュメントをプログラムから操作するためのインターフェースです。

主な特徴

• ウェブページの構造を木構造で表現
• JavaScriptを使って動的に操作可能
• ブラウザが直接解釈して画面に表示

具体例

<div id="app">
  <h1>こんにちは</h1>
  <p>これはDOMの例です</p>
</div>

このHTMLは、DOMツリーとして以下のように表現されます

document
└── div#app
    ├── h1
    │   └── "こんにちは"
    └── p
        └── "これはDOMの例です"

2. 仮想DOM（Virtual DOM）とは

仮想DOMは、実際のDOMの軽量なコピーをメモリ上に保持し、変更を効率的に行うための技術です。

主な特徴

• メモリ上にDOMの複製を作成
• 変更を仮想DOM上で先に適用
• 実際のDOMとの差分のみを更新

仮想DOMの利点

1. パフォーマンスの向上
2. クロスプラットフォーム対応
3. 開発効率の向上

具体例（React使用時）

function App() {
  return (
    <div>
      <h1>こんにちは</h1>
      <p>これは仮想DOMの例です</p>
    </div>
  );
}

このコードは、仮想DOM上で変更が行われ、最終的に実際のDOMに反映されます。

仮想DOMのプロセス

1. 初期レンダリング

   • アプリケーションが最初にロードされるとき、Reactなどのフレームワークはコンポーネントから仮想DOMを生成し、それを使って実際のDOMを構築します。

2. 状態の更新

   • アプリケーションの状態が変更されると、新しい仮想DOMが生成されます。

3. 差分計算（Diffing）

   • 古い仮想DOMと新しい仮想DOMを比較し、変更があった部分（差分）を特定します。

4. 効率的な更新

   • 差分のみを取り出し、それを使って実際のDOMを更新します。これにより、必要最小限のDOM操作で済み、パフォーマンスが向上します。

図解

[コンポーネント] → [仮想DOMの生成] → [実際のDOMへの反映]
       ↓
[状態変更]
       ↓
[新しい仮想DOMの生成]
       ↓
[古い仮想DOMとの比較]
       ↓
[差分の特定]
       ↓
[実際のDOMの効率的な更新]

具体例

例えば、以下のようなコンポーネントがあるとします。

function Counter({ count }) {
  return (
    <div>
      <h1>カウント: {count}</h1>
      <button>増加</button>
    </div>
  );
}

1. 初期状態

   • countが0のときの仮想DOMが生成され、実際のDOMに反映されます。

2. ボタンクリックによる状態更新

   • countが1に更新されると、新しい仮想DOMが生成されます。

3. 差分の計算

   • 古い仮想DOMと新しい仮想DOMを比較し、<h1>タグ内のテキストが0から1に変わったことが特定されます。

4. DOMの更新

   • 実際のDOMでは、<h1>タグ内のテキストだけが"カウント: 1"に更新されます。

このプロセスにより、全体の再描画を避けて効率的にDOM更新が行われ、パフォーマンスが向上します。

まとめ

• DOMは、ウェブページの構造を表現し、直接操作できるインターフェース
• 仮想DOMは、DOMの軽量なコピーを使用して効率的に更新を行う技術
• 仮想DOMは、大規模なアプリケーションでのパフォーマンス向上に有効
• ReactやVue.jsなどの現代的なフレームワークは仮想DOMを採用している

これらの概念を理解することで、より効率的なウェブアプリケーション開発が可能になります。