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
脳波を用いた嗜好マッチングシステム
hokkey621
0
280
AIエージェント元年@日本生成AIユーザ会
shukob
1
200
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
6
2.6k
ABWG2024採択者が語るエンジニアとしての自分自身の見つけ方〜発信して、つながって、世界を広げていく〜
maimyyym
1
130
RemoveだらけのPHPUnit 12に備えよう
cocoeyes02
0
270
実は強い 非ViTな画像認識モデル
tattaka
2
1.2k
Change Managerを活用して本番環境へのセキュアなGUIアクセスを統制する / Control Secure GUI Access to the Production Environment with Change Manager
yuj1osm
0
100
依存パッケージの更新はコツコツが勝つコツ! / phpcon_nagoya2025
blue_goheimochi
3
210
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
7
660
急成長する企業で作った、エンジニアが輝ける制度/ 20250227 Rinto Ikenoue
shift_evolve
0
130
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
190
Perlの生きのこり - エンジニアがこの先生きのこるためのカンファレンス2025
kfly8
2
270
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Documentation Writing (for coders)
carmenintech
67
4.6k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Code Reviewing Like a Champion
maltzj
521
39k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
A Philosophy of Restraint
colly
203
16k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Site-Speed That Sticks
csswizardry
4
400
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
370
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
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倍以上の開発生産性を獲得 ‼