仮想DOMのメリットと、リアルDOMとの違い - WEB+DB PRESS Vol.106 仮想DOM革命

「WEB+DB PRESS Vol.106」を読みました。

WEB+DB PRESS Vol.106

特に面白かったのが仮想DOM特集です。例えば、jQueryがReactと相性がよくないという事実は知っていたのですが、深く追求した事はなかったので、色々と発見がありました。

特に私は普段からReactを使っているので、その仕組みを深く理解する事が出来た点でも、読んでよかったと思います。

自分なりの理解として、備忘録をまとめていきます。

目次

HTMLを動的に制御するAPIこそがDOMである

私は、DOM(Document Object Model)はHTMLの各要素(divとかspan)そのものを指しているという認識でいました。

実は、DOMとはHTMLを動的に制御するためのAPIなのです。つまり、DOMというAPIを経由して操作することによって、現在のブラウザ上のJavaScriptは成り立っています。

仮想DOMがもたらすメリット

実際にブラウザに出力されているDOMをリアルDOMとするならば、仮想DOMはそれを仮想で再現しています。ここでは、リアルDOMと仮想DOMが1対1で対応していることが重要です。

仮想DOMは実際に出力されるわけではないのですが、単なる木構造の構造体なので、変化させるのが簡単です。例えば、Reactは仮想DOMを変化させてみることで、変化を捕捉しています。

コストの低い仮想DOMの変更で差分を検知し、最小限の変更をRealDOMに加えることこそ、仮想DOMがもたらすメリットなのです。

リアルDOMの変更は1対1の変更を壊す

例えばjQueryは、実際にブラウザに出力されているリアルDOMを操作します。これが何を意味しているかと言うと、仮想DOMとリアルDOMの1対1の関係性が壊れてしまうのです。

適切な関係性が壊れてしまうと、仮想DOMが検知した差分を、正しくリアルDOMに反映させる事ができません。ReactがjQueryと相性が悪いのは、そのような理由があったからなのです。

仮想DOMは様々な分野に適用できる

仮想DOMはあくまで木構造の構造体なので、ブラウザに依存しているわけではありません。

仮想空間で変更を検知し、最小限の変更をリアルに加えるというアプローチは、様々な分野において応用ができます。例えば、Reactは数多くの分野に裾野を広げています。

• React native(モバイルアプリ)
• React 360(VR)

仮想DOMによって検知した差分を、実際にリアルへと反映する仕組みがレンダラー(Renderer)です。つまり、レンダラーの種類を増やせば良いのです。

GoogleのFlutterもReactにインスパイアされており、似たような構成を採用しています。これら、プラットフォームに依存しない応用の効く構成にする事で、Android/iOSへのコードがワンソースで書ける実装を実現しているのです。

Fluxによる状態の一元管理

フロンエンドJSは、表現の幅が広がったことで拡大を見せています。サーバーサイドでやっているようなMVC構成を、フロンエンドJSで作ることすらできます。

私も素のReactで開発してきましたが、コンポーネントが増えてくると、各コンポーネントが状態(state)を持つため状態制御が複雑になります。

そこで、全ての状態を1箇所に集約する事で、一元管理してしまおうというアプローチこそがFluxです。状態が変われば仮想DOMは大元から作り直しとなりますが、最小限の変更だけ反映するように最適化されていれば、高いコストにはなりません。

一元管理になりますので、データの変更は、各コンポーネントから全て単方向に依頼する形となります。この単方向のアーキテクチャこそがFluxであり、各コンポーネントが状態を持つ複雑な構成を避けることが可能になりました。

ちなみに、私も純粋なFluxではないですが、Reduxについて勉強しました。その内容は以前の記事にも書いてあります。単方向アーキテクチャの概念自体はシンプルな考え方であり、とても感動しましたよ！

www.konosumi.net

さいごに

このように、仮想DOMを活用することで、高速な差分の検知と最小限のコストによって、RealDOMを制御する事ができます。

この概念を理解しておけば、Reactの各コンポーネントがrenderによって何を実現しようとしているのかが、よく分かります。

1. stateが書き換えられた
2. 書き換えられたstateで仮想DOMを再構成する
3. 前回の状態との差分を比較してみる
4. 変更があれば、変わった部分だけを実DOMへと反映する

ぜひ「WEB+DB PRESS Vol.106」を読んでみてください。@mizchiさんの熱い仮想DOM魂が詰まっていて、かなり面白かっです。

仮想DOMを足がかりにして、仮想DOMが目指している本質を知ることができる内容でしたよ！

WEB+DB PRESS Vol.106