Dev Tools (Flutter Roadmap Dev Tools)

はじめに

Flutterを網羅的に学習するにあたってRoadmapを使って学習を進めることにしました。

この記事では、Flutter初学者やこれからFlutterを学習し始める方に向けて、開発ツールについてまとめています。

RoadmapはFlutterだけでなく、他の言語やスキルのロードマップも提供されており、何から学習して良いか分からないと悩んでいる方にとって有用なサイトになっています。
ぜひRoadmapを利用して学習してみてください。

Roadmapとは

簡潔に言えば、Roadmap.shは学習者にとってのガイドブックであり、学習の方向性を提供する学習ロードマップサイトです。

初心者から上級者まで、ステップバイステップでスキルを習得するための情報が提供されています。

学習の進め方が分かりやすく示されているだけでなく、個々の項目に参考資料やリソースへのリンクも提供されているので、学習者は目標を設定し、自分自身のペースで学習を進めることができます。

Dev Tools

FlutterロードマップDev Toolsでは以下の5つのサイトが紹介されています。興味のある方はぜひお読みください。

• Flutter - DevTools: https://docs.flutter.dev/tools/devtools/overview
• Dart DevTools: https://dart.dev/tools/dart-devtools
• Using the Flutter inspector: https://docs.flutter.dev/tools/devtools/inspector
• How to Use the Flutter Inspector: https://www.youtube.com/watch?v=CcLfGJZS8ns
• Using the Memory view: https://docs.flutter.dev/tools/devtools/memory

開発ツールとは

Flutterには、開発者がアプリケーションの開発、デバッグ、テストを行うためにそれらをサポートするさまざまな開発ツールがあります。以下は、Flutterにおける主要な開発ツールです。

• Flutter SDK
• Flutter Inspector
• Flutter Performance
• Memory Allocation
• Flutter DevTools Chrome Extension
• Android StudioとIntelliJ IDEAプラグイン
• Visual Studio Code拡張機能
• Flutter Driver
• Flutter Outline

これらのツールを駆使することで、開発者はアプリケーションの品質を向上させ、開発をスムーズに進めることができます。ここでは、Flutter Inspector,Flutter Outline,Flutter Performanceの３つのツールについて説明していきます。

Flutter Inspector

Flutter Inspectorとは、Flutterに組み込まれているデバッグツールの一部です。UIの構造や性能を視覚的に調査できるため、ウィジェットツリーやUIの構造、アニメーション、状態などさまざまな詳細情報を見ることができます。

Android Studioの画面右側にある、Flutter Inspectorを開いて、Open DevTools in the browser? をタップするとブラウザに遷移します。

各Widgetのwidth(幅)とheight(高さ)を視覚的に見ることができ、pixelの調整、Cross Axis(横軸)・Main Axis(縦軸)の変更も行えるため、UIを構築する際に非常に便利です。

主な機能

• ウィジェットツリーの表示:

アプリのウィジェットツリーを表示します。各ウィジェットには、型、状態、キー、プロパティに関する情報が表示されます。

• Select Widget Mode:

画面左上にある『Select Widget Mode』をタップすると、シュミレータで選択したWidget部分の背景色が変更され、端末でどのようにWidgetが配置されているのかを確認することができるようになります。

別のWidgetを選択したい場合は、シュミレータの左下にあるsearchボタンをタップすると、Widgetが選択できるようになります。

• Show Guidline:

画面上部にある『ShowGuidline』をタップすることで、margin、padding、レイアウトの配置などを視覚的に見ることができます。

例えば、各ウィジェット間の距離が一定であるかどうかを確認したり、異なるサイズのウィジェットがある場合、それらのサイズが一致しているかどうかを確認したりする際に使用されます。

Flutter Outline

Flutter Outlineとは、VSCodeやAndroid StudioなどのIDEで提供されている、Flutterプロジェクトのウィジェットツリーやソースコードの概要を表示するツールです。

Android Studio などの IDE で Flutter プロジェクトが開かれた際に、画面右側に Flutter Outline が表示されます。これをタップすると、プロジェクト内のウィジェットツリーが階層構造で表示され、UIの構造やウィジェットの入れ子関係を一目で確認できるようになります。

※『Flutter Outline』をタップしても何も表示されない"Nothing to show"が表示されることがありますが、これは画面下タブの『Dart Analysis』からリフレッシュボタンを押すと解決できます。

また、Flutter Outline上部には特定のウィジェットを選択してラップするためのアイコンがあります。例えば、選択したウィジェットをCenterでラップすることで、そのウィジェットを中央寄せにすることができたり、Paddingで余白を追加したりなどの操作も可能です。

• Center：Widgetの中央寄せ
• Padding：Widgetの余白をつける
• Column：複数のWidgetを縦に並べる
• Row：複数のWidgetを横に並べる
• Container：WidgetをContainerでラップする

さらに、特定のウィジェットを選択して右クリックし、『Extract Widget』を選択することで、そのウィジェットを新しいクラスに切り出すことができます。これにより、コードの再利用性やメンテナンス性を向上させることができます。

Flutter Performance

Flutter Performanceとは、アプリのパフォーマンス情報を確認するためのツールです。このツールを使用することで、アプリケーションの性能を向上させたり、ボトルネックになっている箇所の特定を行うことができます。

ウィジェットが再生成されているかどうかは 『Widget rebuild stats』 を見ることで、確認できます。以下のようにカウントが更新されると実際にどのウィジェットが再生成されているのか確認できます。

Widget rebuild stats 統計情報

• Widget:
  各ウィジェットのクラス名が表示されます。ウィジェットが再構築されるたびに、該当のセクションがロードされます。

• Location:
  ウィジェットが配置されている場所（コードの場所）が表示されます。これによって、どの部分のコードが再構築を引き起こしているかを特定することができます。

• Last Frame:
  ウィジェットが前回のフレームで何回再構築されたかが表示されます。これによって、前回のレンダリングサイクルでどれだけの再構築が発生したかがわかります。

• Current Screen:
  ウィジェットが現在の画面で何回再構築されたかが表示されます。これによって、現在の画面でどのウィジェットが再構築の主な原因となっているかがわかります。

『Performance Overlay』は、アプリケーションのパフォーマンスに関する情報を表示するツールです。このツールは、アプリケーションがどれだけスムーズに動作しているかを可視化し、パフォーマンスの問題を特定するのに使われます。

Performance Overlayは、画面上にオーバーレイとして以下の情報を表示します。

• FPS（Frames Per Second）:
  フレームレート¹が表示されて、アプリケーションが1秒間何フレーム描画されているかを表示します。FPSが高いほど、アプリケーションはスムーズに動作しています。

• Raster Thread Time:
  ラスタースレッド²が画面を描画するのにかかる時間が表示されます。この時間が長い場合、画面の描画が遅れている可能性があります。

• GPU Upload Time:
  GPU³がデータを描画するのにかかる時間が表示されます。描画処理が遅い場合、これが原因である可能性があります。

主な用途

• タイムラインの分析:

  • アプリケーションの動作中に発生したイベントを確認して、ビルドや再描画の頻度、非同期処理の実行時間を詳細に調査することができます。
  • 遅延が発生している箇所や冗長な処理を特定することができます。

• フレームごとの分析:

  • フレームごとの処理時間を確認して、特定のフレームで処理が遅れているかどうかを把握することができます。
  • ビルドや描画に時間がかかっている場合、どのウィジェットや処理に関連しているかを特定することができます。

• メモリ使用量の監視:

  • アプリケーションの実行中にメモリ使用量を監視して、特定の画面遷移やアクションにおいてメモリリークが発生していないかを確認することができます。

参考資料

1. フレームレート(FPS)
   フレームレート（fps）とは、1秒間の動画が何枚の画像で構成されているかを示す単位のことです。アプリケーションでは最高で60fpsとなるため、1秒間に60回画面が更新されていることになります。60fpsということは、逆算すると~16.6msに１回の画面更新( = 1/60)を行っていることがわかります。つまり、16ms以内に処理が完了すれば、画面がちらつくことも、カクカクすることもないわけです。人が見てスムーズと思えるフレームレートは、24fps〜30fps程度と言われています。
   こちらに分かりやすい記事があったので、興味のある方はぜひ見てください。 ↩

2. Raster Thread(ラスタースレッド)
   ラスタースレッド（Raster Thread）とは、画像処理において、画像をピクセル単位で描画するための処理を行うスレッドです。これは通常、画面に表示されるコンテンツ（テキスト、画像、UI要素など）を画素単位で計算し、それをフレームとして画面に描画する役割を果たします。 ↩

3. GPU
   GPUとは、Graphics Processing Unitの略で、画像処理装置を意味します。その名の通り、画像を描写するために必要な計算を処理するものです。
   こちらに分かりやすい記事があったので、興味のある方はぜひ見てください。 ↩