5
0

More than 1 year has passed since last update.

Flutterにおけるアーキテクチャを勉強します

Last updated at Posted at 2023-07-12

結局MVVMってなんなの?使うメリットは?そもそもアーキテクチャって何?
という超初心的なところから学んでいく。

アーキテクチャとは

ざっくりとした概要を下記リンクから抜粋

アプリケーション・アーキテクチャは、アプリケーションの設計と構築に使用されるパターンと手法を記述したものです。アプリケーションを構築する際に従うべきロードマップとベストプラクティスが提供されるため、使用することでアプリケーションが適切に構造化されます。
とのこと。

MVVMとは

アーキテクチャパターンにもさまざまあるが、今回はMVVMにスポットを当ててそのメリットや考え方について学んでいく。

利用するメリット

上記のサイトより抜粋。
ーーー
・状態管理がシンプルになる
・テストが容易になる
・コードの再利用性が高まる
・コードの可読性が向上する
・開発効率が向上する
ーーー
コードの構成を大きくmodel、view、viewmodelと役割で分離させることで上記のメリットが生まれ、保守性も高まるということがわかった。

考え方

上記のサイトが1番初心者でも飲み込みやすかった。
抜粋すると↓
ーーー
MVVM の構成要素の基本的な考えは
View は UI (Widget) を描画(出力)し、ユーザからの入力データを受け取ります。
ViewModel は View から入力された状態(データ)を適切に変換して Model として持ちます。また、Model の状態(データ)を View 渡して画面の更新を促します。
Model は状態(データ)を保持し、それがどう変換されて画面に描画されるかは知りません。
であり View、ViewModel、Model の 3 つです。

なので厳密にいうとこの README にあるアーキテクチャの図は MVVM だけではなく Repository pattern も含まれています。
Repository pattern はデータソースへのアクセスを抽象化するためのデザインパターンです。ViewModel が持つことになりますが、ViewModel 側からすると Repository とデータの形式だけを取り決めるだけで、入手先がサーバからなのか、ローカルの DB なのか、オンメモリなのかなどは知りません。

ここまでが、MVVM + Repository pattern の簡単な説明です。
ーーー

関連パッケージ

大体の概要は把握できたのでMVVMを利用していくにあたっての重要なパッケージとその役割を学んでいく。

riverpod

状態管理とDI(依存性注入)を簡潔におこなうためのパッケージ。
グローバル定数としてProviderを宣言できるため、どこからでも状態にアクセスできるようになる。
riverpodに加えてflutter_hooksも同時利用する場合はこちら↓

Providerには複数の種類があり、それぞれに適した状態管理ができる。
FutureProvider
  非同期で取得した値を提供する
StreamProvider
  断続的に最新の値を提供する
StateNotifierProvider
  外部から変更可能な状態と、状態操作メソッドクラスを提供する
などなど

freezed

immutable(不変)なオブジェクトとそれに必要な機能を自動生成してくれるパッケージ。
詳しくはこちら↓

dio

API通信を実行するためのパッケージ。
通信ログを簡単に取ることができたり、タイムアウトの時間を指定することができる。

flutter_hooks

UIの状態管理をサポートするパッケージ。
state情報へのアクセスが非常にしやすくまた、アクセスする際にさまざまなメソッドが良いされているため状況に合わせ柔軟な開発を実現することができる。

5
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
0