JavaScriptを学び始めると、
「普通のJavaScriptで書くのと、React（ReactDOM）で書くのって何が違うの？」
と疑問に思う人は多いです。
この記事では、
- 普通のJavaScript（Vanilla JS）とは何か
- ReactDOMとは何をしているのか
- 両者の違いを具体例で比較
を解説します。
普通のJavaScript（Vanilla JS）とは？
ここで言う「普通のJavaScript」とは、
ライブラリを使わずにDOMを直接操作する書き方のことです。
例：ボタンを押したら文字を変える
<button id="btn">クリック</button>
<p id="text">こんにちは</p>
<script>
const btn = document.getElementById("btn");
const text = document.getElementById("text");
btn.addEventListener("click", () => {
text.textContent = "クリックされました";
});
</script>
特徴
-
document.getElementByIdなどで DOMを直接取得 - 状態（今どういう画面か）を 自分で管理
- 小さい処理なら シンプルで分かりやすい
ReactDOMとは？
ReactDOM は、Reactで作ったUIを 実際の画面（DOM）に反映するための仕組み です。
Reactでは、
- 「今の状態（state）はこう」
- 「その状態なら画面はこうなる」
という 宣言的な書き方 をします。
React + ReactDOMの基本イメージ
import React from "react";
import ReactDOM from "react-dom/client";
function App() {
return <p>こんにちは</p>;
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
ここで重要なのは
- DOMを直接操作していない
- 「こういうUIを表示したい」と 書いているだけ
という点です。
同じ処理をReactで書くと？
Reactの例：ボタンを押したら文字を変える
import { useState } from "react";
function App() {
const [text, setText] = useState("こんにちは");
return (
<>
<button onClick={() => setText("クリックされました")}>
クリック
</button>
<p>{text}</p>
</>
);
}
ここで起きていること
-
textが 状態（state） -
setTextを呼ぶと 状態が更新される - 状態の変化を検知して ReactDOMが自動でDOMを更新
- 開発者は DOM操作を一切書かなくてよい
一番大きな違い：DOM操作の考え方
| 観点 | 普通のJavaScript | ReactDOM |
|---|---|---|
| DOM操作 | 自分で直接触る | Reactが自動でやる |
| 画面更新 | どこを変えるか指定 | 状態が変われば再描画 |
| 書き方 | 命令的 | 宣言的 |
| 規模が大きくなると | 管理が大変 | 管理しやすい |
命令的 vs 宣言的とは？
普通のJavaScript（命令的）
text.textContent = "クリックされました";
text.style.color = "red";
👉 **「どうやって変えるか」**を細かく指示する
React（宣言的）
<p style={{ color: "red" }}>クリックされました</p>
👉 **「この状態ならこう表示したい」**と書くだけ
ReactDOMは何をしてくれているの？
ReactDOMは裏側で、
- 仮想DOM（Virtual DOM）を使って差分を計算
- 本当に必要な部分だけをDOMに反映
ということをやっています。
そのため、
- 無駄なDOM操作が減る
- UIの状態管理に集中できる
というメリットがあります。
じゃあ普通のJavaScriptはいらないの？
いらないわけではありません。
普通のJavaScriptが向いているケース
- 簡単なWebページ
- 小さな動的処理
- 学習用途（DOMの理解）
ReactDOMが向いているケース
- 画面が複雑
- 状態が多い
- チーム開発
- SPA（シングルページアプリ）
まとめ
- 普通のJavaScriptは DOMを自分で操作
- ReactDOMは 状態からUIを自動生成
- 小規模なら 普通のJavaScript
- 規模が大きくなるなら ReactDOMが強い
最初は「Reactは難しい」と感じるかもしれませんが、
**「DOM操作をしなくていい」**というメリットに気づくと、一気に楽になります。
おわりに
JavaScript → React → 状態管理
という流れで理解すると、ReactDOMの役割がとてもクリアになります。