DOMと仮想DOMの違いをわかりやすく比較！

DOMと仮想DOMの違いをわかりやすく比較！ 知識
この記事は約3分で読めます。

でじぼうです。

Web開発を始めるとよく出てくる DOM や 仮想DOM という言葉。
この記事では、DOMと仮想DOMの違いを解説します。

でじぼう
でじぼう

この記事は下記の方がおすすめ！

  • DOMってそもそも何かよく分からない
  • 仮想DOMとの違いがピンとこない
  • Reactでよく出てくる用語をちゃんと理解したい

Instagramフォロワー数9,500人を越える人気のもち・大福店 えにかいたもち

npm・yarn・pnpmの違いとは？速度や特徴をざっくり比較！
JavaScriptやTypeScriptのプロジェクトでは、依存関係の管理に「パッケージマネージャー」が欠かせません。この記事では、代表的な3つのパッケージマネージャー「npm」「yarn」「pnpm」の違いを比較し、それぞれのメリット・デメリットを表にまとめて解説します。npmはNode.js公式が提供している標準的なツールで、ほとんどのプロジェクトで使われています。対してyarnはMeta（旧Facebook）が開発したもので、npmよりも速くて安定していると評価されています。そして近年注目されているのがpnpmで、圧倒的なインストール速度とディスク効率の良さから、徐々にシェアを伸ばしています。選び方に迷ったときは、プロジェクトの規模や開発チームの方針を基準にするとよいでしょう。たとえば、モノレポ構成や高速なCI/CDを重視する場合はpnpmが向いています。
it-bokenki.com

DOMとは？


DOMとは、HTMLを「ブラウザが再構築した木構造のデータ構造」です。

ブラウザは、HTMLを読み込むと、内部で下記構造を作ります。 JavaScriptはこの構造を通じて要素を取得したり、書き換えたりできるわけです。

よく「ツリー構造」とも言われます。

DOMと仮想DOMの違いをわかりやすく比較！

例：JavaScriptがDOMを操作

<h1 id="title">こんにちは</h1>

document.getElementById("title").textContent = "こんばんは";

このように、JavaScriptはHTMLそのものを操作しているのではなく、 DOMという構造体を操作しているのです。

DOMは「分解できるお弁当」

DOMの概念をわかりやすくするために、近いものにたとえてみましょう！

DOMと仮想DOMの違いをわかりやすく比較！
例説明
HTMLお弁当の見た目（箱に詰まった中身）
DOMおかず1つ1つを取り出せる状態（部品として分解）
JavaScriptお箸（中身をつまんだり変えたりできる）

DOM操作のデメリット

DOMは便利ですが、次のようなデメリットもあります。

  • 操作するたびに画面を再描画する必要がある
  • ページが大きくなると、全部のDOMをチェックするのが大変で重い

これが、パフォーマンスの問題につながります。

仮想DOMとは？

仮想DOMとは「実際の画面（DOM）を直接書き換える前に、メモリ上にコピーを作って差分だけ反映する仕組み」です。

比喩で理解

通常のDOM操作

  • ポスターに直接書き込みする（ミスしやすい）


仮想DOM操作

  • まずメモ帳で修正案を書いてから、違いだけポスターに反映する

仮想DOMの動き

  1. ユーザーが何か操作（例：ボタンをクリック）
  2. 仮想DOMが新しい状態をメモリ上で作成
  3. 古い仮想DOMと比較して「どこが変わったか？」をチェック
  4. 本物のDOMに変わった部分だけ反映！

仮想DOMのメリット

  • 必要な部分だけを更新するので効率的
  • 再描画が最小限なので速い
  • 保守性・読みやすさも向上（Reactなどで使われている理由）

DOM ・ 仮想DOM の比較表

項目DOM仮想DOM
操作対象画面そのもの（実際のDOM）メモリ上の仮のDOMツリー
更新方法直接変更（リアルDOMを操作）差分のみを検出して効率的に更新
パフォーマンス重くなりがち軽くて速い
使用場面HTMLや基本的なJavaScript開発React / VueなどのモダンFW
F12キーNetworkタブの使い方｜Web開発で通信の中身を確認！
F12キーで開くNetworkタブの使い方を初心者向けに解説。API通信やエラー調査に役立つ基本操作を紹介します
it-bokenki.com

コメント