はじめに

JavaScript(JS) では、document.getElementById() や addEventListener() を使って直接 DOM を操作することが一般的ですが、React ではこれらを直接使わず、onClick や onChange などのイベントハンドラーを JSX 内で設定します。

これは、単に書き方の違いではなく、React の仮想 DOM や状態管理との整合性を保つための重要な設計 です。
本記事では、なぜ React では標準の DOM 操作を避けるのか、そのメリットについて詳しく解説します。

1. 仮想 DOM との整合性

React は 仮想 DOM (Virtual DOM) を使って UI を管理します。
仮想 DOM とは、実際の DOM の軽量なコピーをメモリ上に保持し、効率的に変更を適用する仕組みです。

JavaScript の document.getElementById() を使って直接 DOM を変更すると、仮想 DOM の状態と実際の DOM の状態が一致しなくなる ため、React の更新システムと競合し、意図しない挙動を引き起こす可能性があります。

✅ 悪い例 (React の外で直接 DOM を変更する)

JAVASCRIPT
document.getElementById("myButton").addEventListener("click", () => {
  console.log("ボタンがクリックされました");
});

この方法では、React のコンポーネントの状態とは関係なく 直接 DOM を変更 してしまうため、React の再レンダリングと同期が取れなくなる可能性があります。

✅ React の適切な方法 (onClick を使う)

JSX
function MyComponent() {
  return (
    <button onClick={() => console.log("ボタンがクリックされました")}>
      クリック
    </button>
  );
}

この方法なら、React の仮想 DOM を通じて変更が管理され、状態管理と整合性を保ちながら更新が行われます。

2. JSX を活用した直感的なコード

React では JSX を導入しており、HTML のような記述で JavaScript のコードを組み込むことができます。

通常の JavaScript では、addEventListener を使ってイベントを登録しますが、JSX では HTML の属性のように onClick などを記述 できるため、可読性が向上します。

✅ 従来の JavaScript のイベントハンドリング

JAVASCRIPT
document.getElementById("myButton").addEventListener("click", function () {
  alert("クリックされました！");
});

✅ React のイベントハンドリング (JSX で記述可能)

JSX
<button onClick={() => alert("クリックされました！")}>クリック</button>

このように、React では シンプルな構文で直感的にイベントを設定 できるのが大きなメリットです。

3. 再レンダリング時のパフォーマンス最適化

JavaScript の addEventListener でイベントを登録すると、そのイベントハンドラは コンポーネントの再レンダリング時には更新されません。

一方、React の onClick などは 再レンダリング時に最新の状態を保持したまま適用 されるため、状態管理がしやすくなります。

✅ 状態を考慮したイベントハンドリング (React)

JSX
import { useState } from "react";

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

  return <button onClick={() => setCount(count + 1)}>カウント: {count}</button>;
}

このように、React の onClick を使えば 状態 (count) に依存する処理を簡単に実装 できます。

4. イベントの統一的な管理

React では、イベントが 仮想 DOM を通じて処理される ため、すべてのイベントは 統一されたシステム (Synthetic Event) によって管理されます。

これにより、ブラウザごとのイベントの違いを吸収し、一貫性のあるイベント処理 が可能になります。

✅ 通常の JavaScript のイベント

JAVASCRIPT
document.getElementById("myInput").addEventListener("change", function (event) {
  console.log(event.target.value);
});

✅ React の onChange を使う

JSX
<input type="text" onChange={(event) => console.log(event.target.value)} />

React の SyntheticEvent により、異なるブラウザでも統一的な動作を保証できます。

5. まとめ

React では、仮想 DOM の仕組みや JSX の記法を活かしながら、最適なイベント管理を行うために onClick や onChange を導入 しています。

✅ React で JavaScript の直接的な DOM 操作を避ける理由

1. 仮想 DOM との整合性 → 直接 DOM を操作すると React の状態管理と競合する。
2. JSX に適した直感的な記法 → onClick などをシンプルに記述可能。
3. 再レンダリング時の最適化 → 最新の状態を保持しながらイベントを適用できる。
4. イベントの統一管理 (SyntheticEvent) → ブラウザ間の違いを吸収し、一貫した動作を保証。

React を使う際は、JavaScript の標準的な DOM 操作を避け、onClick などのイベントハンドラーを活用する ことで、よりスムーズな開発が可能になります。