ツールを使ったプログラム構造の把握
Flutterには、DevToolsというものがあり、このツールを使うことでアプリケーションのUIの構造を知ることができます。
DevToolsは、コマンドラインからもインストールできますが、Android Studioを使っている場合には、アプリを起動後に、図5（1）の「Open Devtools」ボタンを押すと自動的にインストールから起動までされます。
また、Android Studio内にもDevToolsと同じ機能がありますが、DevToolsには表2に示す機能が他にもあります。
| 機能 | 概要 |
|---|---|
| Flutter Inspector | ウィジェットの構造や表示されているウィジェットの識別や実際の表示設定情報を把握する |
| Timeline view | アプリケーションのライムラインごとのパフォーマンスやイベント状況などを把握する |
| Memory view | アプリケーションのメモリの使用状況を把握する |
| Performance view | CPUプロパイルデータから、処理時間やコールツリーなどを利用しパフォーマンス状況を把握する |
| Network view | HTTP（S）や、WebSocketのネットワーク利用状況を把握する |
| Debugger view | ソースレベルでのブレークポイントやステップイン／アウト／オーバーなどの機能を利用しデバッグを実施する |
| AppSize view | 作成されたアプリに含まれるコードや素材などのサイズ情報を把握する |
Flutter Inspectorの基本機能
主に、開発段階は多くの方が利用すると思われるのがFlutter Inspectorで、こちらのツールを使うとウィジェットの構造ツリーや、実際にどこに表示されているかなどを把握することが可能です。サンプルアプリでFlutter Inspectorを表示したのが、図6です。
画面左には、実行時のUI部品の構造が表示され、右側には各ウィジェットのプロパティ状態が表示されるDetails Treeと、ウィジェットのレイアウト状況を表示するLayout Explorer（図7）があります。
この結果を見ると、実際のコードでの構造と非常に似ていることがわかります。このように、Flutterでは実行時のUI部品の構造と、ソース上の構造が多くの部分で同じようになるようになっています。
アプリ上に表示されているウィジェットの状況を把握する
Flutter Inspectorでは、実際に実行しているアプリ上に状況を表示することも可能です。例えば、画面左上部にある「Select Widget Mode」を有効にした状態でウィジェットツリー上のウィジェットを選択すると、図8のようにアプリ上にどの部品かがわかります。
また、「Debug Paint」を利用するとウィジェットの余白や整列状況などを図9のように表示することができます。
このようなツールはHTMLを使うWebアプリであれば当たり前と思われるかも知れませんが、動的な部品生成を生成しがちなネイティブコードではソースコードと同じような構造を維持することは難しいです。
Flutterアプリでは、buildメソッドでUI部品の生成をすべて管理することで、ウィジェットの構造がわかりやすいコードを記述でき、さらにDevToolsのようなツールからもウィジェットの状況が把握がしやすくなっています。そのため、実際に試しながらコーディングしていくスタイルが行いやすくなっています。
まとめ
Flutterが作成する、雛形のサンプルアリケーションのコードを見ると、フレームワークにありがちな暗黙の管理によって省略されている部分がありません。つまり、mainメソッドから処理を追っていけば、一連の処理の流れが見えるようになっています。そのため、コードを通じて全体的な流れがイメージしにくいといったことが起こりにくいのではないでしょうか。
また、今回紹介した「ステート」という概念は今まで見たことがない場合には少々難解に思うかも知れません。しかし、Reactでも同じような仕組みになっています。従って、Flutter特有の考え方ではなく、より一般的な考え方にもなっているので、この機会にぜひ、慣れていただければと思います。次回は、自分でコードを記述する際に必要となるDart文法の基本を紹介します。
