はじめに
FlutterKaigi 2024に参加し、Flutterの技術やツールに関する知見や各社の取り組みを間近で体感してきました。
本記事では、得た知見の中でFlutter開発する上であると便利なツールや技術にフォーカスを当てて3つほど紹介してみようと思います。
以下リンク先はセッションの配信時の動画になります。
- Figma Devmode & Cursor : Figma Dev Modeで変わる！Flutterの開発体験
- Shorebird : 体験！マクロ時代のFlutterアプリ開発
- Dart Macros ： Shorebirdを活用したFlutterアプリの即時アップデート：Code Pushの実践と可能性
カンファレンスの概要
FlutterKaigiは、Flutter/Dartをテーマとした日本の技術カンファレンスです。
2024年11月21日（木）～22日（金）に開催され、今年で4回目を迎えました。Flutter/Dartに関する知見や情報が共有される場で、各セッションでは実践的な内容や新しい機能の紹介、Flutterにリプレイスした時の取り組みなど様々な情報が発表されていました。
実際に発表されていたセッションこちらに一覧があります。また当日の発表はYoutubeの配信でこちらに残っています。
1. Figma Devmode & Cursor
Figma Devmode
「Figma Dev Modeで変わる！Flutterの開発体験」のセッションではFigmaのDevmodeを使ってデザイナーの意志をエンジニアがどのように反映していくか、またFigmaにできない課題をどう解決していくかを知ることができ、大変勉強になりました。
セッションの中ではFigma Devmodeでのポイントとしていくつか挙げられていました。
- Variables：カラーコード等の値に変数名のように名前を付与して管理できる仕組み
- plugins：Variablesはpluginsを使うとソースコードに読み込み、書き込みができるFlutterではFigdart等のプラグインがある
- Variants：取りうる状態(true, false時の見た目の変化等)をグループ化して管理する
- Ready for Devマーク：実装可能なデザインを一目で確認可能
- focusView：実装対象画面のみを表示する機能
- compare changes：過去のデザインと実装の差分を比較可能
Figmaではできない事
- エンジニアの実装後のデザインのレビューはFigmaではできない
- WidegetBookを使うとレビュー可能
- 簡単に言うとStoryBookのFlutter版
- WidgetBook Cloudを使うとgithubのプルリクエストのステータスチェックと連動して、WidgetBook Cloudでデザイナーがapproveするとプルリクエストのapproveが通る形にできる
- FigmaのREST APIを使ってもレビュー可能
- プルリクエストのgithub actionsでgolden Testを実行し差分があったらFigmaのREST APIを叩いてFigmaにコメントを残すことができる
- Alchemistを使うとprecacheImagesメソッドでテスト実行時に画像のレンダリングまで行えるようになる
CursorエディタでFigmaからソースコード生成
FigmaではiOSやAndroidのUIコード, CSSの生成はサポートしていますが、Flutterはサポートしていません。
サードパーティのプラグインでボイラープレートコードを生成するのは良いですが、Widgetを生成する場合は不十分なのでCursorエディタでソースコード生成すると良さそうです。
Cursorエディタは、生成AIと特化して連携できるVS Codeベースのエディタです。VS CodeがベースなのでFlutter開発で頻繁に使うhotReloadもそのまま使うことができます。
Figmaの画像からソースコードを生成する場合は以下の特徴があります。
- 画像からDartコード生成：デザイン画像を元に、概ね忠実なコードを生成可能
- コンポーネント単位で生成：小さい単位で生成することで精度が向上
-
Cursor rules：以下をルールに指定
- アプリのデザインは画像ファイルに従う
- デザインは画像ファイルを忠実に再現すること。そのために、フォントサイズや余白などのパラメータはjsonファイルを読み取る
- 実装方法を指示：実装方法がわかっているなら指示することで修正可能
- Context情報の付与：沢山の情報を与えることで、生成精度が向上。@の後にファイル名を指定するとプロンプトと一緒に渡せる
上記のようにFigmaの画像から全てのコードを一撃で完璧に生成するのはまだ難しい場面があるので、デザイン意図を的確に伝える工夫が必要になりそうですね。
2. Shorebird
Shorebirdとは？
ShorebirdはFlutterアプリにおける即時アップデートを可能にする「Code Push」ツールです。ストア審査を経ずにDartコードを更新できる点が大きな特徴です。
主な特徴
- 即時アップデート：修正や新機能を数分でリリース可能
- パッチのロールバック：トラブル発生時にも即座に対応可能
- 統合が簡単：GitHub Actionsを用いた自動化が容易
注意点と課題
- ネイティブコードの変更はストアの規約でできないので審査が必要
- アプリのコンセプトを変えるような変更も審査側で禁止
- アセットの変更には対応していないが今後対応予定ではある
- 毎月5000パッチまでは無料だが1ユーザー1パッチなので実質無料では使用できない
- Pro.20$のプランだと50000パッチまで無料
- アプリを2度killする必要があるので、この部分がビジネス要件に影響する可能性あり
無料で使うことが実質できないですが、開発時に確認する段階では試せそうですね。アプリを2度killしないと反映されかったり、バージョン管理をどうするかなど実用する際には考えることが色々ありそうだなと思いました！
3. Dart Macros
Dart Macrosとは
Dart Macrosは、Dartコードを読み取って、コンパイル前にコードを瞬時に自動生成する仕組みです。(セッションでも確認できますが、瞬時に生成されて驚きました!)
マクロを使うことでボイラープレートコードを大きく削減できます。例えば、以下のような活用例があります。
-
InheritedWidget / StatefulWidgetで1つのオブジェクトを共有するために必要だった大量のメソッドを書かなくてよくなる
- 上記のような煩雑性はパッケージで解決していることが多い
- SharedPreferencesでtype、key指定をする必要がないようなget,setのメソッドを自動で生成できるので、typeとkeyのミスをなくせる
-
Navigatorの画面遷移処理の長い引数を簡略化できる
- Navigatorの呼び出しに必要な長い引数を、メソッド化してrouteとしてまとめることはよくある。しかし、routeに新しい引数を追加する場合、修正が必要な箇所が多くなることがある。そのような場合でも、引数を追加したソースを自動的に作成できる
- TextEditingControllerの自動disposeもstateクラスで忘れずに呼び出す実装をしなくても@つけるだけで自動でdisposeを呼び出せるようにできる
2024年現在experimentalのため、実用的になるまではもうしばらくかかりそうですが、stableになったら自動生成で色々捗りそうな印象で使ってみたいと思いました！
おわりに
FlutterKaigi 2024で得られた知見から、特に開発効率を向上させる技術やツールについて紹介しました。ここに挙げた以外にも、すべてのセッションで非情に有益で興味深い内容が沢山ありました！とても有意義な時間を過ごさせていただき、運営に関わっていただいた皆様、本当にありがとうございます！次回のFlutterKaigiも非常に楽しみです！
レバテック開発部の公式テックブログです！ レバテック開発部 Advent Calendar 2024 実施中: qiita.com/advent-calendar/2024/levtech
Discussion