220419_LT#1 乱雑に組み込まれた技術から、Reactへの技術刷新の道のり（5周年記念イベント）/The path of technological renewal to React

atama plus創業5周年記念イベント・第2夜「急拡大したプロダクトの「技術課題」への向き合い方 〜開発チームの5年間・大公開SP～」にて、Webエンジニアの野村（@yukinomura_g）が登壇した際の資料です。
ぜひご覧ください。

▼イベント当日の動画はこちら
https://atamaplus-5th.studio.site/3-1

******
atama plusでは、新しい教育を創り、社会を変えていく仲間を募集しています。
ご興味もっていただいた方はぜひご応募ください！

▼採用サイト
https://recruiting.atama.plus/

▼募集職種一覧
https://herp.careers/v1/atamaplus

Transcript

1. 乱 雑 に 組 み 込 ま れ た 技 術 か ら
   R e a c t へ の 技 術 刷 新 の 道 の り
   野 村 宏 幸
   2022.4.19
   

   View Slide

2. ⾃⼰紹介
   2018.08〜 atama plus株式会社
   AI教材atama＋ 開発
   Webエンジニア
   2017.09〜2018.08 株式会社オージス総研
   名刺管理サービス（Sansan出向）
   Webエンジニア
   2013.10〜2017.08 セコムトラストシステムズ株式会社
   BCPサービス
   プロジェクトマネージャー兼Webエンジニア
   スクラムの導⼊
   2
   野 村 宏 幸
   #アタマプラス5周年
   

   View Slide

3. ⓒ 2022 atama plus Inc.
   アジェンダ
   1. 技術課題とITサービスの関係性
   2. atama＋ PORTALの技術課題
   • 5年の変化
   • 拡⼤の痛み
   3. フロントエンド刷新
   • React全⾯リプレイス
   • フェーズとチケット分割
   4. まとめ
   3
   乱雑に組み込まれた技術からReactへの技術刷新の道のり #アタマプラス5周年
   

   View Slide

4. 技術課題とITサービスの関係性
   

   View Slide

5. ⓒ 2022 atama plus Inc. 5
   世の中で技術課題を
   全て解決しているITサービスの数
   #アタマプラス5周年
   

   View Slide

6. ⓒ 2022 atama plus Inc. 6
   世の中で技術課題を
   全て解決しているITサービスの数
   ほぼない
   #アタマプラス5周年
   

   View Slide

7. ⓒ 2022 atama plus Inc. 7
   も5年運⽤していると
   例に漏れず課題をたくさん抱えます
   #アタマプラス5周年
   

   View Slide

8. ⓒ 2022 atama plus Inc.
   atama＋ PORTALの5年の変化
   乱雑に組み込まれた技術からReactへの技術刷新の道のり
   画⾯数
   〜1年⽬
   5〜10
   現在
   100以上
   数字を⾒るだけでも
   5年で10倍以上の規模
   #アタマプラス5周年
   

   View Slide

9. ⓒ 2022 atama plus Inc.
   拡⼤の痛み
   課題
   簡易なUIのみを想定してつくられたので、フロントエンド技術の最適解がない
   →作り⼿により異なる技術が埋め込まれる（秘伝のタレ）
   経緯
   初期は⼩規模で簡易なシステムで完結する予定
   現在は機能も複雑化し、リッチなUIが必要になる
   9
   乱雑に組み込まれた技術からReactへの技術刷新の道のり #アタマプラス5周年
   

   View Slide

10. ⓒ 2022 atama plus Inc.
    どうして簡易なページではダメだったのか
    10
    乱雑に組み込まれた技術からReactへの技術刷新の道のり
    授業
    ⽣徒の管理 保護者⾯談 塾運営・計画
    先⽣同⼠の
    サポート
    etc..
    でサポート
    先⽣のオペレーション負荷を下げるため、UIの改⾰が必要
    先⽣の
    タスク
    #アタマプラス5周年
    

    View Slide

11. ⓒ 2022 atama plus Inc.
    課題整理①
    秘伝のタレの中⾝
    Django Template
    jQuery
    Stimulus
    Vue
    11
    乱雑に組み込まれた技術からReactへの技術刷新の道のり #アタマプラス5周年
    

    View Slide

12. ⓒ 2022 atama plus Inc.
    とあるページ１ とあるページ２
    ①画⾯の外枠を表⽰
    ②検索アクション
    ③データを取得
    ④検索結果の表⽰
    課題整理② 秘伝のタレ具体例
    12
    乱雑に組み込まれた技術からReactへの技術刷新の道のり
    HEADER
    SEARCH
    LIST
    student1
    student2
    student3
    student4
    #アタマプラス5周年
    

    View Slide

13. そうだ、
    フロントエンドをすべて刷新しよう
    

    View Slide

14. ⓒ 2022 atama plus Inc.
    やりたいことは・・・
    14
    乱雑に組み込まれた技術からReactへの技術刷新の道のり
    フロントエンド技術を
    統⼀したい
    リッチなUIを
    簡単に作りたい
    #アタマプラス5周年
    

    View Slide

15. ⓒ 2022 atama plus Inc. 15
    Reactが良さそう
    Reactが良さそう
    #アタマプラス5周年
    

    View Slide

16. ⓒ 2022 atama plus Inc.
    React全⾯リプレイスとはいえ...
    お悩み
    エコシステムの技術選定
    →Reactで統⼀してもコアな技術選定がバラバラになっては本末転倒
    1週間スプリントを回しているが、対象ページは100P以上
    →1スプリントで全てをDONEするのは不可能
    16
    乱雑に組み込まれた技術からReactへの技術刷新の道のり #アタマプラス5周年
    

    View Slide

17. ⓒ 2022 atama plus Inc.
    チケット分割
    フェーズ分けをして課題解決の役割を分割。
    1スプリントでDONEできる⼤きさにチケット分割し、インクリメンタルに刷新。
    17
    乱雑に組み込まれた技術からReactへの技術刷新の道のり
    フェーズ1
    1ページを刷新してリリースまでする
    技術選定をやりきる
    フェーズ2
    全てのページをReact化する
    フェーズ1でできあがった参考コードを元に、全員で残りをやりきる
    フェーズ3
    Reactに最適化する
    刷新前コードの削除など、最終的な調整をする
    #アタマプラス5周年
    

    View Slide

18. ⓒ 2022 atama plus Inc.
    フェーズ1
    atama plus流の進め⽅
    刷新をドライブするメンバーと、フロントエンドに強いメンバーが集まって
    少⼈数のチームのタスクフォースを作成。
    まずは作りきることを⽬標に、短期集中的にエコシステムの技術選定を含めて
    リリースまでやりきった。
    18
    乱雑に組み込まれた技術からReactへの技術刷新の道のり
    フェーズ1
    1ページを刷新してリリースまでする
    技術選定をやりきる
    #アタマプラス5周年
    

    View Slide

19. ⓒ 2022 atama plus Inc.
    選定技術
    19
    乱雑に組み込まれた技術からReactへの技術刷新の道のり
    Rendering CSR
    インクリメンタルなWebアプリケーションのリプレイスと相性が良い。
    Backend Django Rest Framework
    インクリメンタルなリプレイスのため認証など既存PORTALと共有。
    ページ初期描画はDjango Templateを活⽤してReactを呼んでいる。
    Build Tools Vite
    開発速度が⾶躍的に上がる（とにかく速い）。
    UI Library Chakra UI
    atama plusのデザインシステム（uniform）のためのカスタマイズ性を重視。
    State
    Management
    SWR + Context API
    プロダクトの性質上、状態管理は書き込みより読み取りが多いためReduxを不採⽤。
    React SPAの技術選定で考えたこと（atama plus のケーススタディ）
    #アタマプラス5周年
    

    View Slide

20. ⓒ 2022 atama plus Inc.
    フェーズ2
    atama plus流の進め⽅
    チケットを1スプリントでDONEする⼤きさに切る。
    React SPAするまで⼤きすぎるページは、Django TemplateのみをReact化する
    「テンプレ移⾏」という途中段階を⽤意。
    （1ページごとReactアプリが⽴ち上がる状態）
    20
    乱雑に組み込まれた技術からReactへの技術刷新の道のり
    フェーズ2
    全てのページをReact化する
    フェーズ1でできあがった参考コードを元に、全員で残りをやりきる
    #アタマプラス5周年
    

    View Slide

21. ⓒ 2022 atama plus Inc.
    フェーズ3
    atama plus流の進め⽅
    フェーズ2までで拾いきれない積み残しを処理する。
    今すぐタスクを定義することは避けて、臨機応変に対応する予定。
    21
    乱雑に組み込まれた技術からReactへの技術刷新の道のり
    フェーズ3
    Reactに最適化する
    刷新前コードの削除など、最終的な調整をする
    #アタマプラス5周年
    

    View Slide

22. まとめ
    

    View Slide

23. ⓒ 2022 atama plus Inc.
    まとめ
    ● 初期の技術選定が問題だったとは考えていない
    ● プロダクトのあり⽅が変わったことで、技術課題という形で出てきただけ
    ● 今後も必ず出てくる痛みにもatama plusは挑み続ける
    23
    乱雑に組み込まれた技術からReactへの技術刷新の道のり #アタマプラス5周年
    

    View Slide

24. ⓒ 2022 atama plus Inc. 24
    急拡⼤するプロダクトに伴う痛みに
    向き合うことは、
    結果的に本質的な価値を提供する
    近道であると信じています
    #アタマプラス5周年
    

    View Slide