Zenn
🐧

【 Flutter】非エンジニアがMVVMを理解してみる

に公開
Flutter
趣味
tech

こんにちは〜道上です！
https://zenn.dev/yochi/articles/4deca630e30094

Flutterでアプリを作っていると、
「構造がよくわからなくてごちゃっとする」
「ロジックがあちこちに散らばってる…」
…そんな悩みにぶつかること、ありませんか？

私はプログラマではありませんが、実際のアプリ開発の中でそうした悩みに直面し、
MVVMという考え方に出会って、構造がすっきり整う感覚をつかむことができました。

この記事では、非エンジニアの私でも理解できたMVVMの考え方をかなりシンプルにまとめています。

同じように「なんとなく構造がモヤっとしている…」と感じている方に、
少しでもヒントになればうれしいです！

MVVMってなに？

-MVVM = Model - View - ViewModelの頭文字を取ったアーキテクチャ構造です。
-ロジックを分離することで
-見た目 (View)
-データ管理 (Model)

状態の変更や処理を行う中間層 (ViewModel)

というように任務を分けて、コードを清潔にしていこうね！っていう思想です。

まずは、これを実際にFlutterのコードで見てみましょう。

実装例: カウントアップアプリ

今回は「カウントアップ」を例にします！
ボタンを押すと数字が増える、とてもシンプルなアプリです。

Githubこちら↓
https://github.com/yoichi4141/MVVM_riverpod

:構成

lib/
├── model/
│   └── counter_model.dart
├── view/
│   └── counter_page.dart
├── view_model/
    └── counter_view_model.dart

:Model

@freezed
class Counter with _$Counter {
  const factory Counter({ required int value }) = _Counter;
}

「ただの数値」を持つデータクラスです。

:ViewModel

class CounterViewModel extends StateNotifier<Counter> {
  CounterViewModel() : super(const Counter(value: 0));

  void increment() {
    state = state.copyWith(value: state.value + 1);
  }
}

final counterViewModelProvider =
  StateNotifierProvider<CounterViewModel, Counter>((ref) => CounterViewModel());

Viewの代わりに状態を持つ層で、ユーザーの操作に応じて数値を更新します。

:View

final counter = ref.watch(counterViewModelProvider);
final viewModel = ref.read(counterViewModelProvider.notifier);

Text('現在の値: ${counter.value}')
FloatingActionButton(onPressed: viewModel.increment)

UI部分は、stateをwatchして、動作をviewModelに伝えます。
これで「状態は状態で」分離された理想のコード構造になります。

なんでわざわざMVVMにするの？

ぱっと見て、「まとまりすぎてる」「素人は読めない」と思われるMVVMですが
メリットも多いです。
-UIの部分はデザイナーが、ロジック部分はプログラマが分業できる
-テストがしやすい
-見通しよくなる
実際に素人の私がやってみても
「あ、このコードはUIだけを書いてる」
「こっちはロジックだけ書いてる」
って感じられるようになりました。

まとめ

MVVMは、本当に簡易なアプリにも使える構造です。
見た目をViewに、状態管理をViewModelに分ける。
たったそれだけで、開発がすごく楽になると感じました。
是非試してみてください！

Discussion