はじめに
株式会社Sally 所属エンジニアの @wellPicker です。
弊社では、スマホやパソコンでマダミスを遊べるアプリであるウズや、マダミス情報・予約管理サイトマダミス.jp、マダミス開発ツールウズスタジオを開発しています。
マダミス自体についてはこちらをご覧ください。
flutter では、flutter run 中にコマンドラインに特定のコマンドを入力することで様々な機能を活用することができます。
一番有名なのは r による Hot reload でしょうか。
このコマンドにより実装の変更を瞬時に反映させられるのは、flutter の強みの一つです。
仕事の中で、アプリのパフォーマンス改善に取り組んでいる最中に、flutter run 中に使用できるコマンドに有用なものがあることを知りました。
そこで、flutter run 中に使用できるコマンドにはどのようなものがあるのか、これを期に整理していきたいと思います。
それぞれのコマンドについて
r: Hot reload, R: Hot restart
この二つのコマンドは誰もが数え切れないほどお世話になっていると思うので、説明も不要かと思いますが……。
これらはいずれも、最新の実装をもとに画面を再描画するためのコマンドです。
二つのコマンドの違いとして、Hot reload は widget tree を再構築するだけでアプリ内の状態を基本的に保持するのに対して、Hot restart は アプリ内の状態が失われます。
ちなみに、8月に安定版リリースされた flutter 3.35 にて、flutter for web でも Hot reload が可能になりました。
h: コマンド一覧を確認
flutter run でビルドが完了した時にいくつか使用可能なコマンドが表示されていると思いますが、その中にこのコマンドも表示されています。
このコマンドを実行することで、使用可能な全てのコマンドを表示してくれます。
今回の記事はぶっちゃけてしまえばこのコマンドから確認できるすべてのコマンドを解説しているだけなので、最悪このコマンドさえ覚えればこの記事を読む必要はないかもしれません（笑）
d: Detach, q: Quit
いずれも flutter run を終了するためのコマンドです。
二つの違いは、Quit ではアプリそのものも終了するのに対して、Detach した場合はアプリは引き続き起動した状態になります。
まあ、flutter run が終了した状態でアプリを起動し続けるメリットもあまりないと思うので、基本的には Quit を使う人が多いのでしょうか。
c: Clear the screen
「ターミナル内に表示されている文字が見えなくなる位置」まで、ターミナル上でスクロールします。
ターミナルを一度スッキリさせて、printデバッグなどを実行したい時に使えると思います。
v: DevTools を開く
非常に重要な機能です。h を実行しないとこのコマンドの存在を確認できないので、実は知らなかった人もいるのではないかと思います。
DevTools の使い道や重要性についてはいずれ別の記事でも書きたいと思っていますが、アプリ内の widget tree を可視化したり、パフォーマンスを計測する上で開発者にとっては欠かせないツールです。
w: debugDumpApp, t: debugDumpRenderTree, L: debugDumpLayerTree, f: debugDumpFocusTree, S/U: debugDumpSemantics
これらはいずれも、アプリ内の Widget tree に関する情報をターミナル上に出力するためのコマンドです。
debugDumpApp は Widget tree 全体を、debugDumpRenderTree は RenderObject のツリーを出力します。debugDumpLayerTree、debugDumpFocusTree はそれぞれ、Layer / FocusNode に関する情報を出力します。debugDumpSemantics は詳細を把握していないのですが、そのままだとパフォーマンスの理由により実行できませんでした。
ここまで色々書きましたが、正直そんなに使う機会は多くないコマンドなのかなと思います。人間が widget tree を把握する目的であれば DevTools 上で見た方がわかりやすいと思うので……。
良い使い方をご存知の方がいればコメントで教えてください！
i: widget inspector
このコマンドを実行すると、DevTools の Flutter Inspector で SelectWidgetMode を選択したときと同じ挙動になります。
このモードでは通常のアプリのタップ判定が機能しなくなる代わりに、Widget にタップするとその Widget のサイズやレイアウトに関する情報が表示されるので、特に個別のUIのデザイン崩れなどを検証したい時に便利だと思います。
p: debugPaintSizeEnabled
画面内の各 Widget の占有する面積を可視化したり、Padding を可視化するコマンドです。こちらはより画面全体での各 Widget の位置関係について検証するのに役立つと思います。
I: debugInvertOversizedImages
「実際に表示されているサイズに対して、消費しているメモリが大きい（より大きいサイズでデコードされている）」画像を可視化するモードです。
条件に当てはまる画像が、上下左右&色相が反転された状態で表示されます。このモードを使用することで、アプリのメモリ使用量の改善に繋げられるかもしれません。
o: defaultTargetPlatform
defaultTargetPlatform を変更します。ただし、dart.io で提供されている Platform.isiOSなどの結果はこのコマンドでは変わらないようなので注意しましょう。
実は、UIなどを変更する目的の場合は Platform.is~~ を使用しないように公式が推奨しているようですが、話が逸れそうなのであまり詳しい説明は避けたいと思います。気になる方は下記のページを参照してみてください。
b: debugBrightnessOverride
端末のダークモード・ライトモードの設定をoverrideできます。
P: performance overlay を表示する
アプリのパフォーマンスを示す performance overlay を表示します。こちらも詳細な見方は割愛しますが、アプリの画面と同時に比較することが可能なので、「特定の動作時のパフォーマンスの変化」などを確認するのに便利です。
a: debugProfileWidgetBuilds, g: Run source code generators
この二つは、実行しても何も起こらなかったので特別な設定が必要なコマンドなのかもしれません。
g はなんとなく、適切に設定していればコード自動生成コマンドを呼び出すことができるのでしょうか……？ 何か情報が判明したら追記したいと思います。コメントも募集中です。
まとめ
今回は、flutter run 中に呼び出すことが可能なコマンドを整理しました。
DevTools の画面上からしか呼び出せないと思っていたコマンドがあったり、そもそもこんな機能があったのか！ というコマンドもあったので、調べてみて良かったと思います。
この記事を読んでくれた人にも何か発見があれば幸いです。
Discussion