流暢なReact

第3章 仮想DOM 仮想DOM

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

この章では、仮想DOM （vDOMと呼ばれることもある）の概念と、Reactにおけるその意義について深く掘り下げていく。また、Reactが仮想DOMをどのように利用し、ウェブ開発をより簡単かつ効率的にするのかについても探っていく。

ウェブ・アプリケーションが複雑になるにつれて、「本物のDOM」を管理するのはますます難しくなってくる。Reactの仮想DOMは、この問題に対する解決策を提供する。

この章では、Reactの仮想DOMの仕組み、実DOMに対する利点、実装方法について説明する。また、Reactが仮想DOMを使って実DOMのパフォーマンスを最適化する方法と、それがどのように組み合わされるのかについても説明する。

一連のコード例と詳細な説明を通して、Reactにおける仮想DOMの役割と、堅牢性と効率性に優れたWebアプリケーションを作成するためにその利点を活用する方法を理解する。さっそく始めよう！

バーチャルDOM入門

仮想DOMは、DOMと同様、JavaScriptオブジェクトとしてモデル化されたHTML文書である。これは文字通り、DOM（Document Object Model）の意味するところである。DOMそのものが、ブラウザ・ランタイムのドキュメント・モデルである。バーチャルDOMはこれを軽量にコピーしたもので、実際のDOMがNode オブジェクト で構成されているのに対し、バーチャルDOMはプレーンなJS オブジェクトで構成され、記述として機能するという違いがある。この章で説明するように、Web開発者はより効率的でパフォーマンスの高い方法でユーザインタフェースを作成することができる。

Reactでは、setState やその他のメカニズムによってUIに変更を加えるよう指示すると、まず仮想DOMが更新され、次に仮想DOMの変更に合わせて実DOMが更新される。このプロセスはリコンシリエーションと呼ばれ、第4章の主題となる。

仮想DOMを最初に更新する理由は、実DOMの更新にやや時間がかかり、コストがかかるからだ 。これについては次のセクションで説明するが、要するに、実DOMに変更が加えられるたびに、ブラウザはページのレイアウトを再計算したり、画面を再描画したり、時間のかかるその他の演算子を実行しなければならないのだ。

例えば、 要素のoffsetWidth を読み取るだけで、ブラウザがドキュメントの全部または一部のレイアウトを再計算する処理であるリフローを引き起こす可能性があり、パフォーマンスに影響を与えたり、DOMとの直接的なインタラクションの効率が悪くなる可能性がある：

const btn = document.getElementById("myButton");
const width = btn.offsetWidth; // This can trigger a reflow

一方、仮想DOMの更新は、実際のページレイアウトの変更を伴わないため、はるかに高速だ。その代わりに、ブラウザや他のホスト環境から切り離され、利用可能なJavaScriptエンジンを最大限に活用し、時間とともにその効率を高めることができる様々なアルゴリズム的アプローチによって、迅速かつ効率的に操作することができるシンプルなJavaScriptオブジェクトである。

仮想DOM に更新が加えられると、Reactは差分アルゴリズム ...