deve.K

エンジニアが未来を切り開く。

React 仮想DOM【Virtual DOM】の仕組み

本日は 仮想DOMとリアルDOMの違いを初学者様に解説致します。

DOMはあらゆるWebサイトの不可欠な部分となっています。

DOMの概念は、フロントエンドプログラミングでは非常に重要となっており、それがどのように機能するかを知ることは、Web開発者にとって非常に重要な事です。

ですが、React開発者にとってはそれだけではありません。

React開発者として、仮想DOMとは何かを知り学ぶ必要があります。

Reactの学習過程で仮想 DOMという用語に出くわすことはほぼ避けられません。

当ブログのこの記事を読むと、Reactの仮想DOMとは何かが正確に分かるかと思います。

まずは前提として通常のDOMを理解しているかになります、軽くおさらいだけしましょう。

DOMは(Document Object Model)の略称で
ドキュメントを操作するためのインターフェース(API)となります。

JavaScriptからHTMLやXMLを自由自在に操作する為の仕組みで、ツリー構造・ノードという言葉で説明されています。

つまり、リアルDOMはネストされたツリーパターンでWebサイトの構造とコンテンツを表します。

リアルDOMの詳しい解説は下記で学べます。

dev-k.hatenablog.com

仮想DOMとは

仮想DOMは、Meta(旧Facebook)によって作成された概念です、プロジェクトはオープンソースであり、Reactチームによって維持されています。

VirtualDOMを直訳すると『仮想DOM』です。

ですので仮想DOMまたはVirtualDOMなど呼び方はさまざまです。

ここでは仮想DOMと呼ばせていただきます。

仮想DOMは、React.jsやVue.jsで管理をするJavaScriptのDOMオブジェクトの事でJSオブジェクトを、仮想でDOMを生成し通常のブラウザのレンダリングとは別の管理でしているのが仮想DOMのDOM概念となっています。

仮想DOMは、DOMの仮想表現に他なりません。

実際のリアルDOMと同様に、仮想DOMもツリー構造として表され、各要素はツリーのノードとなっています。

実際には仮想 DOMはReact によって発明されたものではありません。

他の多くのライブラリやフレームワークは、仮想 DOM アプローチを採用しています。

仮想 DOMの実装のみに焦点を当てたプロジェクトも多数あります。

リアルDOMが遅くなる原因

DOMを扱うということは、常にDOMに対して何かを追加したり削除したりすることを意味します。

DOM内の要素を変更したり、その要素のcssを変更したりします。

従来のリアルDOMはJavaScriptJQueryで何かしらの追加や更新のDOM操作をして、情報を受け取ったらDOM全体を再構築します。

つまり1箇所の更新のみだったとしても、変更した際は必要のない箇所全てを再構築するのでブラウザの再描画までの時間がかなり遅くなります。

通常DOMの画像

つまり必要以上にDOMを更新したがるんです…。

その場合、UIコンポーネントが多ければ、多いほど、DOMの更新ごとに再レンダリングする必要があるため、DOMの更新のコストが高くなる可能性があります。

最近のWebサイトでは大量のDOM操作を使用しレンダリングします。

その速度の低下は、ほとんどのJavaScriptフレームワークが必要以上にDOMを更新するためてす。

この非効率的な更新が深刻な問題になっている事は事実です。

DOMを直接操作することは、プロセスが遅いため、実際に必要な頻度よりも頻繁に行うべきではありません。

DOMに対する操作は、必要なときに効率的に実行する必要があります。

それら問題に対処するために、仮想DOMと呼ばれるものを導入されました。

仮想DOMとリアルDOMとの違いは??

一方Reactの仮想DOMでは

更新情報を受けとってもすぐにはブラウザの描画は行わず、情報を受け取ると仮想DOMを再構築します。

つまり変更前の仮想DOM変更後の仮想DOMこの2種類があるという事になります。

更新箇所があった際に、変更前と変更後で比較【差分】をし、差分があった箇所のみを追加し通常DOMに反映させ再描画をしている流れとなります。

Reactの仮想DOM画像

つまり、React.jsが行うこの比較の助けを借りて、Reactコンポーネントのどの部分を更新する必要があるかを自動的に判断するのです。

Reactは一度比較した後、更新が必要なコンポーネントを更新されたノードで更新します。

ですので、通常DOMのように必要以上にDOM全体を再構築するわけではなく、必要箇所のみを変更しリアルDOMに反映しているので、一切無駄の無いDOM操作でページ表示の高速化向上を実現化したものになります。

これは、仮想DOMによってReactで構築されたWebサイトのパフォーマンスが向上すると言っても過言ではありません。

仮想 DOMはどのように高速なのか?

仮想DOMでは、メモリの浪費が多すぎるリアルDOMと比較して、メモリの浪費が少なくなります。

リアルDOMの場合では、ページからアクセスして、操作のためにメモリにロードする必要があるからです。

仮想DOMではリアルDOMの要素に直接アクセスしたり変更したりする必要がないため、それだけで非常に高速になります。

また、コンポーネントの更新を遅くするのではなく、更新が必要なDOM要素のみを確認してから更新を実行します。

仮想DOMは、UIの理想的な仮想表現がメモリに保持され、リアルDOMと同期されるプログラミングの概念となっております。

そしてReactでは1つ1つの部品として扱います

見た目

操作性

構造

これらUIを組み合わせワンセットで1つのコンポーネントとなるのがReactのコンポーネント指向となります。

例えばHTMLなら『headerの中の部品』で1つのコンポーネント、『お問合せフォームの中にある部品』で1つのコンポーネント部品として分けます

更新や追加があっても、お問合せフォームのボタンのみが変更情報として受けとり仮想DOMが再構築され、仮想DOM同士で比較『差分』されその後通常のDOMに反映され再描画されます。

Reactでは仮想DOMとブラウザ(通常)DOMへの反映が分離されていますので

ReactのDOMを使わずに別のを使用することでサーバーサイドレンダリング(SSR)などの適用が可能となっています。

フレームワークが仮想DOMを使用する理由

1. パフォーマンスを向上させます。

2. DOMの更新が非常に高速です。

3. 宣言的なコンテンツを記述できます。

4. シンプルでそれほど複雑ではありません。

5. 軽量

6. UI をクリーンに保ち、アプリケーションで必要なコンポーネントを更新するのに役立ちます。

7. コンパイル時の変更の最適化と簡単な変化検出

仮想 DOMの利点は、多くのフレームワークがプロジェクトで仮想 DOMの使用を採用する理由とも見なすことができます。

最後に

仮想DOMでは、コンポーネントの状態変化が発生した後に、調整プロセスを通してメモリに保持され、リアルDOMと同期されます。

そのプロセス中、Reactは更新された状態を保持する仮想DOMを比較(差分)することにより、コンポーネントの状態変化に応答します。

仮想DOM を使用して、パフォーマンスの問題を回避し、DOMをより高速かつ効率的に変更できます。

リアルDOMが非効率的である理由と、仮想DOMがこの問題をどのように解決するかをあなたは学びました。

本日は以上となります。

最後までこの記事を読んで頂きありがとうございます。


プライバシーポリシー