Webの基本、仮想DOMを理解しよう

はじめに

フロントエンドエンジニアを目指すのであれば、理解しておきたいのが仮想DOMの仕組みです。仮想DOMという技術があることは知っているけれど、あまりよく分かっていないという方も多いのではないでしょうか。私もその中の一人でしたが、仮想DOMを学ぶことでDOMとの関係性を知ることができ、あわせてWebの仕組みも学べたため、フロントエンド技術の理解が深まりました。

基礎知識を学ぶことは遠回りに感じるかもしれません。しかし、基礎を知ることは、それがベースとなり、さまざまな技術の理解が深まる可能性があります。そこで今回は、Reactなどのフロントエンド技術で使われている仮想DOMについて解説します。基礎知識を一緒に学び、フロントエンドエンジニアを目指しましょう！

この記事について

目的

• 仮想DOMの仕組みについて知る
• DOMと仮想DOMの関係を知る
• ReactでのDOM操作をできるようにする

対象者

• 初学者の方
• 仮想DOMの基本的な仕組みを知りたい方
• Webの理解を深めたい方

DOMについて

まずはDOMの基本について少し学習しましょう。DOM（Document Object Model）とは、Webページの元となるHTMLのファイル構造をプログラムで操作し、スタイルや内容を変更することができる仕組みです。これは、HTMLのDOM要素をWebページとして画面にレンダリングする際に、プログラムから表示内容を変更できるということです。

DOMはHTMLドキュメントの内容を解析し、ツリー構造で表現します。このツリー構造はDOMツリーと呼ばれ、ブラウザがHTMLを読み込む際に生成します。DOM要素をツリー構造で表現することで、プログラムが1つ1つのノードにアクセスでき、要素の変更などの操作が可能となります。

DOM操作で最もよく知られている言語であるJavaScriptには、DOMを操作するためのWeb APIが用意されています。開発者はHTML要素を操作し、ページの表示内容を容易に変更できます。

DOMについて、より詳しく知りたい方は以下の記事をご覧ください。DOMについて詳しく解説しています。

https://envader.plus/article/426

DOMツリーの構築と再レンダリングのプロセス

次に、DOM操作でDOMツリーに変更があった際に、どのようなプロセスを経て画面に再表示されるかを知りましょう。

• 初回レンダリング

  WebページのHTMLファイルがサーバーから取得されロードされる際、ブラウザはそのHTMLを解析してDOMツリーを構築します。そのDOMツリーに基づいてブラウザはページをレンダリングし、画面に表示します。

• DOM操作によるDOMツリーの変更

  JavaScriptによるDOM操作が行われると、ブラウザはその変更された要素を既存のDOMツリーに反映します。これはDOMツリーの一部を更新するプロセスです。DOMツリーの更新とは、要素の追加、削除、属性の変更などが含まれます。

• レイアウトの再計算

  DOM操作によってページのレイアウトが変わると、ブラウザは変更された部分の新しいレイアウトを計算し直します。これは、ページ内の各要素の位置やサイズを再確認する作業です。具体的には、ブラウザのレイアウトエンジンが変更された部分とその影響を受ける要素を再評価し、新しい位置やサイズを決定します。

この後もいくつかのプロセスを経て、DOMツリーの変更が画面に表示されます。普段ブラウザでWebページを見ている裏では、ブラウザがさまざまなプロセスを行っています。

この再レンダリングのプロセスでは、DOM操作で変更された内容によって、レイアウトの再計算量が変わってきます。要素の色変更などの微量な変更は、その要素のみが再レンダリングされますが、要素の追加や変更は、その変更に影響する他の要素も再レンダリングされます。そのため、DOMツリーへの頻繁かつ直接的なDOM操作は、レイアウトの再計算量が増加し、パフォーマンスに影響を与えることがあります。そこで登場するのが仮想DOMです。

DOMと仮想DOMの仕組みは異なります。この記事では区別しやすくするため、DOMのことをリアルDOMという形で解説します。

仮想DOMについて

仮想DOMとは、Reactやその他のフロントエンドフレームワークが使用するDOMシステムです。仮想DOMはリアルDOMから軽量DOMをメモリ上に仮想的に生成します。仮想DOMを利用することで、DOM操作で更新があった要素と、その変更に影響のある要素を絞り込み、リアルDOMに反映することができます。再レンダリングする要素を絞り込むことで、必要最小限のDOM操作が行われ、結果としてパフォーマンスの効率化が図れます。

仮想DOMの仕組み

Reactでは、リアルDOMを直接操作することは公式では推奨されておらず、仮想DOMを経由してリアルDOMを操作することが一般的です。仮想DOMは、DOM操作により要素に変更が発生した場合、新しい仮想DOMを生成します。その後、新しい仮想DOMと変更前の仮想DOMの状態を比べて差分を検出し、変更に影響がある要素を絞り込み、リアルDOMに反映させます。こうすることで、レンダリングプロセスの効率化を可能にしています。この仮想DOMを比較するプロセスを「差分検出」と呼びます。

仮想DOMを使用することでレンダリングプロセスは早くなるのか？

仮想DOMの差分検出による部分レンダリングは、従来のDOM操作によるレンダリングよりもパフォーマンスが向上すると一般的に解説されています。ただし、一概に「必ず早い」とは言い切れず、その効果はプロジェクトの規模や特定のケースに依存すると考えられます。

従来のDOM操作による要素の変更は、変更のたびにレイアウトの再計算と再レンダリングの処理が行われます。要素の変更が少ない場合、再レンダリングのパフォーマンスへの影響は感じないかもしれません。しかし、特定の要素の変更が他の要素に大きく影響を及ぼす場合、レイアウトの再計算量が増加し、パフォーマンスの維持が難しくなる可能性があります。

Reactと仮想DOMでは、差分検出により必要最小限の変更を特定し、バッチ処理を使用して差分をまとめてリアルDOMへ反映できます。これにより、レイアウトの再計算量が削減され、レンダリングの負荷が抑えられます。

大規模なプロジェクトでは、従来のDOM操作による要素の変更は実装が複雑になり、レンダリングプロセスの効率化が難しくなります。一方、Reactと仮想DOMでは、差分検出とリアルDOMへの更新が自動化され、レンダリングパフォーマンスの良い実装が容易になります。このことから、従来のDOM操作より仮想DOMの方がレンダリングのパフォーマンスを維持しやすく、「場合によっては早い」と言えるのではないでしょうか。

仮想DOMの差分検出と部分レンダリングの効果

仮想DOMの差分検出と部分レンダリングは、Reactが提供する強力な機能です。この機能を利用することで、アプリケーションのパフォーマンスの効率化が図れます。ここでは、チャットアプリを例にとって、仮想DOMの差分検出と部分レンダリングがどのように役立つかを説明します。

チャットアプリでは、多くのメッセージがリアルタイムで表示され、ユーザーからの入力も頻繁に発生します。これらの動作を効率的に処理するためには、仮想DOMの差分検出と部分レンダリングが有効です。

従来のリアルDOM操作でも、特定の要素のみを再レンダリングすることは可能ですが、その管理は難しくなります。多くの要素がある場合、どの要素を更新するかを正確に考える必要があり、その実装は複雑になります。また、頻繁な再レンダリングによりアプリケーションのパフォーマンスが低下する可能性があります。

一方、仮想DOMを使用することで、これらの問題を効果的に解決できます。仮想DOMの差分検出により、メッセージの追加や更新が頻繁に発生しても、それを容易に検出し部分レンダリングすることができます。これにより、必要最小限のDOM操作で済むため、アプリケーションのパフォーマンスに影響を与えにくくなります。

このように、仮想DOMの差分検出と部分レンダリングは、チャットアプリのようにリアルタイムで更新が必要なアプリにとって非常に便利な技術です。従来のDOM操作に比べて、仮想DOMはパフォーマンスの効率化と開発のしやすさを両立させることができます。

仮想DOMを使用した簡単なアプリのハンズオン

このハンズオンでは、仮想DOMの基本的な仕組みを理解し、Reactを使ってシンプルな入力アプリを作成します。仮想DOMの差分検出と部分レンダリングの効果を体験しましょう。

Reactでのプロジェクト作成方法は以下の記事で詳しく説明しています。

https://envader.plus/article/341

このハンズオンでは以下の入力アプリを作成します。フォームに入力した文字列がリアルタイムに画面に表示されるものです。

Reactのプロジェクトを作成した後、srcディレクトリ内のApp.jsを以下のように編集します。

//ファイル名：App.js

import React, { useState } from "react";

export default function App() {
  const [inputValue, setInputValue] = useState("");

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <>
        <h1>入力アプリ</h1>
        <input
          type="text"
          value={inputValue}
          onChange={handleInputChange}
          placeholder="ここに入力してください"
        />
        <h2>{inputValue}</h2>
    </>
  );
}

作成したアプリのフォームに文字を入力すると、フォームの下部にリアルタイムで文字が表示されることを確認できるかと思います。

このアプリでは以下のプロセスを経て差分検出し、再レンダリングされ画面に変更した結果が表示されます。

• 初回レンダリング

  コンポーネントが最初にレンダリングされると、Reactは仮想DOMを生成します。

• 状態の変更

  inputフォームにテキストを入力すると、handleInputChange関数が呼び出され、inputValueの内容が更新されます。inputValueの内容の更新により、Reactは新しい仮想DOMを生成します。

• 差分検出

  Reactは新しい仮想DOMと変更前の仮想DOMを比較して、どの部分が変更されたか差分検出を行います。

• 必要最小限の更新

  差分検出の結果、必要最小限の変更をリアルDOMに反映します。具体的には、<h2>{inputValue}</h2>と他に影響のある最小限の要素が再レンダリングされ、差分の検出がない要素は更新されません。

今回作成したアプリでは、このようなプロセスを経て差分のみが再レンダリングされ、画面に表示されました。仮想DOMを使用することで差分を素早く検出し、必要最小限の要素のみを再レンダリングすることで、アプリケーションのパフォーマンスの効率化が可能になります。

この記事で学んだこと

• 仮想DOMについて

  仮想DOMとは、Reactやその他のフロントエンドフレームワークが使用するDOMシステムです。仮想DOMを利用することで、DOM操作で更新があった要素を絞り込みリアルDOMに反映することがでるため、レンダリングパフォーマンスの効率化が図れます。

• 仮想DOMの仕組み

  仮想DOMは、DOM操作により要素に変更が発生した場合、新しい仮想DOMを生成します。その後、新しい仮想DOMと変更前の仮想DOMの状態を比べて差分を検出し、変更に影響がある要素のみをリアルDOMに反映させます。こうすることで、レンダリングプロセスの効率化を可能にしています。

参考資料

以下のリンクは、この記事で説明した手順や概念に関連する参考資料です。より詳しく学びたい方は、ぜひご参照ください。

• React公式

  https://ja.legacy.reactjs.org/docs/faq-internals.html

  https://ja.legacy.reactjs.org/docs/reconciliation.html

• MDN Web Docs - DOM の紹介

  https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model/Introduction

• web.dev - ブラウザの仕組み

  https://web.dev/articles/howbrowserswork?hl=ja#Dynamic_changes

• GeeksforGeeks - ReactJS Virtual DOM

  https://www.geeksforgeeks.org/reactjs-virtual-dom/