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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

ⓒ 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周年

Slide 20

Slide 20 text

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