BuildContextの正体とInheritedWidgetの仕組み

Transcript

1. BuildContext の正体と InheritedWidget の仕組み 株式会社サイバーエージェント 河村 宇記(かわむら ひろき) / 2025新卒 FlutterKαigi 2025 FlutterKaigi 2025
2. 今日のテーマ 普段よく見るこのコード、何が起きているか説明できますか？ Widget build(BuildContext context) { final theme = Theme.of(context); final mediaQuery = MediaQuery.of(context); ... } 今日のゴール: BuildContext と InheritedWidget の仕組みをざっくり理解 & イメージを掴む BuildContext の正体と InheritedWidget の仕組み FlutterKaigi 2025
3. BuildContext の正体 BuildContext の正体と InheritedWidget の仕組み FlutterKaigi 2025
4. BuildContext の正体は「Element」 公式ドキュメント: "A handle to the location of a widget in the widget tree." "BuildContext objects are actually Element objects." Widget ツリーにおける Widget の位置へのハンドル（手がかり） BuildContext は実際には Element オブジェクト では、Element とは一体何なのか？ BuildContext の正体と InheritedWidget の仕組み FlutterKaigi 2025
5. Widget は「設計図」 Text('Hello') // ← これは設計図 Widget = Immutable な UI の宣言（設計図） 「どこに表示するか」の位置情報は持たない だからアプリのどこでも再利用できる → では、どうやって実際の画面を組み立てる？ BuildContext の正体と InheritedWidget の仕組み FlutterKaigi 2025
6. Element は「実体」 class Widget { Element createElement(); // Flutter がビルド時に呼び出す } Element = Widget（設計図）から作られる実体 ツリー内での位置情報を保持: 「今ツリーのどこにいるか」 「親や子は誰か」 Widget がツリーに組み込まれる時、createElement() で生成 この Element こそが、build メソッドの context として渡される BuildContext の正体と InheritedWidget の仕組み FlutterKaigi 2025
7. 改めて BuildContext の正体とは BuildContext = Element Widget がツリー内での自分自身の位置を知るための情報 Widget 設計図（位置なし） Element 実体（位置あり） BuildContext の正体と InheritedWidget の仕組み FlutterKaigi 2025
8. InheritedWidget の仕組み .of(context) の裏側 BuildContext の正体と InheritedWidget の仕組み FlutterKaigi 2025
9. InheritedWidget とは 下位ツリーから上位にアクセス & 状態の更新を通知する仕組みを持った Widget Theme.of(context) MediaQuery.of(context) この .of(context) でできること: 1. データを取得できる 2. データが変わると自動で再ビルドされる この処理を実現しているのが InheritedWidget です BuildContext の正体と InheritedWidget の仕組み FlutterKaigi 2025
10. InheritedWidget の仕組み context.dependOnInheritedWidgetOfExactType<Theme>() このメソッドが 2 つの仕事 をしている: 1. 探索: ツリーを上に辿って Theme を探す 2. 依存登録: 「依存リスト」に自分を登録 BuildContext の正体と InheritedWidget の仕組み FlutterKaigi 2025
11. 1. ツリーの探索 Element ツリーを上に辿って、指定された型を持つ InheritedElement を探索 Theme (InheritedElement) ↑ | ← 探索（高速: O(1) ） | 現在の Element ※親を一つずつ辿るのではなく、Element が持つ内部マップ _inheritedWidgets を使って O(1) で高速に検索 BuildContext の正体と InheritedWidget の仕組み FlutterKaigi 2025
12. 2. 依存関係の登録（購読） InheritedElement._dependencies (Map) ├─ Element A ← 登録済み ├─ Element B ← 登録済み └─ Element C ← 今回登録！ ↑ 呼び出し元が自分を登録 InheritedElement は、自分に依存している Element のリスト（_dependencies ）を保持 呼び出し元の Element が自分自身を依存リストに登録 更新時に、登録された全 Element に再ビルドを通知 BuildContext の正体と InheritedWidget の仕組み FlutterKaigi 2025
13. 改めて InheritedWidget の仕組みとは 探索 Element ツリーを上に辿る 高速検索（O(1)） 購読 依存リストに登録 更新時に通知 効率的なデータ伝播メカニズム BuildContext の正体と InheritedWidget の仕組み FlutterKaigi 2025
14. まとめ 1. BuildContext の正体 BuildContext = Element = Widget の位置情報を持つ実体 2. InheritedWidget の仕組み 高速な探索と依存リスト管理 さらに学ぶ: 公式ドキュメント & デバッグでより詳細な内部へ BuildContext の正体と InheritedWidget の仕組み FlutterKaigi 2025