
何も考えずにいたら開発どころではなくなってしまったので画面ごとに編集ファイルを分ける(main.dartをダイエットする話)
現状がどんな感じかソースコード全文貼ってみようかと思ったのですが、なんの意味もないと思ったので割愛します。まあと言っても500行弱なので、大袈裟に騒ぎ立てるほどでもないのですが・・・
そんな初学者の質問力はこんな感じです。

結論としては、スクリーン(画面)、ウィジェット(コンポーネント)、モデル(データクラス)、サービス(ビジネスロジック)、状態管理、テーマ、ルーティング、ユーティリティあたりでわけるのが良きとのことです。
たしかに、再利用できるウィジェットとかデータモデルとか、ビジネスロジックやらテーマやらは別ファイルにしといた方が絶対良さそうですね。。。
一方で、状態管理とルーティングとユーティリティあたりはファイルとして分けるイメージがあんまりつかずですね。。。GPT先生のサンプルは下記。
lib/
├── models/
│ ├── user_model.dart
│ └── product_model.dart
├── screens/
│ ├── home_screen.dart
│ └── login_screen.dart
├── widgets/
│ ├── custom_button.dart
│ └── custom_card.dart
├── services/
│ ├── api_service.dart
│ └── database_service.dart
├── state/
│ ├── app_state.dart
│ └── user_provider.dart
├── theme/
│ └── app_theme.dart
├── routes/
│ └── app_routes.dart
├── utils/
│ ├── constants.dart
│ └── utils.dart
└── main.dart
ぎりぎり今時点では画面(スクリーン)と要素(ウィジェット)くらいしか書いてなかったので、まだこのタイミングなら分割は難しくなさそうですね。

コード全量ぶん投げて分割してくれるかな・・・と思ったらものの10秒くらいでかえしてくれた・・・果たしてこれは動くのか・・・

ぎゃー、一箇所定義漏れと参照間違いがあったけど、なんのことはない。綺麗に分割してくれたよ・・・もうこれからは悩む前に無理そうでもGPT先生に突っ込んでみよう。。。
で、いったん今は画面とウィジェットで切り分けられたわけですが、処理の部分はきりわけなくていいのかな。
目標設定画面にshared_preferencesに書き込む処理とか直書きしているのですが・・・聞いてみよう。

特に詰まる部分もなく切り分けに成功してしまった。。。500行あったmain.dartが22行になってしまったよ・・・先にやっといてよかった。。。のか、実はいったんmain.dartで作りきってから切り分けてもらった方がAI的にはやりやすかったりするのかな・・・謎だ・・・

結果、preferences_service.dartのコード量は若干増えたけど、いいのかね。どうなんだろう。状態管理とごっちゃになるな。

やっぱり別概念ですよね。ということでごにょごにょやって、結局下記のディレクトリ構成に落ち着きました。
lib/
├── main.dart
├── firebase_options.dart
├── models/
│ └── progress_model.dart
├── screens/
│ ├── home_screen.dart
│ ├── my_home_page.dart
│ ├── data_screen.dart
│ ├── edit_profile_screen.dart
│ ├── set_goal_screen.dart
│ ├── notifications_screen.dart
│ └── splash_screen.dart
├── services/
│ ├── preferences_service.dart
│ └── dialog_service.dart
├── state/
│ └── progress_provider.dart
├── widgets/
│ └── custom_drawer.dart
次回は元々やっていた日数カウント処理の話に戻りたいと思います。
いいなと思ったら応援しよう!
