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
2. ⾃⼰紹介 2018.08〜 atama plus株式会社 AI教材atama＋ 開発 Webエンジニア 2017.09〜2018.08 株式会社オージス総研 名刺管理サービス（Sansan出向） Webエンジニア 2013.10〜2017.08 セコムトラストシステムズ株式会社 BCPサービス プロジェクトマネージャー兼Webエンジニア スクラムの導⼊ 2 野 村 宏 幸 #アタマプラス5周年
3. ⓒ 2022 atama plus Inc. アジェンダ 1. 技術課題とITサービスの関係性 2. atama＋ PORTALの技術課題 • 5年の変化 • 拡⼤の痛み 3. フロントエンド刷新 • React全⾯リプレイス • フェーズとチケット分割 4. まとめ 3 乱雑に組み込まれた技術からReactへの技術刷新の道のり #アタマプラス5周年
4. 技術課題とITサービスの関係性
5. ⓒ 2022 atama plus Inc. 5 世の中で技術課題を 全て解決しているITサービスの数 #アタマプラス5周年
6. ⓒ 2022 atama plus Inc. 6 世の中で技術課題を 全て解決しているITサービスの数 ほぼない #アタマプラス5周年
7. ⓒ 2022 atama plus Inc. 7 も5年運⽤していると 例に漏れず課題をたくさん抱えます #アタマプラス5周年
8. ⓒ 2022 atama plus Inc. atama＋ PORTALの5年の変化 乱雑に組み込まれた技術からReactへの技術刷新の道のり 画⾯数 〜1年⽬ 5〜10 現在 100以上 数字を⾒るだけでも 5年で10倍以上の規模 #アタマプラス5周年
9. ⓒ 2022 atama plus Inc. 拡⼤の痛み 課題 簡易なUIのみを想定してつくられたので、フロントエンド技術の最適解がない →作り⼿により異なる技術が埋め込まれる（秘伝のタレ） 経緯 初期は⼩規模で簡易なシステムで完結する予定 現在は機能も複雑化し、リッチなUIが必要になる 9 乱雑に組み込まれた技術からReactへの技術刷新の道のり #アタマプラス5周年
10. ⓒ 2022 atama plus Inc. どうして簡易なページではダメだったのか 10 乱雑に組み込まれた技術からReactへの技術刷新の道のり 授業 ⽣徒の管理 保護者⾯談 塾運営・計画 先⽣同⼠の サポート etc.. でサポート 先⽣のオペレーション負荷を下げるため、UIの改⾰が必要 先⽣の タスク #アタマプラス5周年
11. ⓒ 2022 atama plus Inc. 課題整理① 秘伝のタレの中⾝ Django Template jQuery Stimulus Vue 11 乱雑に組み込まれた技術からReactへの技術刷新の道のり #アタマプラス5周年
12. ⓒ 2022 atama plus Inc. とあるページ１ とあるページ２ ①画⾯の外枠を表⽰ ②検索アクション ③データを取得 ④検索結果の表⽰ 課題整理② 秘伝のタレ具体例 12 乱雑に組み込まれた技術からReactへの技術刷新の道のり HEADER SEARCH LIST student1 student2 student3 student4 #アタマプラス5周年
13. そうだ、 フロントエンドをすべて刷新しよう
14. ⓒ 2022 atama plus Inc. やりたいことは・・・ 14 乱雑に組み込まれた技術からReactへの技術刷新の道のり フロントエンド技術を 統⼀したい リッチなUIを 簡単に作りたい #アタマプラス5周年
15. ⓒ 2022 atama plus Inc. 15 Reactが良さそう Reactが良さそう #アタマプラス5周年
16. ⓒ 2022 atama plus Inc. React全⾯リプレイスとはいえ... お悩み エコシステムの技術選定 →Reactで統⼀してもコアな技術選定がバラバラになっては本末転倒 1週間スプリントを回しているが、対象ページは100P以上 →1スプリントで全てをDONEするのは不可能 16 乱雑に組み込まれた技術からReactへの技術刷新の道のり #アタマプラス5周年
17. ⓒ 2022 atama plus Inc. チケット分割 フェーズ分けをして課題解決の役割を分割。 1スプリントでDONEできる⼤きさにチケット分割し、インクリメンタルに刷新。 17 乱雑に組み込まれた技術からReactへの技術刷新の道のり フェーズ1 1ページを刷新してリリースまでする 技術選定をやりきる フェーズ2 全てのページをReact化する フェーズ1でできあがった参考コードを元に、全員で残りをやりきる フェーズ3 Reactに最適化する 刷新前コードの削除など、最終的な調整をする #アタマプラス5周年
18. ⓒ 2022 atama plus Inc. フェーズ1 atama plus流の進め⽅ 刷新をドライブするメンバーと、フロントエンドに強いメンバーが集まって 少⼈数のチームのタスクフォースを作成。 まずは作りきることを⽬標に、短期集中的にエコシステムの技術選定を含めて リリースまでやりきった。 18 乱雑に組み込まれた技術からReactへの技術刷新の道のり フェーズ1 1ページを刷新してリリースまでする 技術選定をやりきる #アタマプラス5周年
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周年
20. ⓒ 2022 atama plus Inc. フェーズ2 atama plus流の進め⽅ チケットを1スプリントでDONEする⼤きさに切る。 React SPAするまで⼤きすぎるページは、Django TemplateのみをReact化する 「テンプレ移⾏」という途中段階を⽤意。 （1ページごとReactアプリが⽴ち上がる状態） 20 乱雑に組み込まれた技術からReactへの技術刷新の道のり フェーズ2 全てのページをReact化する フェーズ1でできあがった参考コードを元に、全員で残りをやりきる #アタマプラス5周年
21. ⓒ 2022 atama plus Inc. フェーズ3 atama plus流の進め⽅ フェーズ2までで拾いきれない積み残しを処理する。 今すぐタスクを定義することは避けて、臨機応変に対応する予定。 21 乱雑に組み込まれた技術からReactへの技術刷新の道のり フェーズ3 Reactに最適化する 刷新前コードの削除など、最終的な調整をする #アタマプラス5周年
22. まとめ
23. ⓒ 2022 atama plus Inc. まとめ • 初期の技術選定が問題だったとは考えていない • プロダクトのあり⽅が変わったことで、技術課題という形で出てきただけ • 今後も必ず出てくる痛みにもatama plusは挑み続ける 23 乱雑に組み込まれた技術からReactへの技術刷新の道のり #アタマプラス5周年
24. ⓒ 2022 atama plus Inc. 24 急拡⼤するプロダクトに伴う痛みに 向き合うことは、 結果的に本質的な価値を提供する 近道であると信じています #アタマプラス5周年