Zenn
🦧

【JavaScript】超初心者向け！DOMと仮想DOMの違い

に公開
JavaScript
tech

👶 超初心者向け！DOMと仮想DOMの違いをやさしく解説

こんにちは、Greentomatoです！
Reactを学び始めたけど、「仮想DOMって何？」「DOMって結局なに？」という方、多いと思います。

今回は、初心者でも直感的にわかるように、たとえ話と実例で DOMと仮想DOM を比較していきます！

🌳 DOMってなに？

💡 ざっくり言うと…

DOM = HTMLを「ツリー構造のデータ」にしたもの
つまり、画面の設計図みたいなもの！

例えば…

<div id="app">
  <p>Hello, world!</p>
</div>

このHTMLを、JavaScriptからこうやって操作できます：

document.getElementById("app").innerHTML = "<p>こんにちは！</p>";

→ この document.getElementById() で触ってるのが DOM（本物の画面） です！

🔧 DOMの問題点

  • 直接操作すると重くなる（特にたくさん更新があると）
  • 毎回 画面の再描画 が起きるのでパフォーマンスに悪影響
  • コードもごちゃつきやすい（jQuery時代がまさにこれ）

✨ 仮想DOMってなに？

一言で言うと：

仮想DOM = 本物のDOMの「コピー」を JavaScript内に作っておくもの

ReactやVueでは、この仮想DOMを使って、効率よく画面を更新します。

🧠 たとえ話で理解する！

🍱 DOMは「お弁当本体」

  • 何か変更するには、フタを開けて詰め直さないといけない
  • 面倒だし時間もかかる！

📸 仮想DOMは「お弁当の写真」

  • 写真（コピー）を見て、変わった部分だけ詰め直す
  • 最小限の作業で済む！

🔁 DOMと仮想DOMの違いまとめ表

項目 DOM（本物） 仮想DOM（コピー）
実体 ブラウザの中 JavaScriptの中
何をする？ 画面をそのまま変更 差分だけ見て画面を変更
重さ 重い 軽い
使用例 jQuery, 素のJS React, Vue

💻 実際のコードで見てみよう！

▶ 素のJavaScript（DOM）

<p id="count">0</p>
<button onclick="increment()">+1</button>

<script>
  let count = 0;
  function increment() {
    count++;
    document.getElementById("count").innerText = count;
  }
</script>

→ innerText を直接書き換えている＝DOMを直接操作している

✅ React（仮想DOM）

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </>
  );
}

→ ここでは 仮想DOMが裏で「差分」を見てくれて、必要な部分だけ更新してくれる！

⚡ 仮想DOMが速い理由

Reactではこういう流れで動きます：

① 状態が変わる（useStateなど）
② 新しい仮想DOMを作る
③ 古い仮想DOMと比較する（diff）
④ 違っているところだけ、実DOMを更新！

→ つまり「無駄な再描画をしない！」から速い！

📚 まとめ

  • DOMは「本物の画面構造」
  • 仮想DOMは「そのコピー（Reactが使う）」
  • 仮想DOMを使うと、画面更新が速く・安全に・自動でできる！
  • Reactが速くて便利な理由は、仮想DOMの賢さにある！

Discussion