【DeNA TechCon 2025】大規模Flutterプロジェクトにおける状態管理
1.4K Views
February 12, 25
スライド概要
DeNA TechCon 2025 DeNA Tech Community Lightning Talks Speaker #8
DeNAでは、言語や技術領域を軸とした、技術コミュニティ活動が活発に行われています。このセッションは各技術コミュニティに所属するエンジニアが各言語・技術領域に関するLightning Talk セッションを行います。
◆ チャンネル登録はこちら↓
https://www.youtube.com/c/denatech?sub_confirmation=1
◆ X(旧Twitter)
https://x.com/denaxtech
◆ DeNA Engineering
https://engineering.dena.com/
◆ DeNA Engineer Blog
https://engineering.dena.com/blog/
◆ DeNA × AI Day ‖ DeNA TechCon 2025 公式サイト
https://techcon2025.dena.dev/
DeNA が社会の技術向上に貢献するため、業務で得た知見を積極的に外部に発信する、DeNA 公式のアカウントです。DeNA エンジニアの登壇資料をお届けします。
関連スライド
各ページのテキスト
⼤規模Flutterプロジェクトにおける状態管理 From Flutter.Thursday ライブコミュニティ事業本部Voice Pococha部システムグループ 24新卒 ⽥村 駿典 1 © DeNA Co., Ltd.
⾃⼰紹介 名前：⽥村 駿典(タムラ シュンスケ) 年次：24新卒 所属：ライブコミュニティ事業本部Voice Pococha部システムグループ 職種：クライアントエンジニア(Flutter) 2 © DeNA Co., Ltd.
Flutter.Thursday とは 3 © DeNA Co., Ltd.
Flutter.Thursday とは ● 社内のFlutter勉強会コミュニティ ● 毎週⽊曜⽇ 14:30 ~ 15:30 ● 毎週Topicを募って、それについてガヤガヤお話 ○ 最新のリリース情報 ○ 気になる記事を持ち寄って ○ 業務でのお困りごと相談 ○ etc... 4 © DeNA Co., Ltd.
⼤規模Flutterプロジェクトにおける状態管理 5 © DeNA Co., Ltd.
6 © DeNA Co., Ltd.
Voice Pococha について DeNA内で最⼤級のFlutterプロジェクト ● lib配下で (※⽣成されるファイル抜き) ○ ファイル数：2700ファイル以上 ○ コード⾏数：18万⾏以上 // 計測に使用したコマンド cloc ./lib --vcs=git --include-ext=dart --fullpath --not-match-f='(\.freezed\.|\.g\.)' --not-match-d='/generated/' 7 © DeNA Co., Ltd.
状態管理ライブラリ Bloc 状態管理ライブラリにBlocを採⽤(https://bloclibrary.dev/) State UI Bloc Event 8 © DeNA Co., Ltd.
Blocを使う上で取り⼊れている⼯夫 1. Stateの基底クラスの定義にsealedクラスを採⽤ 2. 1機能を表現するFeatureクラス 9 © DeNA Co., Ltd.
1. Stateの基底クラスの定義にsealedクラスを採⽤ 10 © DeNA Co., Ltd.
1. Stateの基底クラスの定義にsealedクラスを採⽤ The type 'BaseTodoPresenterState' is not exhaustively matched by the switch cases since it doesn't match 'TodoPresenterInitialState()' 11 © DeNA Co., Ltd.
2. 1機能を表現するFeatureクラス FlutterにはWidgetTreeの深さに限界があることをご存知ですか？ 正確にはFlutterのWidgetTree⾃体に深さの限界があるわけではない WidgetTreeが深くなる ⇩ 関数の再起呼び出しがTreeの深さ分⾏われる ⇩ 呼び出し回数の上限がきてStackOverflowエラーが起こる (詳細issue) 12 © DeNA Co., Ltd.
2. 1機能を表現するFeatureクラス BlocをUI側で使⽤する際にProviderを採⽤している ⇩ Providerは１Provider => １Widgetと同じ扱い ⇩ 機能がたくさんある画⾯はたくさんBlocを使⽤する ⇩ Providerが増えてTreeが深くなる ⇩ StackOverflowエラー 13 © DeNA Co., Ltd.
2. 1機能を表現するFeatureクラス そこでFeatureクラス ● １機能を実現するために必要なBlocなどをまとめたクラス ● このFeatureクラスのProviderを作ることで、作成しなければならな いProviderの数を減らすことができる 14 © DeNA Co., Ltd.
15 © DeNA Co., Ltd.
Blocを使う上で取り⼊れている⼯夫 1. Stateの基底クラスの定義にsealedクラスを採⽤ 2. 1機能を表現するFeatureクラス 16 © DeNA Co., Ltd.
ご清聴ありがとうございました！ 17 © DeNA Co., Ltd.