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

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

CyberAgent
April 22, 2024
750

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

株式会社AI-Shiftでは、AIを活用した chat bot, voice bot を開発しています。 これらのプロダクトは3年ほど前から運用されており、多くの技術的負債が溜まっていました。 しかしフロントエンドエンジニアが少ない時期が長く、これらの負債に手を付けらていませんでした。 最近になりフロントエンドのメンバーが増え、技術的負債に立ち向かいながら開発を進めることができるようになりました。 本セッションでは新規開発と並行で取り組んだコードベースアーキテクチャの変更、技術的負債の解消、チーム開発でのDX向上の活動についてお話します。

CyberAgent

April 22, 2024
Tweet

More Decks by CyberAgent

Transcript

  1. 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
  2. 泥がたまってきている 🌪 ️ 古いバージョンのライブラリ React v16, Node v16, Webpack v4,

    React Router v5, Fireabasse SDK v7 🌝 巨大なコンポーネントファイル 1 ファイル 3000 行 🤹 複雑なアーキテクチャ 関数props バケツリレーによるロジックのDI カスタム hooks 不使用 useEffect Chain 🪤 複雑な設定のwebpack ミドルウェアの設定 大量の環境変数
  3. 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 リターン リスク おとく! 大物
  4. フロントエンドのリアーキテクト ディレクトリ構成 Atomic Desing → Feature ベース サーバーキャッシュ管理 Redux →

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