新規開発と並走したリファクタリング戦略

Slide 1

Slide 1 text

新規開発と並走したリファクタリング戦略 Kazuma.Kurisaki (@KK_sep_TT) 株式会社 AI-Shift Frontend Engineer

Slide 2

Slide 2 text

Who am I 栗崎一真 (Kurisaki Kazuma) 2023.5 AI-Shift 中途入社フロントエンドエンジニア Carrier: 2021 卒 Rakuten → CyberAgent Role: ️ Chat bot, Voice bot の管理画面の開発、保守、運用 Hobby: ️ ♠️ 🦑 💻 🚶 X: @KK_sep_TT GitHub: @Kult0922

Slide 3

Slide 3 text

今日話すこと 1. AI-Shift のプロダクト紹介 2. フロントの泥の紹介 3. リファクタの戦略と歩み 4. やってよかった取り組み、ツールの紹介 5. まとめ

Slide 4

Slide 4 text

つくっているもの AI messanger シリーズこんな管理画面を作っています結構複雑です 🌝

Slide 5

Slide 5 text

フロントエンドは一枚岩 Chat bot, Voice bot, Summary のすべてが同じレポジトリで管理されている

Slide 6

Slide 6 text

泥がたまってきている 🌪 ️ 古いバージョンのライブラリ React v16, Node v16, Webpack v4, React Router v5, Fireabasse SDK v7 🌝 巨大なコンポーネントファイル 1 ファイル 3000 行 🤹 複雑なアーキテクチャ関数props バケツリレーによるロジックのDI カスタム hooks 不使用 useEffect Chain 🪤 複雑な設定のwebpack ミドルウェアの設定大量の環境変数

Slide 7

Slide 7 text

どこから手をつけようか 💥 リスク時間をかけても達成できず、時間を浪費する変更の結果、より状況を悪化させてしまう 💎 リターン今後の開発速度アップコード変更の心理的安全開発がより楽しくなるリスクとリターンのトレードオフ

Slide 8

Slide 8 text

webpack → vite firebase v9 update エラーログ改善 emotion update リアーキテクト React v18 update Redux → SWR コンポーネント分割ドキュメント整備 Atomic Design 廃止ディレクトリ整理 Node update 日付ライブラリ導入ローディングUI 整備 useEffect chain 解消 yarn update React router v7 update リターンリスクおとく！大物

Slide 9

Slide 9 text

リファクタリングの優先順位リターンが大きく、リスクが小さいものからドメイン、コードへの理解が深まってから大物を狩りに行く簡単なリファクタリングでも大きなリファクタリングの土台になる

Slide 10

Slide 10 text

新規開発の波と新メンバー同時並行で3 つの新プロジェクトが走る新規メンバー加入正社員2 人と内定者バイト1 人のチーム新規開発が本格的にはじまった

Slide 11

Slide 11 text

チームメンバーは別プロジェクトへフロントは一枚岩なのでコードベースは同じメンバーそれぞれが、異なるプロジェクトに配置

Slide 12

Slide 12 text

新規開発と並走したリファクタリング開始話すこと保守、運用の目標を決める新規開発にあたり、優先して改善したいことを共有コーディングガイドラインの策定遭遇したコードの問題の共有話さないこと各プロジェクトのタスクの内容各プロジェクトの進捗各プロジェクトの問題チームメンバーで定例を週1 で開催こんな感じのページを作ってました

Slide 13

Slide 13 text

新規開発するときも改善を積極的に行う既存のコードの課題が多く、リファクタをした方が開発が早くなるケースもリファクタを行うかどうかは、実装者の判断に任せて柔軟に対応新規開発で触る部分は可能であれば、リファクタリングする方針に

Slide 14

Slide 14 text

レビューの戦略 1. 最初からリファクタと機能開発のコミットを分ける 2. 一旦、機能開発とリファクタをした後にコミットを綺麗に分ける 3. すべてをあきらめて同期的なコミュニケーションをとりながらレビューレビューの仕方を決めておくことで、安心してリファクタをPR に含めることができたそして、なによりリファクタリングをしてくれたメンバーに感謝 🙏

Slide 15

Slide 15 text

フロントエンドのリアーキテクトディレクトリ構成 Atomic Desing → Feature ベースサーバーキャッシュ管理 Redux → SWR ローカル state 管理コンポーネントにベタ書き → カスタムhook に分離関数の多段バケツリレー props から関数を受け取る → カスタムhook を通して関数を受け取るかなりやることがある 😨 すべての機能に対してリアーキテクトをするのは現実的ではない

Slide 16

Slide 16 text

フロントエンドのリアーキテクトデータの取得 → 画面に表示 → ユーザアクション → サーバリクエスト → 画面更新の一連の流れをリファクタ一部の機能に対してリアーキテクトを実施

Slide 17

Slide 17 text

フロントエンドのリアーキテクト既存機能に変更を加えるときに可能ならリアーキテクトする新機能開発のときは新アーキテクチャで実装する 1 つの指標ができたらそれに合わせてく

Slide 18

Slide 18 text

新規開発とリファクタのサイクル変更を加えようと開発している時はそのドメインに対して真剣に考えているとき新規開発で発生する新鮮でリアルな課題をリファクタ活動で解消リファクタの結果、新規開発の生産性が上がる

Slide 19

Slide 19 text

改善活動を助けてくれたツール Notion チームの活動ログ、定例まとめ Linear 取り組むタスクの優先度, 進捗を管理 Vite Press コードのドキュメント管理

Slide 20

Slide 20 text

タスク管理ツール特徴とにかく高速豊富なショートカットベロシティの可視化

Slide 21

Slide 21 text

VitePress 設計やコーディングガイドラインをドキュメント管理いい感じの見た目のドキュメントが簡単につくれるコードと一緒にGit 管理

Slide 22

Slide 22 text

まとめリファクタリングはローリスク、ハイリターンなものから取り組んだターゲットを絞ってリアーキテクトを実施機能変更、新規機能開発のときに可能なら新アーキテクチャで実装リファクタ込みのコード変更のレビューの方針を決めた DX を改善しながら機能開発をするのは楽しい！新規開発と並走したリファクタリング戦略