はじめに
本レポートでは、Flutterアプリケーションにおける既存コードの理解を深めるため、コントローラとページ間の処理の流れ、および State クラスの追い方について学習した内容をまとめます。
Flutterでは、画面を構成するWidgetと、その状態を管理するStateクラス、さらにビジネスロジックを担当するコントローラが連携して動作します。そのため既存コードを理解するためには、これらのクラス間の関係を把握し、処理の流れを順に追うことが重要になります。
ページとStateの構造
Flutterでは、画面はWidgetによって構成されます。特に状態を持つ画面の場合、StatefulWidgetとStateクラスの2つで構成されます。
基本的な構造は以下のようになります。
- StatefulWidget（画面の定義）
- State（画面の状態管理とUI構築）
StatefulWidgetは画面の定義を行うクラスであり、実際のUI構築や状態管理はStateクラスで行われます。
そのため既存コードを読む際には、まず対象となるページのWidgetクラスを確認し、その後対応するStateクラスを確認することで画面の処理を理解しやすくなります。
ページからStateを追う方法
StatefulWidgetでは、createState() メソッドによってStateクラスが生成されます。
例として以下のような構造があります。
class SamplePage extends StatefulWidget {
@override
_SamplePageState createState() =＞ _SamplePageState();
}
この場合、画面の実際の処理は _SamplePageState クラスに記述されています。
そのためコードを読む際には、以下の手順で追うと理解しやすくなります。
- ページクラス（StatefulWidget）を確認する
createState()で生成されるStateクラスを特定する- Stateクラスの
build()メソッドを確認する
この手順により、画面のUI構造と処理を把握することができます。
コントローラとの関係
Flutterアプリでは、画面の処理を整理するためにコントローラクラスを使用する場合があります。
コントローラには以下のような役割があります。
- データ取得処理
- 業務ロジック
- 状態更新処理
Stateクラスでは、コントローラのメソッドを呼び出して処理を実行することが多くあります。
例えばボタン操作などのイベントが発生した場合、Stateクラスからコントローラのメソッドが呼び出されます。
そのため処理の流れを追う際には、
- UIイベント（onPressedなど）を確認する
- 呼び出されるメソッドを特定する
- コントローラの処理を確認する
という順序で確認すると、ユーザー操作から処理までの流れを理解しやすくなります。
ページ遷移の追い方
Flutterでは画面遷移は主に Navigator を使用して行われます。
そのため画面間の関係を理解するためには、Navigator の呼び出し箇所を確認することが重要です。
例えば以下のようなコードでページ遷移が行われます。
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =＞ NextPage(),
),
);
この場合、NextPage が次の画面となるため、そのページクラスを確認し、同様に State クラスを追うことで画面構造を理解することができます。
go_router を用いたページ遷移
Flutterでは Navigator の代わりに、go_router パッケージを使用して画面遷移を実装することもできます。
go_router を利用する場合は、context.push や context.go が遷移処理となります。
例えば以下のように記述されます。
context.push('/testDetails', extra: dateTime);
ここでは /testDetails が遷移先ルートとなり、extra を用いてパラメータを渡すことができます。
そのため画面遷移を追う場合は、
context.push/context.goを確認する- 指定されているパスを特定する
- go_router のルート定義から該当ページを確認する
という手順で遷移先画面を特定できます。
学習を通して得られた知見
今回の学習を通して、Flutter の既存コードを理解するためには、以下の流れでコードを追うことが有効であると感じました。
- ページ（Widget）を起点にする
- 対応するStateクラスを確認する
- UIイベントから処理を追う
- 必要に応じてコントローラの処理を確認する
- Navigatorを確認して画面遷移を理解する
このように画面構造と処理の流れの両方を意識してコードを読むことで、既存コードの理解がしやすくなると感じました。
まとめ
Flutterアプリケーションでは、ページ、Stateクラス、コントローラが連携して動作しています。
そのため既存コードを理解するためには、それぞれの役割を意識しながら処理の流れを追うことが重要です。
今回学習したコードの追い方を活用することで、既存のFlutterアプリの構造をより効率的に理解できると考えます。