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
『スタディサプリ for SCHOOL』における Flutter導入とその成果
Search
Recruit
PRO
March 03, 2025
Technology
2
9
『スタディサプリ for SCHOOL』における Flutter導入とその成果
2025/2/19に開催したRecruit Tech Conference 2025の若宮の資料です
Recruit
PRO
March 03, 2025
Tweet
Share
More Decks by Recruit
See All by Recruit
大規模プロダクトにおける フロントエンドモダナイズの取り組み紹介
recruitengineers
PRO
4
16
技術的ミスと深堀り
recruitengineers
PRO
3
19
『ホットペッパーグルメ』における マルチプラットフォーム化の歩み
recruitengineers
PRO
2
10
『じゃらんnet』アプリ 改善活動の軌跡
recruitengineers
PRO
2
6
よりよいビジネスの「実現」のために エンジニアリングを発揮する
recruitengineers
PRO
3
20
イテレーティブな開発で 不確実性を乗り越える
recruitengineers
PRO
3
7
株式会社リクルート 社内ISUCONの裏側
recruitengineers
PRO
1
13
エンジニア主導の企画立案を可能にする組織とは?
recruitengineers
PRO
1
22
人材領域での企業と求職者のマッチング最大化
recruitengineers
PRO
1
8
Other Decks in Technology
See All in Technology
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
7
660
システム・ML活用を広げるdbtのデータモデリング / Expanding System & ML Use with dbt Modeling
i125
1
320
What's new in Go 1.24?
ciarana
1
110
JavaにおけるNull非許容性
skrb
2
2.6k
Perlの生きのこり - エンジニアがこの先生きのこるためのカンファレンス2025
kfly8
2
270
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
240
NFV基盤のOpenStack更新 ~9世代バージョンアップへの挑戦~
vtj
0
350
AIエージェント元年@日本生成AIユーザ会
shukob
1
200
Raycast AI APIを使ってちょっと便利な拡張機能を作ってみた / created-a-handy-extension-using-the-raycast-ai-api
kawamataryo
0
210
脳波を用いた嗜好マッチングシステム
hokkey621
0
280
アジャイルな開発チームでテスト戦略の話は誰がする? / Who Talks About Test Strategy?
ak1210
1
540
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
190
Featured
See All Featured
The Language of Interfaces
destraynor
156
24k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Scaling GitHub
holman
459
140k
A better future with KSS
kneath
238
17k
Producing Creativity
orderedlist
PRO
344
40k
Statistics for Hackers
jakevdp
797
220k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
What's in a price? How to price your products and services
michaelherold
244
12k
Transcript
『スタディサプリ for SCHOOL』における Flutter導入とその成果 RECRUIT TECH CONFERENCE 2025 Flutter/KMPを用いたアジリティ追求の軌跡 若宮 浩司
株式会社リクルート プロダクトディベロップメント室
若宮 浩司 OSS・TVゲーム・スポーツ観戦 経歴 / Career 2023年にリクルートにキャリア採用入社。 Flutterのエキスパートとして、『スタディサプリ for SCHOOL』のリプレイスプロジェクトに関わる。
ワンチームでAndroidとiOSの開発を行う体制に刷新した 案件が、2023年度まなび領域通期 MVPに選出される。 趣味 / Hobbies プロダクトディベロップメント室 販促領域プロダクトディベロップメント5ユニット (まなび) 進学情報プロダクト開発部 ForSCHOOL開発グループ
『スタディサプリ for SCHOOL』 • 主な機能 ◦ 適性診断 ◦ 学校検索、資料請求 ◦
オープンキャンパス検索、予約 ◦ 進路選択の履歴確認 • 提供プラットフォーム ◦ Android ◦ iOS ◦ Web 生徒の進路選択をサポートするサービス
Agenda 1. リプレイスプロジェクトの紹介 2. リプレイスプロジェクトの成果と振り返り 3. 開発効率に影響した2つの要素 4. まとめ
リプレイスプロジェクトの紹介 プロジェクトの概要 • AndroidとiOSのリプレイスプロジェクト ◦ 約1年半 (22年4月から23年12月) で達成 ◦ Add-to-app
(Androidのみ) から開始し、全コードをFlutterで書き直し ▪ ほぼ100% Dartのプロジェクトに刷新 • Webのリプレイスプロジェクト ◦ 1年弱 (24年4月~24年12月) で達成 ◦ AndroidとiOSとコードを分けずに、Web対応のコードを追加して対応 ▪ DartでブラウザAPIを利用する各種処理に対応
リプレイスプロジェクトの紹介 プロジェクトの概要 • AndroidとiOSのリプレイスプロジェクト ◦ 約1年半 (22年4月から23年12月) で達成 ◦ Add-to-app
(Androidのみ) から開始し、全コードをFlutterで書き直し ▪ ほぼ100% Dartのプロジェクトに刷新 • Webのリプレイスプロジェクト ◦ 1年弱 (24年4月~24年12月) で達成 ◦ AndroidとiOSとコードを分けずに、Web対応のコードを追加して対応 ▪ DartでブラウザAPIを利用する各種処理に対応
リプレイスプロジェクトの紹介 プロジェクトの概要 • AndroidとiOSのリプレイスプロジェクト ◦ 約1年半 (22年4月から23年12月) で達成 ◦ Add-to-app
(Androidのみ) から開始し、全コードをFlutterで書き直し ▪ ほぼ100% Dartのプロジェクトに刷新 • Webのリプレイスプロジェクト ◦ 1年弱 (24年4月~24年12月) で達成 ◦ AndroidとiOSとコードを分けずに、Web対応のコードを追加して対応 ▪ DartでブラウザAPIを利用する各種処理に対応
リプレイスプロジェクトの紹介 プロジェクトのねらい • 案件に対応する開発リソースの確保 ◦ 開発リソースを確保するのが難しい状況を解消したい ◦ 新規に開発したい機能に対して開発が追いついていない • プラットフォーム間の差異を無くしたい
◦ 学校現場ではWebアプリの重要性が高い ◦ 開発体制の関係でモバイルの方が開発が先行しがちになっている • 機能の開発スピードを高速にしたい ◦ 開発と管理にかかる工数を削減したい ◦ 議論がチームごとに分割される状態を解消したい
Flutterによるリプレイスプロジェクト プロジェクトのねらい • 案件に対応する開発リソースの確保 ◦ 開発リソースを確保するのが難しい状況を解消したい ◦ 新規に開発したい機能に対して開発が追いついていない • プラットフォーム間の差異を無くしたい
◦ 学校現場ではWebアプリの重要性が高い ◦ 開発体制の関係でモバイルの方が開発が先行しがちになっている • 機能の開発スピードを高速にしたい ◦ 開発と管理にかかる工数を削減したい ◦ 議論がチームごとに分割される状態を解消したい
リプレイスプロジェクトの紹介 リプレイス前の開発体制 Android SDK Kotlin ForSCHOOL開発グループ (Android開発チーム) iOS SDK Swift
ForSCHOOL開発グループ (iOS開発チーム) Vue.js TypeScript ForSCHOOL開発グループ (Web開発チーム) Androidアプリ iOSアプリ Webアプリ
リプレイスプロジェクトの紹介 リプレイス後の開発体制 Flutter Dart ForSCHOOL開発グループ (Flutter開発チーム) Flutter Dart ForSCHOOL開発グループ (Flutter開発チーム)
Flutter Dart ForSCHOOL開発グループ (Flutter開発チーム) Androidアプリ iOSアプリ Webアプリ
リプレイスプロジェクトの成果と振り返り リプレイスによる変化 • Andorid、iOS、Webの全プラットフォームをFlutterで開発 ◦ AndroidとiOSのエンジニアがチームの中心に ◦ 開発チームが徐々に合併することでワンチームに • 開発に関わる仕組みの統合
◦ チームごとのミーティングをグループのミーティングに統一 ◦ アプリごとのリポジトリをFlutterのリポジトリに統一 ◦ プラットフォームごとの開発チケットをFlutterに統一
リプレイスプロジェクトの成果と振り返り リプレイスによる変化 • Andorid、iOS、Webの全プラットフォームをFlutterで開発 ◦ AndroidとiOSのエンジニアがチームの中心に ◦ 開発チームが徐々に合併することでワンチームに • 開発に関わる仕組みの統合
◦ チームごとのミーティングをグループのミーティングに統一 ◦ アプリごとのリポジトリをFlutterのリポジトリに統一 ◦ プラットフォームごとの開発チケットをFlutterに統一
リプレイスプロジェクトの成果と振り返り 1/2 削減 すべて 解消 大幅に 向上 開発リソース プラットフォーム差異 開発スピード
リプレイスプロジェクトの成果と振り返り リプレイス前後の比較 • 開発に必要な開発リソース ◦ アプリとチームの統合が行われ、総開発工数を1/2以下に削減 ◦ チームを構成するエンジニア数も減少するも、リソース確保問題が解消 ⚡ •
プラットフォーム間の差異 ◦ リプレイス時に差異を全て確認した結果、想定外の差異は0に ◦ プラットフォームによる、提供される機能の差は解消 🎉 • 開発スピードが大きく向上 ◦ 単一言語に統一したことでPRレビューの質と量が向上 ◦ チケット管理などの手間も削減 ✂
リプレイスプロジェクトの成果と振り返り プロジェクトの副次的な成果 • iPadやAndroid Tabletなどのサポート ◦ ネイティブSDKによる実装ではサポートできていなかった ◦ Web対応の一環としてレイアウトを実装することで、追加工数なく対応 •
運営の中で手が回っていなかった仕組みも改善 ◦ アプリ内で利用するHTMLコンテンツの運用改善に着手 ◦ CI/CDを整備する中でQAプロセスの整理や改善にも着手
開発効率に影響した2つの要素 ワンチーム体制 『経験のないプラットフォーム』への チャレンジ
開発効率に影響した2つの要素 ワンチーム体制 • 段階的にFlutterを導入することで、アプリとチームが段階的に統合された ◦ Android → Android + iOS
→ Android + iOS + Web の順に統合 ◦ アプリの統合が進むと開発チームも徐々にひとつにまとまっていく • 1つのサービスに対して1つのチームの関係に ◦ 新たな案件の検討時に、プラットフォームごとの考慮が少なくなっていく ◦ 開発から運用までを、ひとつのチームが検討し運用する体制へ
開発効率に影響した2つの要素 ワンチーム体制 • 段階的にFlutterを導入することで、アプリとチームが段階的に統合された ◦ Android → Android + iOS
→ Android + iOS + Web の順に統合 ◦ アプリの統合が進むと開発チームも徐々にひとつにまとまっていく • 1つのサービスに対して1つのチームの関係に ◦ 新たな案件の検討時に、プラットフォームごとの考慮が少なくなっていく ◦ 開発から運用までを、ひとつのチームが検討し運用する体制へ 『スタディサプリ for SCHOOL』の開発に最適なチームが誕生
開発効率に影響した2つの要素 『経験のないプラットフォーム』へのチャレンジ • Flutterの導入によりチャレンジしやすい環境に変化 ◦ AndroidエンジニアがiOSアプリの開発に挑戦 ◦ モバイルエンジニアがWebアプリの開発に挑戦 • チャレンジによるスキルアップが、新たなチャレンジに繋がる好循環へ
◦ 開発効率が向上したことにより、ゆとりが生まれたことも状況を後押し ◦ チームが関わる領域が広がることで、開発や運用の効率が高まっていく
開発効率に影響した2つの要素 『経験のないプラットフォーム』へのチャレンジ • Flutterの導入によりチャレンジしやすい環境に変化 ◦ AndroidエンジニアがiOSアプリの開発に挑戦 ◦ モバイルエンジニアがWebアプリの開発に挑戦 • チャレンジによるスキルアップが、新たなチャレンジに繋がる好循環へ
◦ 開発効率が向上したことにより、ゆとりが生まれたことも状況を後押し ◦ チームが関わる領域が広がることで、開発や運用の効率が高まっていく 高スキルなメンバーで構成されるチームへ
まとめ Flutterによるリプレースプロジェクトによって 開発にかかるコストを削減 + メンバーのスキル向上により 2倍以上の開発生産性を獲得 ‼