Open3

Flutter Kaigi 2024

futaba3futaba3

「Figma Dev Modeで変わる!Flutterの開発体験」

Figma Dev Mode使いたいなあ
https://speakerdeck.com/watanave/figma-dev-modedebian-waru-flutternokai-fa-ti-yan
Figma Dev Mode
エンジニア向けに作業がしやすいUIになるモード
コード生成
Flutterはサードパーティ製・Cursorエディタを使うのがよき

Widget Book
https://zenn.dev/natoring/articles/3d6638ab499117

複数人開発をしているときに様々な画面で使われるコンポーネントが共通化されてすでに実装済みかをコードを読み込まずとも把握できたら嬉しい

Figma API
あるよ

alchemist
画面差分やデザインの崩れがないかを、 Golden Test / Visual Regression Test(以下、VRT)でテストする方法
https://pub.dev/packages/alchemist
https://zenn.dev/greendrop/articles/2024-09-29-a1fa614645ba96

GitHubActionでPR時にUIの差分があったときFigmaにコメントを入れてくれる=PR時点でデザイナーにUIを見てもらえる=TestFlight等での確認より前にレビューしてもらえる

futaba3futaba3

「Flutterによる 効率的なAndroid・iOS・Webアプリケーション開発の事例」

Flutterリプレイスのコスト、メリット、デメリットについてわかりやすく言語化されててすごい
Flutter Webについても詳しく説明
https://speakerdeck.com/recruitengineers/flutterkaigi-2024-wakamiya
Flutterリプレースの話

  • プラットフォーム最適なら各プラットフォームで実装した方が良い
  • Flutter採用が常に正解ではない
    Flutterと開発効率
  • 少人数で開発できるようになった
  • 開発までのフローがシンプルになった←→(ネイティブ)差分に対する調整が必要
    キャッチアップ
  • 対応プラットフォーム+Flutterをキャッチアップ
    • プラットフォームとFlutterの間で生じる問題をキャッチアップ
      Flutter Web
  • SEOに難あり(SEO関係ないページなら最高にマッチする)
  • Flutter Web製のwebページは稀
  • キャッチアップが大変
  • ブラウザの挙動と向き合う必要がある(chrome/safariとかwin/macとか)
  • 宣伝されているほど完璧に動かない
  • Flutterの資産をモバイルとwebで利用できる
  • 動かすだけなら追加学習コストなし(不具合対応やリリースには必須)
futaba3futaba3

「キャッシュレス決済アプリでのFlutterの部分的採用から全面採用まで」

Add-to-app
Flutterの部分的採用の課題
他チームが手を加えにくい
バックエンド含めAll Dart、アプリもAPIもDartで書いて一つのエンジニアチームにしているようだ...
API-Gateway、記述言語はDart 全面採用
派遣とかベンダーとか完全な内製化ではない会社の事例だしちょいむずかった、解像度低め、、、
一定レベル以上のFlutterエンジニアを確保できる見込みがないと全面採用は見送った方がいいよ〜
見落とした問題やバグは技術的負債になってしまう

育成

  • オフショア開発の3交代制
    • チームを3つの時間帯ごとに振り分けて24h開発
    • (すご、海外パワー)
  • 外部交流会の実施