本セッションの登壇者
セッション動画（YouTubeチャンネル登録もお願いします。）
Flutter上級者を目指そうというお話をさせていただきます。よろしくお願いします。
kikuchyと申します。FlutterKaigiというコミュニティとかをやっています。
Flutterの上級テクニックというお題をいただきまして、何ができたらFlutter上級者かな? というところを考えていたんですけれども、
え、そんなのあるっけ? というのが正直なところです。なぜならば
Flutterは簡単だから、という点を強く推していきたいところなんですけれども、とはいえ難しいかもしれないというトピックはやっぱりありますので、こちらのトピックについて軽く説明をして、主になるものをご紹介して、後程、ご視聴いただいた皆様が自分で調査ができるような、そういった材料を提供する、といったところを今日のゴールにしたいと思います。よろしくお願いします。
パフォーマンスチューニング
最初のトピックはパフォーマンスチューニングです。
Flutterは、基本的には60fpsで動作していますが、Widgetの組み方が悪いとfpsが低下することがあります。頻繁に大規模にWidgetのツリーを更新したりとか、あと画面外でアニメーションが発生していたりとかすると、fpsが低下することがありますね。
改善の仕方はケースバイケースです。原因によっては、Widgetの構造の組み替えが必要になったりして、デザインの都合が満たせなくなったりすることもありますので、プロダクトの仕様とか、その辺と相談になることがあるかもしれません。
とはいえ、改善の基本方針というのは一貫してまして、右に出したようなパフォーマンスモニターを使って原因箇所を特定して、あとツリーの広範囲を再描画させないような構造に設計を変えるとか、あとconst修飾子を付けてWidgetがなるべく再構築されないような方法を採ること、という感じになります。
以下に(パフォーマンスチューニングに関する)具体的な資料のURLを用意したので、ご覧になってください。
- 公式
- monoさんのブログ
- itomeさんのブログ
- DeNA Tech Conf 2022での砂賀さんの発表: 動画 / スライド
自動テスト
次のトピックは自動テストです。
書くだけなら難しいことはないんですけれども、おざなりにされがちですので、やってるチームは上級という印象です。
テストに関してはですね、
- テストの範囲をどうするか
- 実行のタイミング
- テスト可能な設計かどうか
みたいな話題があって、これだけで1時間以上話せてしまう内容ですので、こちらについては以下の(テストに関する)資料を見ていただいて、こういったテストの方法があるんだな、ということを理解してもらえれば嬉しいかなと思います。
- 公式
- DroidKaigi 2019での拙発表: 動画 / スライド
- itomeさんのブログ
自動コード生成
次は自動コード生成です。
freezedとか、あとjson_serializableなど有名なパッケージでおなじみですが、メタデータをもとにDartのコードを生成することです。
どちらかといえば、Flutterではなくてその言語のDartの話題なんですけれども、Flutterでは動的なメタプログラミングは禁止されているので、実質的にはFlutter固有の話題かな、という感じですね。
言語機能として、このコード生成をサポートするStatic Metaprogrammingの議論が進んでいますが、まだ取り込まれていません。現在のところは下に挙げたようなツール群を使って、コード生成を行うことになります。
このコード生成の難しさをいうと、まずドキュメントが少ないというのが挙げられます。公式には一部のツールのドキュメントしかなくて総合的なドキュメントは今のところ見当たりませんでした。最近は、パッケージのREADMEが充実してきたので、各ツールはどのように使えばいいのかがわかるようになってきたと思います。
そのツール類なんですけれども、複数パッケージが関連していたりとかして、ドキュメントなしではそれぞれの理解が難しかったり、あとDependency Hellにはまることもあります。それからツールの名前が、buildとかanalyzerとか、Googlabilityがとても低いので、検索するのが大変といったところも難しさの要因ですね。結局のところは動作するパッケージのコードを読むのが一番わかりやすいかなと思います。
(自動コード生成の具体的な話は)こちらに挙げたfreezedやjson_serializableなどを読むのがお勧めです。
- 拙記事
- roboさんのスライド
- 実プロダクトのコードリーディングもお勧め
リアクティブプログラミング
次はリアクティブプログラミングです。
これも言語の話題で、リアクティブプログラミング(Rx)とかリアクティブエクステンション自体の概念は言語に関わらない話ではありますけれども、ただ、一部のパッケージとかプラグインが、継続的に変化する値をこの概念で表現していたりします。
ただ、RxのObservableとDartのStreamはまあ似てはいるんですけれども、実際には違う挙動がちらほらあったりします。こちらに挙げたURLなどを見ていただくと違いがわかりやすいかなと思います。
オペレーターについては、RxMarblesなどを見ていただくとわかりやすいと思いますので、こちらを参考にしてみてください。
状態管理
時間が押していますが、最後に状態管理。Flutterのエンジニアが大好きな話題です。
なぜ難しいかというと、ここに挙げたような設計の難しさが全部詰まっているからという感じです。それから、実現するためのパッケージも乱立していることがそれに拍車をかけているかなと思います。
どれを使えば問題がすべて解決できる、みたいなことはないのですが、いくつか主流な流派があるので、それを把握しておいて、チームや人によって扱いやすさに違いがあると思うので、それを選択肢にできると上級の人と言えるかな、と思います。
(状態管理については)こういった資料とか見ていただいて、どんな選択肢があるのかを知っていただくといいかなと思います。
はい、以上です。ご清聴ありがとうございました。
