FlutterKaigi 2024に参加しました！

こんにちは、Anycloudの南部です。

11月21日に開催された Flutter Kaigi 2024 に参加してきました。

Flutterの最新動向を知り、実際の開発に活かせる知見を得るために参加した3つのセッションについてレポートします。

1. Figma Dev Modeで変わる！Flutterの開発体験

セッション詳細はこちら（YouTube）

開発効率化に関心があり、デザインとエンジニアリングの連携を深めたいと考えていました。

セッション内容のポイント:

• Figma Dev Mode の紹介だけでなく、デザイナーとのシームレスな協業体制であったり、生成AIを活用した効率的な開発など、総合的に開発体験をあげる知見を共有されていました。
• figmaのvariables（変数）の利用や、フレームの適切な命名、variantを使ったとりうる状態の定義など、開発者が開発するときに考えることを、デザイン時にfigma上で表現する事例が紹介されました。
• このような「デザインエンジニアリング」を実践すると、開発者はwidgetをどう実装するかほとんど考える必要がなくなります。また、figmaのデザインデータが構造的になっていれば、AIでのコード生成もクオリティの高いものになるでしょう。
• 「Ready for Dev」というフレームごとのstatus管理や、Compare Changesというデザイン差分を調べられる機能についても紹介されました。Figma Dev Modeは高額ではあるものの、使いこなせばかなり強力なツールになりうることがよくわかりました。
• さらに、開発段階に移行したあとのデザイナーと開発者のコラボレーション（主にUIレビュー）については、WidgetBookを活用した取り組みが紹介されました。

2. アニメーションを最深まで理解してパフォーマンスを向上させる

セッション詳細はこちら（YouTube）

現在のプロジェクトでリッチなアニメーションを実装する可能性があるため、その基盤知識を深める目的で参加しました。

セッション内容のポイント:

• Flutter Engineのアップデートにより、Skia から Impeller への移行が進んでおり、これがアニメーションのパフォーマンス向上につながるとのことでした。
• 「ブラックボックス」となりがちなアニメーション実装の内部構造を知る貴重な機会でした。
• アニメーション実装時の設計思想や、選択肢の幅を広げる具体的な知見を得ることができました。

3.ImpellerとSkiaについて

セッション詳細はこちら（YouTube）

こちらは、「2. アニメーションを最深まで理解してパフォーマンスを向上させる」を現地で聞いたのち、YouTubeのアーカイブ動画で拝聴しました。

セッション内容のポイント:

• Flutterのフレームワーク層から、Flutter Engine、そしてGPUでの描画に至るまでの各レイヤーの役割が概説されました。
• Impellerで何が変わったのかを知ることができました。
• 特に、シェーダーの事前コンパイルによる操作時の性能向上について、2のセッションとも関連し、理解の助けになりました。

3のセッションではさらに、Flutter Kaigi2022の「RenderObjectより下の世界のFlutter」というセッションについても紹介されており、こちらのセッションも見ることで、さらにFlutterの内部構造の理解ができます → セッション詳細はこちら（YouTube）

まとめ

今回のFlutter Kaigiは、デザインとエンジニアリングの連携や、パフォーマンス最適化の最新技術を学べる非常に有意義なイベントでした。

今後のプロジェクトに活かせるアイデアが多く見つかったので、早速社内で共有し、実践に繋げていきたいと思います！