Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Recruit

March 03, 2025
Tweet

More Decks by Recruit

Other Decks in Technology

Transcript

  1. 若宮 浩司 OSS・TVゲーム・スポーツ観戦 経歴 / Career 2023年にリクルートにキャリア採用入社。 Flutterのエキスパートとして、『スタディサプリ for SCHOOL』のリプレイスプロジェクトに関わる。

    ワンチームでAndroidとiOSの開発を行う体制に刷新した 案件が、2023年度まなび領域通期 MVPに選出される。 趣味 / Hobbies プロダクトディベロップメント室 販促領域プロダクトディベロップメント5ユニット (まなび) 進学情報プロダクト開発部 ForSCHOOL開発グループ
  2. 『スタディサプリ for SCHOOL』 • 主な機能 ◦ 適性診断 ◦ 学校検索、資料請求 ◦

    オープンキャンパス検索、予約 ◦ 進路選択の履歴確認 • 提供プラットフォーム ◦ Android ◦ iOS ◦ Web 生徒の進路選択をサポートするサービス
  3. リプレイスプロジェクトの紹介 プロジェクトの概要 • 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を利用する各種処理に対応
  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を利用する各種処理に対応
  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. リプレイスプロジェクトの紹介 プロジェクトのねらい • 案件に対応する開発リソースの確保 ◦ 開発リソースを確保するのが難しい状況を解消したい ◦ 新規に開発したい機能に対して開発が追いついていない • プラットフォーム間の差異を無くしたい

    ◦ 学校現場ではWebアプリの重要性が高い ◦ 開発体制の関係でモバイルの方が開発が先行しがちになっている • 機能の開発スピードを高速にしたい ◦ 開発と管理にかかる工数を削減したい ◦ 議論がチームごとに分割される状態を解消したい
  7. Flutterによるリプレイスプロジェクト プロジェクトのねらい • 案件に対応する開発リソースの確保 ◦ 開発リソースを確保するのが難しい状況を解消したい ◦ 新規に開発したい機能に対して開発が追いついていない • プラットフォーム間の差異を無くしたい

    ◦ 学校現場ではWebアプリの重要性が高い ◦ 開発体制の関係でモバイルの方が開発が先行しがちになっている • 機能の開発スピードを高速にしたい ◦ 開発と管理にかかる工数を削減したい ◦ 議論がチームごとに分割される状態を解消したい
  8. リプレイスプロジェクトの紹介 リプレイス前の開発体制 Android SDK Kotlin ForSCHOOL開発グループ (Android開発チーム) iOS SDK Swift

    ForSCHOOL開発グループ (iOS開発チーム) Vue.js TypeScript ForSCHOOL開発グループ (Web開発チーム) Androidアプリ iOSアプリ Webアプリ
  9. リプレイスプロジェクトの成果と振り返り リプレイスによる変化 • Andorid、iOS、Webの全プラットフォームをFlutterで開発 ◦ AndroidとiOSのエンジニアがチームの中心に ◦ 開発チームが徐々に合併することでワンチームに • 開発に関わる仕組みの統合

    ◦ チームごとのミーティングをグループのミーティングに統一 ◦ アプリごとのリポジトリをFlutterのリポジトリに統一 ◦ プラットフォームごとの開発チケットをFlutterに統一
  10. リプレイスプロジェクトの成果と振り返り リプレイスによる変化 • Andorid、iOS、Webの全プラットフォームをFlutterで開発 ◦ AndroidとiOSのエンジニアがチームの中心に ◦ 開発チームが徐々に合併することでワンチームに • 開発に関わる仕組みの統合

    ◦ チームごとのミーティングをグループのミーティングに統一 ◦ アプリごとのリポジトリをFlutterのリポジトリに統一 ◦ プラットフォームごとの開発チケットをFlutterに統一
  11. リプレイスプロジェクトの成果と振り返り リプレイス前後の比較 • 開発に必要な開発リソース ◦ アプリとチームの統合が行われ、総開発工数を1/2以下に削減 ◦ チームを構成するエンジニア数も減少するも、リソース確保問題が解消 ⚡ •

    プラットフォーム間の差異 ◦ リプレイス時に差異を全て確認した結果、想定外の差異は0に ◦ プラットフォームによる、提供される機能の差は解消 🎉 • 開発スピードが大きく向上 ◦ 単一言語に統一したことでPRレビューの質と量が向上 ◦ チケット管理などの手間も削減 ✂
  12. 開発効率に影響した2つの要素 ワンチーム体制 • 段階的にFlutterを導入することで、アプリとチームが段階的に統合された ◦ Android → Android + iOS

    → Android + iOS + Web の順に統合 ◦ アプリの統合が進むと開発チームも徐々にひとつにまとまっていく • 1つのサービスに対して1つのチームの関係に ◦ 新たな案件の検討時に、プラットフォームごとの考慮が少なくなっていく ◦ 開発から運用までを、ひとつのチームが検討し運用する体制へ
  13. 開発効率に影響した2つの要素 ワンチーム体制 • 段階的にFlutterを導入することで、アプリとチームが段階的に統合された ◦ Android → Android + iOS

    → Android + iOS + Web の順に統合 ◦ アプリの統合が進むと開発チームも徐々にひとつにまとまっていく • 1つのサービスに対して1つのチームの関係に ◦ 新たな案件の検討時に、プラットフォームごとの考慮が少なくなっていく ◦ 開発から運用までを、ひとつのチームが検討し運用する体制へ 『スタディサプリ for SCHOOL』の開発に最適なチームが誕生