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
14
『スタディサプリ 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
39
技術的ミスと深堀り
recruitengineers
PRO
3
40
『ホットペッパーグルメ』における マルチプラットフォーム化の歩み
recruitengineers
PRO
2
22
『じゃらんnet』アプリ 改善活動の軌跡
recruitengineers
PRO
2
19
よりよいビジネスの「実現」のために エンジニアリングを発揮する
recruitengineers
PRO
3
54
イテレーティブな開発で 不確実性を乗り越える
recruitengineers
PRO
3
15
株式会社リクルート 社内ISUCONの裏側
recruitengineers
PRO
1
24
エンジニア主導の企画立案を可能にする組織とは?
recruitengineers
PRO
1
230
人材領域での企業と求職者のマッチング最大化
recruitengineers
PRO
1
20
Other Decks in Technology
See All in Technology
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
19k
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
8
3.9k
フォーイット_エンジニア向け会社紹介資料_Forit_Company_Profile.pdf
forit_tech
1
1.7k
脳波を用いた嗜好マッチングシステム
hokkey621
0
290
IAMのマニアックな話2025
nrinetcom
PRO
6
1.2k
ABWG2024採択者が語るエンジニアとしての自分自身の見つけ方〜発信して、つながって、世界を広げていく〜
maimyyym
1
190
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
300
Two Blades, One Journey: Engineering While Managing
ohbarye
4
2.2k
AIエージェント元年@日本生成AIユーザ会
shukob
1
230
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
190
[OpsJAWS Meetup33 AIOps] Amazon Bedrockガードレールで守る安全なAI運用
akiratameto
1
100
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
35
1.6k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
A better future with KSS
kneath
238
17k
KATA
mclloyd
29
14k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Building Your Own Lightsaber
phodgson
104
6.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
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倍以上の開発生産性を獲得 ‼