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

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

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

atama plus

April 19, 2022
Tweet

More Decks by atama plus

Other Decks in Programming

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. ⓒ 2022 atama plus Inc. atama+ PORTALの5年の変化 乱雑に組み込まれた技術からReactへの技術刷新の道のり 画⾯数 〜1年⽬

    5〜10 現在 100以上 数字を⾒るだけでも 5年で10倍以上の規模 #アタマプラス5周年
  5. ⓒ 2022 atama plus Inc. 拡⼤の痛み 課題 簡易なUIのみを想定してつくられたので、フロントエンド技術の最適解がない →作り⼿により異なる技術が埋め込まれる(秘伝のタレ) 経緯

    初期は⼩規模で簡易なシステムで完結する予定 現在は機能も複雑化し、リッチなUIが必要になる 9 乱雑に組み込まれた技術からReactへの技術刷新の道のり #アタマプラス5周年
  6. ⓒ 2022 atama plus Inc. どうして簡易なページではダメだったのか 10 乱雑に組み込まれた技術からReactへの技術刷新の道のり 授業 ⽣徒の管理

    保護者⾯談 塾運営・計画 先⽣同⼠の サポート etc.. でサポート 先⽣のオペレーション負荷を下げるため、UIの改⾰が必要 先⽣の タスク #アタマプラス5周年
  7. ⓒ 2022 atama plus Inc. 課題整理① 秘伝のタレの中⾝ Django Template jQuery

    Stimulus Vue 11 乱雑に組み込まれた技術からReactへの技術刷新の道のり #アタマプラス5周年
  8. ⓒ 2022 atama plus Inc. とあるページ1 とあるページ2 ①画⾯の外枠を表⽰ ②検索アクション ③データを取得

    ④検索結果の表⽰ 課題整理② 秘伝のタレ具体例 12 乱雑に組み込まれた技術からReactへの技術刷新の道のり HEADER SEARCH LIST student1 student2 student3 student4 #アタマプラス5周年
  9. ⓒ 2022 atama plus Inc. チケット分割 フェーズ分けをして課題解決の役割を分割。 1スプリントでDONEできる⼤きさにチケット分割し、インクリメンタルに刷新。 17 乱雑に組み込まれた技術からReactへの技術刷新の道のり

    フェーズ1 1ページを刷新してリリースまでする 技術選定をやりきる フェーズ2 全てのページをReact化する フェーズ1でできあがった参考コードを元に、全員で残りをやりきる フェーズ3 Reactに最適化する 刷新前コードの削除など、最終的な調整をする #アタマプラス5周年
  10. ⓒ 2022 atama plus Inc. フェーズ1 atama plus流の進め⽅ 刷新をドライブするメンバーと、フロントエンドに強いメンバーが集まって 少⼈数のチームのタスクフォースを作成。

    まずは作りきることを⽬標に、短期集中的にエコシステムの技術選定を含めて リリースまでやりきった。 18 乱雑に組み込まれた技術からReactへの技術刷新の道のり フェーズ1 1ページを刷新してリリースまでする 技術選定をやりきる #アタマプラス5周年
  11. ⓒ 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周年
  12. ⓒ 2022 atama plus Inc. フェーズ2 atama plus流の進め⽅ チケットを1スプリントでDONEする⼤きさに切る。 React

    SPAするまで⼤きすぎるページは、Django TemplateのみをReact化する 「テンプレ移⾏」という途中段階を⽤意。 (1ページごとReactアプリが⽴ち上がる状態) 20 乱雑に組み込まれた技術からReactへの技術刷新の道のり フェーズ2 全てのページをReact化する フェーズ1でできあがった参考コードを元に、全員で残りをやりきる #アタマプラス5周年
  13. ⓒ 2022 atama plus Inc. フェーズ3 atama plus流の進め⽅ フェーズ2までで拾いきれない積み残しを処理する。 今すぐタスクを定義することは避けて、臨機応変に対応する予定。

    21 乱雑に組み込まれた技術からReactへの技術刷新の道のり フェーズ3 Reactに最適化する 刷新前コードの削除など、最終的な調整をする #アタマプラス5周年
  14. ⓒ 2022 atama plus Inc. まとめ • 初期の技術選定が問題だったとは考えていない • プロダクトのあり⽅が変わったことで、技術課題という形で出てきただけ

    • 今後も必ず出てくる痛みにもatama plusは挑み続ける 23 乱雑に組み込まれた技術からReactへの技術刷新の道のり #アタマプラス5周年