DOMと仮想DOMに関する備忘

はじめに

Reactを学び始めたときにDOMと仮想DOMについて学んだので備忘として記事にした。

目次

1. DOMとは
2. 仮想DOMとは
3. 仮想DOMを使うメリット
4. 仮想DOMが動作する仕組み

DOMとは

• Document Object Modelの略称
• ウェブページやXML文書を表現するためのプログラミングインターフェースです
• HTMLやXMLの要素や属性、テキストなどの情報をオブジェクトとして扱い、それらのオブジェクトを操作することができる

仮想DOMとは

• ウェブアプリケーションのパフォーマンスを向上させるために使用されるコンセプトで、実際のDOMと同じ構造を持つJavaScriptオブジェクトのツリー
• 仮想DOMは、DOMの変更を効率的に行うために、変更前のDOMの状態を仮想DOMとして保持し、変更後のDOMとの差分を計算します。そして、差分のみを実際のDOMに反映させることで、DOMの更新を最小限に抑えることができ、パフォーマンスを保てる
• 仮想DOMは、ReactなどのJavaScriptライブラリやフレームワークで広く使用されています。これにより、ウェブアプリケーションのパフォーマンスが向上し、スムーズなユーザーエクスペリエンスが提供される

仮想DOMを使うメリット

1. パフォーマンスの向上
   • 仮想DOMは、変更が必要な部分のみを特定し、実際のDOMに反映するため、ブラウザが再描画を行う回数を減らせる
2. 開発の容易化
   • 仮想DOMは、コンポーネントベースのアーキテクチャと相性が良く、再利用性や保守性を高めることができる
3. クロスプラットフォーム対応
   • 仮想DOMは、プラットフォームに依存しないJavaScriptのオブジェクトとして表現されるため、クロスプラットフォーム対応が容易。同じコードを使用して、Web、モバイル、デスクトップなど、さまざまなプラットフォームで動作するアプリケーションを開発することが可能
4. デバッグの容易
   • 仮想DOMは、変更がある部分のみを特定するため、デバッグが容易になる

動作する仕組み

1. 初期の仮想DOMの作成

   • 最初に、実際のDOMと同じ階層構造を持つ仮想DOMが作成される

2. コンポーネントの状態の変更

   • コンポーネントの状態が変更されると、仮想DOMの対応する部分も更新される。この時点では、まだ実際のDOMには変更は反映されない

3. 仮想DOMの差分比較

   • 変更があった部分のみを特定するために、仮想DOMと前回の仮想DOMを比較

4. 変更の反映

   • 差分比較によって特定された変更が、実際のDOMに反映される

5. 再構築の最適化

   • 仮想DOMの再構築は、必要な部分のみが行われるため、効率的に行われる。また、複数の変更がある場合には、それらをまとめて一度に反映される