Widgetツリー構造とRebuild最適化
2025 年 11 月 4 日 火曜日 by sumikawahはじめに
Flutterは「宣言的UI（Declarative UI）」という考え方を採用しています。
これは「状態（State）」が変化したときに、UIをその都度再構築（Rebuild）する仕組みです。
仕組み自体はシンプルで強力ですが、アプリが複雑になると「どこが再描画されるのか」「無駄な再構築が発生していないか」を意識することが重要になります。
本記事では、FlutterのWidgetツリー構造とRebuildの仕組み、そしてパフォーマンスを最適化する考え方について整理します。
Widgetツリーとは？
Flutterの画面は「Widgetツリー」と呼ばれる階層構造で構成されています。
ツリーは大きく以下の3つの層に分かれています。
- ・Widget：UIの設計図。軽量な不変オブジェクト（immutable）です。
- ・Element：Widgetのインスタンスを実際に管理し、ツリー構造を構築する層です。
- ・RenderObject：実際に描画やレイアウトを担当する層です。
FlutterのWidgetはあくまで「設計図」であり、頻繁に作り直されても大きなコストはかかりません。
重要なのは、Widgetを作り直しても、ElementやRenderObjectがうまく再利用される点です。
