DOMとか仮想DOMとか聞くけど、一体なんなのか

Webを支える技術
Reactを勉強していると仮想DOMや差分レンダリングなどのキーワードを目にしますが、いまいちパッと理解できなかったので、そのための覚書です。

トピック一覧

  • DOMとは？
  • JavaScript とは
  • Virtual DOM （仮想DOM） とは？
  • React Component とは？

DOMとは？

www.doraneko.org

DOMはインターフェースであり、Html, Xmlをどのように操作するのかを定義したものである。

逆に、バイナリの仕様やデータ構造のセットはDOMではない点が分かる。

つまり、ブラウザ毎に、内部の仕様は異なるが、DOMに準拠していれば、Htmlを同じように表示、操作できることを意味する。

補足: DOMは、XML文書やHTML文書を処理するために使ってよいインターフェイスを指定する。
これらのインターフェイスが抽象概念である -- C++ の「抽象的ベースクラス」によく似て、ある文書のアプリケーションの内部的表現にアクセスし、操作するための方法を指定する手段である -- ことを認識することは重要である。
インターフェイスは、特定の具体的な実装を含意しない。DOMアプリケーションはそれぞれ、この仕様書に示されたインターフェイスがサポートされている限り、任意の便利な表現で文書を維持しても自由である。

JavaScript とは？

developer.mozilla.org

ブラウザ環境上で動く、インタープリターなスクリプト言語である。 ブラウザはDOM (Document Object Model) APIを用意し、JavaScriptはこれを用いてコンテンツの更新などを行う。

ドキュメントオブジェクトモデル (DOM) - Web API | MDN

DOMはウェブページを表す HTML のように — 文書の構造をメモリ内に表現することで、ウェブページとスクリプトやプログラミング言語を接続するものです。

ウェブページとスクリプトやプログラミング言語を接続する　ここが重要なポイントだと思います。

JavaScript は何をするのか　の部分で、 ブラウザは入力としてHtml, Css, JavaScript を受け取り、先ずHtml, Cssを処理し、Webページを出力します。 そして、JavaScriptエンジンによってJavaScriptは実行されます。 DOM APIを通じて、動的にHtml, Css を更新します。

Web App を構築する上での基本的な流れが掴めます。

Virtual DOM （仮想DOM）とは？

Virtual DOM （以降はVDOM）を 以下のサイトを参考に考察します。

reactjs.org

ブラウザがHtml, Cssを入力し、Webページを出力する流れをみました。 Webページの内容（タグや属性など）をJavaScriptから操作する意味では同じですが、 JavaScript内でHtml, Cssライクなオブジェクトを構築し、それを最終的にWebページに反映させる点が、従来と異なります。 イメージとしてはJavaScript言語上でUIの要素群があり（コンポーネントと呼ばれる）、それがHtml, Cssに翻訳されてWebページに反映される感じでしょうか。

UIコンポーネントのデータ構造とブラウザとのインターフェースを設計できれば、React, Vue などのフレームワークとまでは言わなくとも、 簡単なフレームワークを作れるということです。

React Component とは？

VDOMの一種という解釈が妥当だと思います。 React は UI コンポーネントと、fiber と呼ばれる内部オブジェクトを VDOMと見なすことができます。 ここはまた、Reactとして別記事で詳しく紹介したいと思います！