Vol.106」を読みました。単行本この商品を含むブログを見る特に面白かったのが仮想DOM特集です。jQueryがReactと相性がよくないという事実は知っていたのですが、深く追求した事はなかったので、色々と発見がありました。私は普段からReactを使っているので、その仕組みを深く理解する事が出来た点でも、読んでよかったと思います。自分なりの理解として、備忘録をまとめていきます。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は数多くの分野に裾野を広げています。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によって何を実現しようとしているのかが、よく分かります。Vol.106」を読んでみてください。@mizchiさんの熱い仮想DOM魂が詰まっていて、かなり面白かっです。2018」の記事です。はてなブログProWEB系エンジニア。ブログで趣味の映画・ゲーム・読書の感想を書いたり、技術系の知見を共有しています。技術書典7にサークル参加して、技術同人誌を頒布しました。BOOTHに電子版があります。(1)月別アーカイブスポンサーリンクスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。