FlutterKaigi2024のコードから学ぼう！
2024年11月21日(木)〜22日(金)にFlutterKaigiが開催されます！
そのFlutterKaigiの公式アプリが先日公開されまして、そのソースコードも閲覧できるようです🙌
今回はFlutterKaigiを運営している凄腕エンジニアの方々のソースコードが見れるのでは!?ということで、
自分の勉強がてらアプリのコードをメインでざっと見てみて「良いなぁ」と思った点をまとめます🚀
依存関係かっこいい！
下記のREADMEを見てもらえばわかるのですが、melosを使用して複数のパッケージに分けて管理しています。
これにより、依存関係が厳格となり間違いが少なくなります。
（下記の記事が同じようにパッケージを分けて管理しており、詳しく説明もあったのでとてもわかりやすかったです🙏）
今回の場合だと、
例えばrepositoryに関わるものは packages/common/data/lib/src/repository の中にまとめられているのですが、
「pubspec.yamlによってrepositoryはappのソースコードには依存していない」
「逆にappの方からrepositoryに依存しているため依存関係を間違えることがない」
感じになっています。
また、data層はFlutterに依存しておらず、BuildContextを書こうにも書けない作りになっており、依存ミスを防ぎ「テスト難しい…」みたいな状態になりにくいという効果もあります。
1パッケージにまとめる場合に比べ、実装量や管理コストが増加しそうですが、
長期的に続くかもしれないプロダクトの場合は積極的に取り入れていきたいですね…！
（また、はじめからやっておかないと後から「依存関係ぐちゃぐちゃで変えるのむずい…」となりかねないので、やるならできる限りはじめから取り入れておきたいですね）
accessibility_tools知ってた？
僕はこのプラグインを知りませんでした…。
押しづらいボタンがあると「ムムっ」となるタイプなのですが、
このプラグインを使用するとMaterial Designの最小タップ範囲を満たしていないものは表示してくれたりします。
↓こんな感じで教えてくれるようです！
デザイナーの方がアクセシビリティの観点を踏まえて、
きっちりデザインを決めてくれているプロダクトなら必要ないかもですが、
そうではない場合もこれを基準に「ちょっと押しづらいかもなんでデザイン調整こんな感じどうですか？」とかやり取りできると良いですね！
GET_STARTEDが参考になるぅ
僕が携わっているプロダクトではVSCodeをメインに使用し、
fvmでバージョン管理しているところが多いのですが、
そんなプロダクトであればこのGET_STARTEDを流用できる部分があるのではと思いました！
また、地味にAndroidStudio / Xcodeのバージョンなどの記載はありがたいですね…。
「Xcodeのバージョン最新版だと動作しない！」ということがたまにあるので、
プロダクトに関わるエンジニア間で動作確認しているバージョンを共有したいですね🚀
（「AndroidStudioが必須ではない」など勉強になることもあるので一読すると良さそうです😻）
analysis_optionsが厳格
analysis_optionsを見ていただければと思うのですが、数がとても多いです。
flutterのデフォルトで使われるflutter_lintsより数十個多いのではと思います。（もし違ってたら教えてください！）
個人的にはより厳格な方が好きで、
人によって書き方が違ったりエラーを引き起こしやすくなったりするのは避けたい派なので良いなぁと思いました！
※本当に参考までにですが、使われているものの中から個人的に好きなのを2つほどピックアップします。
require_trailing_commas
保存時のフォーマットを有効していたりすると、自動で末尾にコンマがつきます。
「引数が多くなってきて見づらい…」みたいな状況が生まれにくくなるので、ONにするのが好みです。
unawaited_futures
非同期処理を行う際に「 await を忘れているのか？」「 await したくない箇所なのか？」がわからなくなるので、
明示的に await が必要ないことを表すために unawait を使うのが好みです！
debugFillProperties使ってる？
上記のlintルールにも関連するのですが、 diagnostic_describe_all_properties を使用し、
WidgetにてdebugFillProperties をoverrideしているようです。
（webの方はこのlintルールをignoreしていたりするようですが）
↓参考コード
これをすることによりdebug時にWidgetツリーにて値の確認がしやすくなります！
下記の動画がわかりやすいです。
個人的には書く量が増えたりするので使ってなかったりしますが、
なんか「画面の値変わんないんだけど😡」みたいな経験のある人はデバッグをよりしやすくするために導入するのも良さそうですね！
（「めちゃ使ってる！」という方がいらっしゃれば教えてください！）
Repositoryのfinal class
final class 使ってますか？
これはDart3からの新機能で「クラスの継承、できないからねー」というのを伝えるものです。
今回はRepositoryのコードに使っていることがあるようで、
確かにDartは暗黙的インターフェースで意図しない継承を量産できてしまうので、
もう継承してほしくないものには予めつけておくと保守性高まりそうですね！
↓参考コード
最後に
「ここの認識間違えてない？」や「このコードも参考になったよー！」などあれば、優しくご教示いただければ嬉しいですっ！
それではFlutterKaigi、一緒に楽しみましょうっ！！🙌
Discussion