React

【React】Reactの利点に納得できないのだが…

更新日：2025/12/02

最近は少し下火になったような気がするReact。それでもまだまだ人気ありそうです。
私も時々ですが、依頼されて使っています。

しかし、Reactの学習を始めてから気になっていたのがReactの利点として挙げられているある事柄です。
今でも納得できていないので、今更ですが再考してみました。。

 

Reactは速い？

Reactの利点をネットで調べると、「仮想DOMによる高速なレンダリング」が挙げられます。

流れは、

1.仮想DOMを作成して、DOMに反映する
2.状態が変更されたら仮想DOMを作成して、前回の仮想DOMと比較する
3.相違点をDOMに反映する

2の仮想DOMは最初から最後まで全部作り直したうえで、比較します。
そんなんめちゃくちゃ遅くなるのでは？と思いますが、ChatGPTさんに聞いたら次の点で速いんだとか。

1.仮想 DOM の構築は JS なので超軽い
2.実 DOM 操作は重いので最小化する戦略が最適
3.diff が最適化されていて O(n) に近い
4.Fiber でレンダリングが分割実行され、固まらない
5.メモ化で再計算すらスキップできる

「DOMを一から構築するよりも、単純なオブジェクトの仮想DOMを構築した方が速いよね。」
「仮想DOM同士の比較も工夫されているから速いんだよ。」
「レンダーも工夫しているから速いんだよ。」

ということかな？

だから何って思うよね。
そもそも、普通にロジック組み立てたら必要な部分しか更新しませんよ？
Reactも最後はDOMを更新するんだから、仮想DOMとか比較とか無駄ではないだろうか？

 

Reactの本質的な利点

「仮想DOMによる高速なレンダリング」は利点ではない。
Reactの本質的な利点、その利点のデメリットを解消するための仕組みである。たぶん。

本質的な利点とは、DOM操作を意識することなく複雑なUIが作成できることだ。たぶん。

とりあえず、頭から最後までのパーツを組み立てておけば、あとはReactさんがうまくやってくれるのである。

例えば要素を他の要素の下に移動するとしよう。

まずは、移動したことを記憶しておき、状態を変更する。
するとReactさんは、仮想DOMの生成を開始する。
このとき、コンポーネントは記憶しておいた情報を参照して要素を組み立てる。

この流れのコードを、ChatGPTさんに作ってもらいました。（手抜き）
動作未確認です。（手抜き）

import React, { useState } from "react";

// Pコンポーネント
const Paragraph = ({ text }) => {
  return <p>{text}</p>;
};

// Divコンポーネント
const DivContainer = ({ children }) => {
  return <div style={{ minHeight: "50px", border: "1px solid #ccc", margin: "4px", padding: "4px" }}>
{children}

  </div>;
};

// Buttonコンポーネント
const MoveButton = ({ onClick }) => {
  return <button type="button" onClick={onClick}>click</button>;
};

// メインApp
const App = () => {
    // ①
  const [topParagraphs, setTopParagraphs] = useState(["1", "2", "3"]);
  const [bottomParagraphs, setBottomParagraphs] = useState([]);

  const handleClick = () => {
    if (topParagraphs.length === 0) return;
    const newTop = [...topParagraphs];     // ②
    const moved = newTop.shift();          // ②
    const newBottom = [...bottomParagraphs, moved]; // ②
    setTopParagraphs(newTop); // ③
    setBottomParagraphs(newBottom); // ③
  };

  return ( <div>
   <DivContainer>
    {topParagraphs.map(num => <Paragraph key={num} text={num} />)} </DivContainer>

    <DivContainer>
      {bottomParagraphs.map(num => <Paragraph key={num} text={num} />)}
    </DivContainer>

    <MoveButton onClick={handleClick} />
  </div>
  );
};

export default App;

HTML

<div>
 <p>1</p>
 <p>2</p>
 <p>3</p>
</div>
<div>
</div>
<button type="button">click</button>

useState()から取得したtopParagraphs配列とbottomParagraphs配列に、pタグのテキストが保存されます（①）。
ボタンが押されたら、topParagraphsとbottomParagraphsから、テキスト移動後の配列を作成します（②）。
setTopParagraphs()とsetBottomParagraphs()に作成した配列をセットすると、状態が変更されたことがReactに通知されて仮想DOMの生成が始まります（③）。

注目する点は、DOM APIを呼び出さずに画面が構築される点です。
通常ならdivにIDをつけてgetElementById()を呼び出すなどして、要素を取得しないといけません。
しかしReactは、何も気にせず非常に少ないコードで画面構成を変更できるのです。

 

規模の大きなプロジェクトで効果発揮

UIで実装しなければいけない項目が多くなると、ある項目に関するDOM要素変更が他の項目に影響する可能性が高くなります。この場合は、該当する他の項目のDOM要素更新が必要になるかもしれません。そのため、更新ロジックのミスや、更新忘れなどの不具合を引き起こします。

しかしReactは、最初から最後まで作り直すので、その可能性はとても低くなります。作成ロジックのみで更新ロジックは必要ないのです。
Reactを使わないケースでも、画面をすべて再構築することができますが、動きがあったり、更新頻度が高いときは動きが遅くなり使い勝手が悪くなるかもしれません。
それと比較すると、Reactは差分だけ更新するから速いのです。

作り直しなんて無駄なだけと思っていましたが、大きな利点がありましたね！

 

必要なら使おう

Reactは速くない。それどころか、仮想DOMの作成や仮想DOMの比較をしてるので遅い。
ですが規模の大きなプロジェクトでは、UI構築と保守の難易度を下げることができます。

絶対に使うべき、というケースはありませんが、機会があったら使ってみてください。

更新日：2025/12/02

書いた人（管理人）：けーちゃん

関連記事

スポンサーリンク

記事の内容について

null

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。