【ITニュース解説】⚡ React Internals: Virtual DOM 🖼️ vs Fiber Node 🔗 for Performance Explained

Reactは、ユーザーインターフェース（UI）を効率的に、そしてスムーズに更新するために、いくつかの高度な内部メカニズムを利用している。その中でも特に重要なのが、Virtual DOM（仮想DOM）とFiber Nodeという二つの概念である。これらは密接に関連しているが、それぞれ異なる役割を持っており、Reactアプリケーションのパフォーマンスを支える基盤となっている。システムエンジニアを目指す上で、これらの仕組みを理解することは、Reactの動作原理を深く把握し、より良いアプリケーションを開発するために非常に役立つ。

まず、Virtual DOMについて説明する。Virtual DOMは、その名の通り「仮想の」DOMであり、ブラウザが実際に表示しているHTML要素の構造（リアルDOM）を、JavaScriptオブジェクトとしてメモリ上に表現したものである。Reactは、UIを直接リアルDOMに描画するのではなく、まずこのVirtual DOMのコピーを作成し、それに対して更新を行う。なぜこのような回りくどいことをするのかというと、リアルDOMの操作は非常にコストが高い処理だからである。リアルDOMを直接操作すると、ブラウザはレイアウトの再計算や再描画といった重い処理を実行する必要があり、これが頻繁に行われるとUIがカクつき、ユーザー体験を損なう原因となる。

Virtual DOMの動作原理は以下のようになる。Reactコンポーネントの状態（state）やプロパティ（props）が変更されると、Reactは新しいUIの状態に基づいた新しいVirtual DOMツリーをメモリ上に構築する。次に、この新しいVirtual DOMツリーと、一つ前の状態のVirtual DOMツリーを比較し、どこが変更されたかを効率的に検出する。この差分検出によって、実際に変更があった部分だけが特定され、その変更箇所だけをリアルDOMに適用する。この仕組みにより、ReactはリアルDOMへの直接的な更新回数を最小限に抑え、パフォーマンスを大幅に向上させている。また、開発者はUIの状態を宣言的に記述するだけでよく、Reactが抽象的に変更を計算し、必要な更新を自動的に行ってくれるため、UIの状態管理や再レンダリングのロジックをよりシンプルに考えることができるという利点がある。

次に、Fiber Nodeについて説明する。FiberはReact 16で導入された新しい調停（reconciliation）エンジンであり、Virtual DOMが「何を」更新すべきかを計算するのに対し、Fiberは「どのように」「いつ」更新すべきかを決定し、実行する役割を担っている。Reactアプリケーションの各コンポーネントは、内部的に一つのFiber Nodeに対応していると考えることができる。このFiber Nodeは単なるデータ構造ではなく、ReactがUIを更新するための「作業単位」である。

各Fiber Nodeには、そのコンポーネントに関する様々なメタデータが格納されている。具体的には、コンポーネントのタイプ（例：Div、Button、カスタムコンポーネント）、現在のプロパティ（props）、現在の状態（state）、そして親、子、兄弟のFiber Nodeへの参照ポインタが含まれる。さらに重要なのが「エフェクトタグ」という情報で、これはそのFiber Nodeに対応するコンポーネントにどのような変更（追加、削除、更新など）が必要かを示す。

Fiberが導入された最大の理由は、従来のReactの調停プロセスが抱えていた問題の解決である。React 15までの調停プロセスは、UIツリー全体の差分検出とリアルDOMへの更新を一度に同期的に実行していた。そのため、UIツリーが非常に大きく、多数のコンポーネントが同時に更新されるようなケースでは、この処理がメインスレッドを長時間ブロックし、UIがフリーズしたり、アニメーションがカクついたりする原因となっていた。

Fiberはこの問題を解決するために、「増分レンダリング（incremental rendering）」というアプローチを採用している。Fiberは、UIの更新作業を小さな単位（各Fiber Nodeの処理）に分割し、これらの作業を優先度付けし、必要に応じて中断したり、再開したりする機能を備えている。例えば、ユーザーの入力に応答するアニメーションのような緊急性の高い更新は、バックグラウンドで行われているデータ取得のような低優先度のタスクよりも優先して処理される。このようにして、Fiberはメインスレッドを長時間ブロックすることなく、UIを常にスムーズに保つことが可能になった。Fiberは、更新のスケジューリングを担当し、ReactがUIの変更をより細かく、きめ細かく制御できるようにしている。

それでは、Virtual DOMとFiber Nodeがどのように連携して機能するのかを具体的に見ていこう。まず、コンポーネントの状態やプロパティに変更が発生すると、Reactは新しいVirtual DOMツリーを構築し、古いVirtual DOMツリーとの差分を検出する。この差分検出によって見つかった変更箇所一つ一つが、Fiber Nodeとして表現される「作業単位」となる。例えば、「このテキストコンポーネントの表示内容が変わった」「このボタンコンポーネントが新しく追加された」といった変更が、それぞれのFiber Nodeにエフェクトタグとして記録される。

次に、FiberエンジンがこれらのFiber Node（作業単位）を受け取り、スケジューリングを開始する。Fiberは、これらの作業をメインスレッドの空き時間を利用して少しずつ実行していく。もし実行中に、ユーザーの入力イベントなど、より高い優先度のタスクが発生すれば、Fiberは現在の作業を一時停止し、高優先度のタスクを処理してから、以前の作業を再開することができる。このようにして、Fiberは更新の順序、タイミング、および中断・再開を柔軟に制御し、UIの応答性を維持しながらリアルDOMを効率的に更新していくのである。Virtual DOMは「何を」更新するべきかを特定し、Fiberは「どのように、そしていつ」その更新を実行するかを管理しているという関係である。

Virtual DOMとFiber Nodeの主要な違いをまとめると、Virtual DOMはメモリ上にUIの状態を表現する「データ構造」であり、現在のUIがどのような見た目であるべきかを示すスナップショットである。それ自体はUIを増分的に更新する方法について何の知識も持っていない。一方、Fiber Nodeは、個々のVirtual DOMノードに関連付けられた「作業単位」であり、コンポーネントのプロパティ、状態、エフェクトタグ、そして親や子、兄弟へのポインタといったメタデータを保持している。Fiberは、これらの情報を使って、ReactがリアルDOMをどのように、いつ、どのような順序で更新すべきかを管理する調停エンジンの中核をなす存在である。

結論として、Virtual DOMが変更点を効率的に計算する役割を担い、Fiber Nodeがその計算結果に基づいた更新作業を柔軟にスケジューリングし、実行する役割を担っている。この二つのメカニズムが連携することで、Reactは大規模なアプリケーションにおいても、宣言的なUI記述のメリットを享受しつつ、高いパフォーマンスと滑らかなユーザー体験を提供することを可能にしているのである。Reactの内部におけるこれらの仕組みを理解することは、複雑なUIを持つアプリケーションの開発において、性能上のボトルネックを特定し、最適化を行うための重要な洞察を与えてくれるだろう。