仮想DOMとは？【React入門】

こんちには！
フロントエンドエンジニア・マークアップエンジニアのリクです！

今回の記事では、「仮想DOM」について解説します。

1 仮想DOMとは？

Reactにおける仮想DOMとは、情報を受け取ってもすぐにはブラウザの描画を行わず、まずはプログラムで作成されたバーチャルなDOMを構築することを指します。

JavaScriptのオブジェクトとも言われます。

そして、構築されたDOMの内容を元にHTMLを作成し、実際のDOMに同期されます。

これを差分検出処理（recibciliation）と呼びます。

仮想DOMを利用することで、ページ変更前と変更後を仮想DOMを比較し、情報が変化した部分だけを素早く見つけ出し、変更差分だけリアルDOMに反映するので、変更が最小限に抑えられるという仕組みです。

無駄のないDOMの操作処理を行うことで、リアルDOMに比べ、ページ表示の高速化によるパフォーマンス向上を実現します。

DOM（Document Object Mode）は、画面を表示するまでに解釈したHTML、CSS、JavaScriptによって構築されたDOM（ツリー）を指します。

簡単に言うと、JavaScriptからHTMLドキュメントを操作するためのAPI（インターフェイス）を指します。

DOMのおかげで、JavaScriptからHTMLドキュメントを操作し、ボタンクリック時のイベント登録や、スタイル・属性の変更、要素のサイズを取得といったことが可能になります。

DOMはChromeやSafariなどのブラウザ上で、Webページを描画するために構築されます。

※描画とは、レンダリングによって、変更差分が見つかった場合に構築されたDOMをブラウザに反映されることを指します。

ここまで、簡単にではありますが、仮想DOMに関して解説しました。

この記事だけではなかなか理解しづらい部分もあるかと思いますで、他の記事も併せて参考にしてみると良いと思います。

僕自身もフロントエンド開発に関して、理解できていなことがまだまだたくさんあります…

こちらの記事の他にもインプットしたことを発信していきますので、ぜひ他の記事も参考にしていただければと思います。