Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
社内のFlutterテンプレートをリニューアルした話
Search
teamLab
PRO
January 29, 2025
Technology
0
29
社内のFlutterテンプレートをリニューアルした話
teamLab
PRO
January 29, 2025
Tweet
Share
More Decks by teamLab
See All by teamLab
ぴよぴよFlutterエンジニアから見た 会社の楽しいところをありったけ
teamlab
PRO
0
20
"ほどよい自動化"はあなたの開発を豊かにする
teamlab
PRO
0
72
半年開発してわかった自動テストの価値
teamlab
PRO
0
45
History APIの魅力と危険性
teamlab
PRO
0
49
レビュー経験ほぼ0だった自分が レビューで心掛けていること
teamlab
PRO
0
44
Web関連の仕様書を読むモチベーション
teamlab
PRO
0
43
[FlutterKaigi2024]ステートマシンで実現する高品質なFlutterアプリ開発
teamlab
PRO
3
900
[iOSDC 2024]クロスプラットフォーム普及増加。SwiftでiOS開発はもうやらないのか....?
teamlab
PRO
0
1k
チームラボの画像処理エンジニアチーム
teamlab
PRO
2
260
Other Decks in Technology
See All in Technology
MIMEと文字コードの闇
hirachan
2
1.4k
JEDAI Meetup! Databricks AI/BI概要
databricksjapan
0
300
スキルだけでは満たせない、 “組織全体に”なじむオンボーディング/Onboarding that fits “throughout the organization” and cannot be satisfied by skills alone
bitkey
0
150
Iceberg Meetup Japan #1 : Iceberg and Databricks
databricksjapan
0
300
あなたが人生で成功するための5つの普遍的法則 #jawsug #jawsdays2025 / 20250301 HEROZ
yoshidashingo
2
130
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
150
内製化を加速させるlaC活用術
nrinetcom
PRO
2
120
Helm , Kustomize に代わる !? 次世代 k8s パッケージマネージャー Glasskube 入門 / glasskube-entry
parupappa2929
0
290
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
8
2.8k
偏光画像処理ライブラリを作った話
elerac
1
160
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
170
Perlの生きのこり - エンジニアがこの先生きのこるためのカンファレンス2025
kfly8
1
250
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
A Modern Web Designer's Workflow
chriscoyier
693
190k
A Tale of Four Properties
chriscoyier
158
23k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
RailsConf 2023
tenderlove
29
1k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Mobile First: as difficult as doing things right
swwweet
223
9.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Agile that works and the tools we love
rasmusluckow
328
21k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
GraphQLとの向き合い方2022年版
quramy
44
13k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Transcript
社内の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