【React】仮想DOMについて理解を深める。

本記事の目次

Reactと仮想DOM

Reactとは、JavaScriptフレームワークの一つで、現在世界中でも高い人気を得ています。

コンポーネントベースのプログラミング言語で、オープンソースであるため誰でも使用可能です。

Reactでは、仮想DOMと呼ばれる仕組みを利用し、WEBサイトやWEBアプリを構築する際に利用されます。

また、React Native を使用することでスマホアプリを構築することも可能です。

DOM（Document Object Model）とは、HTMLやXML文書を取り扱うためのAPIです。

つまり、JavaScriptなどのプログラムからHTMLやXMLを操作するために必要な仕組みなのです。

例えば、以下のコードではsampleというid属性を持った要素を取得し、テキストを出力（DOMを操作）しています。

const getText  = document.getElementById('text');
getText.textContent = 'テキストを出力します';

DOMは、以下3つの特徴を持っています。

上記のDOM操作の例であるように、DOMによってWEBページをプログラム（例ではJavaScript）で操作できるようになっています。

DOMでは、ツリー構造と呼ばれる階層構造をしています。

文書の最上位の要素（document）を頂点として、下位要素が木の枝のように分かれていく木のような構造をしているため、ツリー構造と呼ばれています。

DOMでは、各要素をノードという単位で区切ります。

<html>、<head>、<body>、<p>といったHTMLタグや、コメント、属性、テキストすべてがノードです。

各ノードによってDOMツリーが形成されている、ということです。

また、ノードはいくつかの種類に分類されています。

仮想DOMとは、仮のDOMをJavascriptのオブジェクトとして表現しているものです。

DOMを直接操作するのではなく、オブジェクトを変更して差分のみをDOMに反映することでパフォーマンスを向上させることができます。

簡単にいうと、DOMの最小限の変更だけで済むので早く処理を行うことができる、ということですね。

仮想DOMの仕組みは、ReactだけではなくVue.jsなどの他のフレームワークでも採用されています。