米国株が200円から買えるwoodstock.clubというアプリを開発する会社で働いているitomeです。
会社のzenn Publicationを作ったのでこれからじゃんじゃん更新していく所存です。
先日のFlutterNinjasというイベントで発表したのですが、flxというFlutter開発者向けRust製TUIツールを作ったのでその紹介をします。
flxとは
こんな感じでターミナルの中でFlutterのDevToolsのような機能にアクセスできるTUIツールです。
TUIとはターミナル上で擬似的にGUIっぽい表示をしているもので、有名なものだとlazygitなどがあります。
なぜ作ったか
Flutterで開発をするとき、ターミナルから flutter runコマンドでアプリを立ち上げると以下のように表示されます。
ログが確認できるしショートカットキーを押せばホットリロードもDevToolsの立ち上げもできるのでこれで十分便利なのですが、さらにTUIでログだけでなくネットワーク情報の確認などができたらもっと便利なはずだと思ったのがflxを作るきっかけになりました。
使い方
基本的にflutter runの代わりにflxコマンドを使うだけです。flxを使うと通常のflutter runの機能(ホットリロードやログの確認)に加えて以下のような機能にそのままアクセスできます。
ネットワークリクエストの監視
フレームレートの確認
ウィジェットツリーの確認
.vscode/launch.jsonの自動読み込み
その他
- FVMユーザー向けの
--fvmオプション - 複数アプリの同時実行
技術スタック
flutter runのようなFlutter CLIコマンドを再現するためにFlutter Daemonを、ネットワークの監視やウィジェットツリーの取得のためにDart VM Serviceを使っています。
Flutter Daemon
flutter daemonコマンドを実行すると起動するCLI用のFlutter APIです。標準入力にJSON-RPCのリクエストを投げると標準出力にレスポンスが返ってきます。アプリの実行、ホットリロード/ホットリスタート、接続されているデバイス一覧の取得、SDKのバージョン取得などが可能です。
Dart VMサービス
WebSocket経由で実行中のFlutterアプリに接続して、アプリ内のさまざまな情報を取得することができます。ネットワークやウィジェットツリーの情報だけでなく、GCのタイミングやフレームグラフの取得、果ては実行中のソースコードにブレイクポイントを貼ることまで、開発者用のツールに必要なほぼ全ての機能が提供されています。
Rust
開発言語にはRustを選びました。Flutter DaemonとDart VM Serviceの間で大量の非同期処理が必要なので、tokioでそれぞれイベントループを分ける設計にしています。状態管理はReduxを使いました。
よくある質問
FlutterNinjasの会場でされた質問をいくつかピックアップしました。
なぜFlutter用ツールなのにRust?
DartにはTUIを作るためのスタンダードなライブラリがなかったのが一つと、個人的な趣味が一つです。
ただDartにVM Service用のバインディングを提供するライブラリがあるのに対しRustにはそんなものないので、一から仕様書を読みながら実装する必要がありました。その手間を考えるとDartでTUIライブラリを作った方がもしかしたら早かったかもしれません。
公式のDevToolsでよくない？
flxが提供している機能はほとんどが公式のDevToolsで賄えるものなので、全ての人がflxを使う必要はないと思います。
GitKrakenを使う人がいればlazygitを使う人もいるように、普段ターミナルを使っている人がより便利な選択肢としてflxを使ってもらえると嬉しいです。
将来の計画
DevToolsのフレームグラフレンダリングを実装中です。また、AIを使ってログを分析し、自動的に潜在的なバグを特定することも検討しています。
まとめ
macOSユーザーは以下のコマンドでインストールできるので、一度手元で試してみてください。バグ報告、改善提案お待ちしています！
brew install itome/tap/flx
興味を持ってくださった方は、GitHubでスターをつけてもらえると励みになります。
Discussion