社内のFlutterテンプレートをリニューアルした話

社内のFlutterテンプレートをリニューアルした話新技術の導入で効率化を目指すチームラボそた社内のFlutterテンプレートをリニューアルした話 1

自己紹介そた高専出身23卒スマホエンジニア KMPとFlutter書いてます最近ウイスキーにハマってます Twitter: @_sotaatos 社内のFlutterテンプレートをリニューアルした話 2

背景弊社では常日頃からアプリ開発の効率化を目指している案件で0→1を繰り返さないためにテンプレートを用意新規案件の開始が重なるタイミングでテンプレート更新の必要性弊社では案件開始時毎に新技術の導入を検討テンプレに新技術を取り入れ続けることで新規案件での新技術導入を効率化自分が主導となりテンプレートをリニューアル社内のFlutterテンプレートをリニューアルした話 3

導入した新技術 1. StateMachine 2. VRT (Visual Regression Testing) 3. WidgetBook
4. マルチパッケージ構成社内のFlutterテンプレートをリニューアルした話 4

StateMachine 有限オートマトンを用いた状態管理予期せぬ状態遷移の防止テスト容易性の向上チーム全体での状態管理の理解促進 FlutterKaigiで登壇してきたので興味ある方は以下のリンクからぜひご覧ください！ https://www.youtube.com/watch?v=nfL9ffl8ajs 社内のFlutterテンプレートをリニューアルした話 5

VRT UIの回帰テストを導入 PR時点でUIの変更をチェック予期しないUI変更の防止マルチデバイスでの表示確認を簡略化社内のFlutterテンプレートをリニューアルした話 6

WidgetBook UIカタログで作成済みのコンポーネントを一覧で確認様々な状態のプレビューコンポーネントの再利用促進社内のFlutterテンプレートをリニューアルした話 7

マルチパッケージ構成 CleanArchitectureに基づいた責務分割依存関係を明確に管理保守性の向上開発効率の向上社内のFlutterテンプレートをリニューアルした話 8

リニューアル時に注意した点社内のFlutterテンプレートをリニューアルした話 9

チーム内での合意形成今までよりコードを書くコストは上がる目的とメリットの明確化なぜそれをするのかをチーム内で合意形成定期的なミーティング開催週1回Flutter改善会というミーティングを開催進捗状況の共有と意見交換各メンバーから改善案などもヒアリング社内のFlutterテンプレートをリニューアルした話 10

ドキュメント整備新技術を導入するともちろんキャッチアップが必要キャッチアップのためにプロジェクトが遅延するのは避けたいドキュメントを整備してキャッチアップのコストを減らす合計35000文字以上のドキュメントを作成作成したドキュメントアーキテクチャについて開発に使用するツール類(melosなど)の使い方状態管理の設計についてその他多数
社内のFlutterテンプレートをリニューアルした話 11

チームメンバーの理解度の確認日々の開発のフォロー Slackで「StateMachine」を通知キーワードに困ってそうな人がいないか想定外の運用をしていないか質問しやすい環境作り週一のFlutter改善会では案件の課題の解決なども Flutterに関しての雑談なども行い心理的安全性を高める社内のFlutterテンプレートをリニューアルした話 12

テンプレート開発の振り返り社内のFlutterテンプレートをリニューアルした話 13

やってよかったこと合意形成をとりながらの開発自分一人だけじゃなく、チームメンバーの意見を取り入れながら開発することでより良いものに週一回のFlutter改善会 MTGがないとどうしても非同期で小規模なコミュニケーションになりがち週一回のMTGで一度にFlutterメンバーが集まり会話することでよりコミュニケーションがしやすくなった社内のFlutterテンプレートをリニューアルした話 14

課題として残ったこと新技術の習得時間 StateMachineやCleanArchitectureの概念理解に時間が必要ドキュメントは整備したが、量が多くなってしまった案件規模に応じた柔軟な適用今回のテンプレートは大規模な開発を想定小規模な案件でもより活用しやすくする工夫社内のFlutterテンプレートをリニューアルした話 15

まとめテンプレートへの新技術の導入による改善 StateMachineやVRT、マルチパッケージ構成による品質・保守性の向上新規案件立ち上げ時の開発効率の向上が見込めるチームコミュニケーションの強化定期的なミーティングによる合意形成や質問しやすい環境作りメンバー間での知見共有が活発にドキュメント整備による知見の蓄積新メンバーの参画時のキャッチアップがスムーズにプロジェクトの設計思想が明確に残せた
社内のFlutterテンプレートをリニューアルした話 16

ご清聴ありがとうございました Contact: @_sotaatos 社内のFlutterテンプレートをリニューアルした話 17

社内のFlutterテンプレートをリニューアルした話

社内のFlutterテンプレートをリニューアルした話

teamLab PRO

More Decks by teamLab

Other Decks in Technology

Featured

Transcript