22卒つよつよLTのスライド資料です！ タイトルが切れちゃってるけど..

1. LT 土佐陽生
開発しているflutterアプリをリファクタリング
してみた

2. 自己紹介
• 土佐陽生(とさ)
• twitter(@tosa_now)
• 明治大学理工学部情報科学科3年
• Go, Ruby, PHP, Dart(flutter)
• チェンソーマンにハマっています

3. flutter/Dart概要
(1)
Flutter is Google’s UI toolkit for building beautiful, natively compiled
applications for mobile, web, and desktop from a single codebase.
-> (ぼんやり訳) iOS, android, webアプリを作成できる！
(引用元: https://flutter.dev/)

4. flutter/Dart概要
(2)
• HotReload
• Material Designにのっとったアプリ開発がとてもやりやすい！
• Dartと呼ばれる一つの言語で作成されている

5. 作成中のアプリケーション

6. 作成中のアプリケーション

7. ディレクトリ構造

8. リファクタリングしようと思ったきっかけ
• コードが汚くなっていると開発意欲が下がる
• 初めてflutterで作成したアプリだったので学習していく内にいい書き方がわ
かってくる
• これからも開発が続きそう
• Fat ができ始めてきた

9. リファクタリング

10. 静的解析の導入
• twitterのエンジニアさんに教えてもらった
• 真っ赤っか(Dartは型チェックが緩め)
• まずはこれを修正していくことでよりいいコードを目指す
analysis_options.yaml の導入

11. constやfinalをきちんとつける
静的解析(1)

12. asでしっかりと型を指定する
静的解析(2)
• dynamic型じゃだめ！しっかりとキャストしてあげる

13. を に変更
静的解析(3)

14. 改善できなかったところ
静的解析(4)

15. VscodeからAndroidStdioへ
リファクタリング(2)
• メモリの効率化(8GBの環境だととても効く)
• 名称の変更が簡単にできる(Android Studio -> refactoring)
• performanceの計測ツールがある

16. リロードが頻繁に起こっている箇所の特定
リファクタリング(3)
• flutter performanceを使用してみてみる！
• レンダリング->データの取得->
レンダリング->データの取得…
と永遠にリロードが起こっている箇所が…

17. ルーティングの修正
リファクタリング(4)
• モデルを意識して組み立てる
• railsっぽく…

18. 状態管理の見直し
リファクタリング(5)
• 状態管理をすべきところにロジックを書きすぎていた(service層へ移動)
• こちらもモデルを中心に考えて作成(homeroomのデータは
homeroom_provider.dartに)
現在はここを取り組み中！
このあとはWidgetの切り分けとかやっていきたい…(願望)

19. まとめ
• 静的解析ツールを用いて∼らしくないコードをきれいにしていく
• ボトルネックになっている場所を特定して改善
• 処理をあるべき場所に移す
• ルーティングはモデルを意識して変更
• でも一番は..(テストを書きましょう)
• ios/androidアプリの開発難易度が下がります！
• flutter楽しいです！！

20. ありがとうございました！