『スタディサプリ for SCHOOL』における Flutter導入とその成果

2025/2/19に開催したRecruit Tech Conference 2025の若宮の資料です

Transcript

1. 『スタディサプリ for SCHOOL』における Flutter導入とその成果 RECRUIT TECH CONFERENCE 2025 Flutter/KMPを用いたアジリティ追求の軌跡 若宮　浩司 株式会社リクルート プロダクトディベロップメント室
2. 若宮 浩司 OSS・TVゲーム・スポーツ観戦 経歴 / Career 2023年にリクルートにキャリア採用入社。 Flutterのエキスパートとして、『スタディサプリ for SCHOOL』のリプレイスプロジェクトに関わる。 ワンチームでAndroidとiOSの開発を行う体制に刷新した 案件が、2023年度まなび領域通期 MVPに選出される。 趣味 / Hobbies プロダクトディベロップメント室 販促領域プロダクトディベロップメント５ユニット （まなび） 進学情報プロダクト開発部 ＦｏｒＳＣＨＯＯＬ開発グループ
3. 『スタディサプリ for SCHOOL』 • 主な機能 ◦ 適性診断 ◦ 学校検索、資料請求 ◦ オープンキャンパス検索、予約 ◦ 進路選択の履歴確認 • 提供プラットフォーム ◦ Android ◦ iOS ◦ Web 生徒の進路選択をサポートするサービス
4. Agenda 1. リプレイスプロジェクトの紹介 2. リプレイスプロジェクトの成果と振り返り 3. 開発効率に影響した2つの要素 4. まとめ
5. リプレイスプロジェクトの紹介 プロジェクトの概要 • 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を利用する各種処理に対応
6. リプレイスプロジェクトの紹介 プロジェクトの概要 • 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を利用する各種処理に対応
7. リプレイスプロジェクトの紹介 プロジェクトの概要 • 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を利用する各種処理に対応
8. リプレイスプロジェクトの紹介 プロジェクトのねらい • 案件に対応する開発リソースの確保 ◦ 開発リソースを確保するのが難しい状況を解消したい ◦ 新規に開発したい機能に対して開発が追いついていない • プラットフォーム間の差異を無くしたい ◦ 学校現場ではWebアプリの重要性が高い ◦ 開発体制の関係でモバイルの方が開発が先行しがちになっている • 機能の開発スピードを高速にしたい ◦ 開発と管理にかかる工数を削減したい ◦ 議論がチームごとに分割される状態を解消したい
9. Flutterによるリプレイスプロジェクト プロジェクトのねらい • 案件に対応する開発リソースの確保 ◦ 開発リソースを確保するのが難しい状況を解消したい ◦ 新規に開発したい機能に対して開発が追いついていない • プラットフォーム間の差異を無くしたい ◦ 学校現場ではWebアプリの重要性が高い ◦ 開発体制の関係でモバイルの方が開発が先行しがちになっている • 機能の開発スピードを高速にしたい ◦ 開発と管理にかかる工数を削減したい ◦ 議論がチームごとに分割される状態を解消したい
10. リプレイスプロジェクトの紹介 リプレイス前の開発体制 Android SDK Kotlin ForSCHOOL開発グループ (Android開発チーム) iOS SDK Swift ForSCHOOL開発グループ (iOS開発チーム) Vue.js TypeScript ForSCHOOL開発グループ (Web開発チーム) Androidアプリ iOSアプリ Webアプリ
11. リプレイスプロジェクトの紹介 リプレイス後の開発体制 Flutter Dart ForSCHOOL開発グループ (Flutter開発チーム) Flutter Dart ForSCHOOL開発グループ (Flutter開発チーム) Flutter Dart ForSCHOOL開発グループ (Flutter開発チーム) Androidアプリ iOSアプリ Webアプリ
12. リプレイスプロジェクトの成果と振り返り リプレイスによる変化 • Andorid、iOS、Webの全プラットフォームをFlutterで開発 ◦ AndroidとiOSのエンジニアがチームの中心に ◦ 開発チームが徐々に合併することでワンチームに • 開発に関わる仕組みの統合 ◦ チームごとのミーティングをグループのミーティングに統一 ◦ アプリごとのリポジトリをFlutterのリポジトリに統一 ◦ プラットフォームごとの開発チケットをFlutterに統一
13. リプレイスプロジェクトの成果と振り返り リプレイスによる変化 • Andorid、iOS、Webの全プラットフォームをFlutterで開発 ◦ AndroidとiOSのエンジニアがチームの中心に ◦ 開発チームが徐々に合併することでワンチームに • 開発に関わる仕組みの統合 ◦ チームごとのミーティングをグループのミーティングに統一 ◦ アプリごとのリポジトリをFlutterのリポジトリに統一 ◦ プラットフォームごとの開発チケットをFlutterに統一
14. リプレイスプロジェクトの成果と振り返り 1/2 削減 すべて 解消 大幅に 向上 開発リソース プラットフォーム差異 開発スピード
15. リプレイスプロジェクトの成果と振り返り リプレイス前後の比較 • 開発に必要な開発リソース ◦ アプリとチームの統合が行われ、総開発工数を1/2以下に削減 ◦ チームを構成するエンジニア数も減少するも、リソース確保問題が解消 ⚡ • プラットフォーム間の差異 ◦ リプレイス時に差異を全て確認した結果、想定外の差異は0に ◦ プラットフォームによる、提供される機能の差は解消 🎉 • 開発スピードが大きく向上 ◦ 単一言語に統一したことでPRレビューの質と量が向上 ◦ チケット管理などの手間も削減 ✂
16. リプレイスプロジェクトの成果と振り返り プロジェクトの副次的な成果 • iPadやAndroid Tabletなどのサポート ◦ ネイティブSDKによる実装ではサポートできていなかった ◦ Web対応の一環としてレイアウトを実装することで、追加工数なく対応 • 運営の中で手が回っていなかった仕組みも改善 ◦ アプリ内で利用するHTMLコンテンツの運用改善に着手 ◦ CI/CDを整備する中でQAプロセスの整理や改善にも着手
17. 開発効率に影響した2つの要素 ワンチーム体制 『経験のないプラットフォーム』への チャレンジ
18. 開発効率に影響した2つの要素 ワンチーム体制 • 段階的にFlutterを導入することで、アプリとチームが段階的に統合された ◦ Android → Android + iOS → Android + iOS + Web の順に統合 ◦ アプリの統合が進むと開発チームも徐々にひとつにまとまっていく • 1つのサービスに対して1つのチームの関係に ◦ 新たな案件の検討時に、プラットフォームごとの考慮が少なくなっていく ◦ 開発から運用までを、ひとつのチームが検討し運用する体制へ
19. 開発効率に影響した2つの要素 ワンチーム体制 • 段階的にFlutterを導入することで、アプリとチームが段階的に統合された ◦ Android → Android + iOS → Android + iOS + Web の順に統合 ◦ アプリの統合が進むと開発チームも徐々にひとつにまとまっていく • 1つのサービスに対して1つのチームの関係に ◦ 新たな案件の検討時に、プラットフォームごとの考慮が少なくなっていく ◦ 開発から運用までを、ひとつのチームが検討し運用する体制へ 『スタディサプリ for SCHOOL』の開発に最適なチームが誕生
20. 開発効率に影響した2つの要素 『経験のないプラットフォーム』へのチャレンジ • Flutterの導入によりチャレンジしやすい環境に変化 ◦ AndroidエンジニアがiOSアプリの開発に挑戦 ◦ モバイルエンジニアがWebアプリの開発に挑戦 • チャレンジによるスキルアップが、新たなチャレンジに繋がる好循環へ ◦ 開発効率が向上したことにより、ゆとりが生まれたことも状況を後押し ◦ チームが関わる領域が広がることで、開発や運用の効率が高まっていく
21. 開発効率に影響した2つの要素 『経験のないプラットフォーム』へのチャレンジ • Flutterの導入によりチャレンジしやすい環境に変化 ◦ AndroidエンジニアがiOSアプリの開発に挑戦 ◦ モバイルエンジニアがWebアプリの開発に挑戦 • チャレンジによるスキルアップが、新たなチャレンジに繋がる好循環へ ◦ 開発効率が向上したことにより、ゆとりが生まれたことも状況を後押し ◦ チームが関わる領域が広がることで、開発や運用の効率が高まっていく 高スキルなメンバーで構成されるチームへ
22. まとめ Flutterによるリプレースプロジェクトによって 開発にかかるコストを削減 + メンバーのスキル向上により 2倍以上の開発生産性を獲得 ‼