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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide