本日は 仮想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の詳しい解説は下記で学べます。
仮想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はJavaScriptやJQueryで何かしらの追加や更新のDOM操作をして、情報を受け取ったらDOM全体を再構築します。
つまり１箇所の更新のみだったとしても、変更した際は必要のない箇所全てを再構築するのでブラウザの再描画までの時間がかなり遅くなります。
つまり必要以上にDOMを更新したがるんです…。
その場合、UIコンポーネントが多ければ、多いほど、DOMの更新ごとに再レンダリングする必要があるため、DOMの更新のコストが高くなる可能性があります。
最近のWebサイトでは大量のDOM操作を使用しレンダリングします。
その速度の低下は、ほとんどのJavaScriptフレームワークが必要以上にDOMを更新するためてす。
この非効率的な更新が深刻な問題になっている事は事実です。
DOMを直接操作することは、プロセスが遅いため、実際に必要な頻度よりも頻繁に行うべきではありません。
DOMに対する操作は、必要なときに効率的に実行する必要があります。
それら問題に対処するために、仮想DOMと呼ばれるものを導入されました。
仮想DOMとリアルDOMとの違いは??
一方Reactの仮想DOMでは
更新情報を受けとってもすぐにはブラウザの描画は行わず、情報を受け取ると仮想DOMを再構築します。
つまり変更前の仮想DOMと変更後の仮想DOMこの2種類があるという事になります。
更新箇所があった際に、変更前と変更後で比較【差分】をし、差分があった箇所のみを追加し通常DOMに反映させ再描画をしている流れとなります。
つまり、React.jsが行うこの比較の助けを借りて、Reactコンポーネントのどの部分を更新する必要があるかを自動的に判断するのです。
Reactは一度比較した後、更新が必要なコンポーネントを更新されたノードで更新します。
ですので、通常DOMのように必要以上にDOM全体を再構築するわけではなく、必要箇所のみを変更しリアルDOMに反映しているので、一切無駄の無いDOM操作でページ表示の高速化向上を実現化したものになります。
これは、仮想DOMによってReactで構築されたWebサイトのパフォーマンスが向上すると言っても過言ではありません。
仮想 DOMはどのように高速なのか？
仮想DOMでは、メモリの浪費が多すぎるリアルDOMと比較して、メモリの浪費が少なくなります。
リアルDOMの場合では、ページからアクセスして、操作のためにメモリにロードする必要があるからです。
仮想DOMではリアルDOMの要素に直接アクセスしたり変更したりする必要がないため、それだけで非常に高速になります。
また、コンポーネントの更新を遅くするのではなく、更新が必要なDOM要素のみを確認してから更新を実行します。
仮想DOMは、UIの理想的な仮想表現がメモリに保持され、リアルDOMと同期されるプログラミングの概念となっております。
そしてReactでは１つ１つの部品として扱います
・ 見た目
・ 操作性
・ 構造
これらUIを組み合わせワンセットで１つのコンポーネントとなるのがReactのコンポーネント指向となります。
例えばHTMLなら『headerの中の部品』で１つのコンポーネント、『お問合せフォームの中にある部品』で１つのコンポーネント部品として分けます
更新や追加があっても、お問合せフォームのボタンのみが変更情報として受けとり仮想DOMが再構築され、仮想DOM同士で比較『差分』されその後通常のDOMに反映され再描画されます。
Reactでは仮想DOMとブラウザ(通常)DOMへの反映が分離されていますので