Element Tree：RenderObjectとの関係性と動作原理

FlutterにおけるElement Treeとは？

Element TreeはFlutterの中間階層であり、Widget Treeに基づいて作成され、アプリケーションへのウィジェットの挿入を管理します。各要素インスタンスはツリー内の1つのウィジェットに対応し、その参照を保存します。要素とウィジェットの主な違いは、要素は再構築間でツリー内の位置を保持するのに対し、ウィジェットはbuildが呼び出されるたびに再作成される可能性があることです。

Element Treeが必要な理由

Element Treeがなければ、Flutterは効率的にUIを更新できません。毎回の再ビルドでRenderObject Treeを再作成すると、パフォーマンスは許容できないほど低下します。Element Treeは安定化装置として機能し、更新間でRenderObjectとStateへの参照を保持し、Flutterがレンダーツリーに最小限の変更のみを適用できるようにします。

要素の種類

Flutterは3つの主要な要素タイプを使用します：StatelessElement（StatelessWidget用）、StatefulElement（StatefulWidget用）、LeafRenderObjectElement、SingleChildRenderObjectElement、MultiChildRenderObjectElement（RenderObjectWidget用）。各タイプはウィジェットクラスに特化しており、要素がRenderObjectとどのように相互作用するかを決定します。

3層アーキテクチャにおけるWidget、Element、RenderObjectの関係

3層アーキテクチャはFlutterにおいて、Widget Tree（設定）、Element Tree（管理）、RenderObject Tree（レンダリング）から構成されます。Element Treeは接続リンクであり、Widgetから設定を読み取り、RenderObjectにコマンドを渡します。Element Treeがなければ、フレームワークは宣言的な記述と実際のレンダリングを効率的に同期できません。

要素がウィジェットとRenderObjectを結び付ける仕組み

要素がツリーにマウントされると、ウィジェットのタイプをチェックします。ウィジェットがRenderObjectWidgetの場合、要素は対応するRenderObjectを作成し、RenderObject Treeに追加します。ウィジェットがLeafRenderObjectWidgetの場合、要素はリーフRenderObjectを作成します。StatelessWidgetとStatefulWidgetの場合、要素は単に子要素のマウントを管理します。

abstract class Element {
  Widget widget;
  Element? parent;
  List<Element>? children;

  void mount(Element? parent, dynamic newSlot);
  void update(Widget newWidget);
  void unmount();
}

この簡略化されたコードはElementの基本構造を示しています。各要素は現在のウィジェット、親要素、子要素への参照を保存します。mount、update、unmountの各メソッドが要素とその関連するRenderObjectのライフサイクルを管理します。

要素のライフサイクル：生成から削除まで

各要素はFlutterにおいて、生成、マウント、更新、アンマウントというライフサイクル段階を経ます。これらの段階を理解することは、特にアニメーション、非同期操作、状態管理を扱う際に、予期しない動作のデバッグに必要です。

段階1：要素の生成

要素はウィジェットのcreateElementメソッドを呼び出して作成されます。StatelessWidgetの場合はStatelessElementが、StatefulWidgetの場合はStatefulElement（Stateオブジェクトも作成）が、RenderObjectWidgetの場合は対応するRenderObjectElementが作成されます。要素の生成は、ウィジェットがWidget Treeに最初に現れたときに発生します。

段階2：マウント（mount）

マウント中、要素はElement Treeに追加され、親要素を受け取ります。RenderObjectElementの場合、マウントはRenderObjectも作成し、それをRenderObject Treeに挿入します。ウィジェットがStatefulWidgetの場合、この段階でStateオブジェクトのinitStateメソッドが呼び出されます。

段階3：更新（update）

ウィジェットが新しい設定で再構築されると、要素はupdateメソッドを通じて新しいウィジェットを受け取ります。要素は古いウィジェットと新しいウィジェットのタイプを比較します。タイプが一致すれば要素は設定を更新し、一致しなければ要素はアンマウントされ、新しい要素が作成されます。これは「ウィジェットの変更」と呼ばれ、タイプ変更時に状態が失われる原因です。

段階4：アンマウント（unmount）

ウィジェットがWidget Treeから削除されると、要素のunmountメソッドが呼び出されます。要素はElement Treeから削除され、RenderObjectはRenderObject Treeから削除され、StatefulWidgetの場合はStateオブジェクトのdisposeメソッドが呼び出されます。アンマウント後、ウィジェットが同じ位置に再表示された場合、要素は再利用できます。

Element Treeにおけるキーの役割

キー（Key）は要素識別メカニズムであり、Flutterが古いWidget Treeと新しいWidget Treeのウィジェットを位置ではなく一意の識別子でマッチングできるようにします。キーは、要素の順序が変更される可能性がある動的リストを扱う際に非常に重要です（要素の追加、削除、並べ替え）。

キーがElement Treeに与える影響

キーがない場合、Flutterはツリー内の位置によって要素をマッチングします。古いツリーの位置0の要素は、新しいツリーの位置0のウィジェットに置き換えられます。順序が変更された場合、要素が混ざり合い、状態が失われたり、誤ったデータに結び付けられたりする可能性があります。キーはFlutterに位置ではなく識別子で要素を検索させます。

ValueKey、ObjectKey、UniqueKey

ValueKeyは単純な値（文字列、数値）を使用して要素を識別します。ObjectKeyはオブジェクト参照を使用し、要素に安定した文字列識別子がない場合に適しています。UniqueKeyは作成のたびに一意の識別子を生成し、各ウィジェットインスタンスが一意でなければならない場合に使用されます。

Column(
  children: items.map((item) => TodoItem(
    key: ValueKey(item.id),
    title: item.title,
    isDone: item.isDone,
  )).toList(),
)

この例では、item.idを持つValueKeyにより、リスト内の要素の順序が変更された場合でも、各TodoItemがその状態（入力フィールドのフォーカスなど）を保持します。キーがない場合、最初の位置の要素は、同じ位置の前の要素の状態を受け取ることになります。

Element Treeが状態を管理する仕組み

Flutterの状態（State）はウィジェットではなく、要素に保存されます。StatefulWidgetが再構築されて新しいウィジェットインスタンスを作成するとき、対応するStatefulElementは古いStateオブジェクトへの参照を保持します。新しいウィジェットは既存のStateにリンクされ、再構築間でデータを保持できます。

再構築時に状態が失われない理由

ウィジェットの再構築中、Flutterは新しいStatefulWidgetインスタンスを作成しますが、対応するStatefulElementはElement Treeに残ります。要素はStateでupdateメソッドを呼び出し、新しいウィジェットを渡します。これにより、Stateオブジェクトとそのデータは保持されます。状態の損失は、ウィジェットのタイプが変更されたとき、キーが変更されたとき、または要素がツリーから削除されたときにのみ発生します。

InheritedWidgetとElement Tree

InheritedElementは特別な要素であり、子要素がコンストラクターを介した明示的な受け渡しなしに親InheritedWidgetからデータを受け取ることを可能にします。InheritedWidgetが変更されると、InheritedElementはすべての依存要素に通知し、それらは再構築されます。このメカニズムはTheme、MediaQuery、Providerの基盤です。

• 依存関係 — 要素はdependOnInheritedWidgetOfExactTypeを呼び出すと、InheritedElementに依存するものとして登録されます。
• 通知 — InheritedWidgetが変更されると、フレームワークはすべての依存要素を再構築が必要としてマークします。
• 再構築 — 依存要素は次のフレームで再構築され、新しいデータに従ってUIを更新します。

Element Treeがパフォーマンスに与える影響

Element Treeはメモリを消費し、最初のレンダリング速度に影響を与えます。各要素は一定量のメモリを占有します。ウィジェットへの参照、親への参照、子要素のリスト、スロット、RenderObjectElement用の追加フィールドです。Element Treeを最適化すると、起動時間が短縮され、メモリ消費が減少します。

要素の再利用

Flutterは再構築中に要素を再利用しようとします。新しい設定のウィジェットが同じタイプとキーを持つ場合、要素は再作成されずに更新されます。これは、新しい要素を作成してマウントするよりも大幅に高速です。ただし、タイプまたはキーが変更されると、古い要素はアンマウントされ、新しい要素がゼロから作成されます。

RepaintBoundaryとElement Tree

RepaintBoundaryはRenderObject Treeに独立したRenderRepaintBoundaryを作成し、ツリーの一部を分離します。Element Treeレベルでは、RepaintBoundaryは特別な要素を作成せず、SingleChildRenderObjectElementを使用します。違いはRenderObjectレベルで現れます。RepaintBoundaryの内容が変更されると、分離された領域のみが再描画されます。

表が示すように、RepaintBoundaryは変更領域を分離することで再描画時間を大幅に短縮します。Element Treeレベルでは、追加の設定は不要で、変更可能なウィジェットをRepaintBoundaryでラップするだけです。