「Muddy Web #8 ~Special Edition~【ゲスト: LINEヤフー】」に参加してきました

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

作っているもの

リファクタリング

  • リターンが大きくリスクが小さいものから
  • ドメインやコードの理解が深まってから大物を
  • 新規開発でもリファクタをすることも
    • その方が早くなるケース

フロントエンドのりアーキ

  • やったこと
    • AtimicDesighからFeatureベースへ
    • ReduxからSWRへ
    • カスタムhookでコンポーネントから処理を分離
  • 機能ごとに段階的に
    • 新規機能は新しい方で

Yahoo! 知恵袋フロントエンドをリアーキテクトしている話

知恵袋

問題点

  • 少しだけ違う似たようなコードがたくさん
  • 処理が入り乱れている
  • 少し何かを変えるとテストが落ちまくる
  • 型がないから実行時に発覚するエラーが多い
  • テスト一番大きくて26000行

リファクタリング

  • 一番閲覧/機能が多い質問詳細ページを対象に
  • controllerのロジックをmodelとutilityに移動
  • 共通処理をまとめる
  • 切り出した処理のテストを書く
  • TS化する

WINTICKET における8万行の Redux コードの TanStack Query への段階的移行

TanStack Queryへの移行

  • Reduxでのステート
    • サーバレスポンス
    • グローバルステート
    • ローカルステート
  • Reduxだと非同期処理でライブラリが追加で必要
    • redux-thunkとか
  • サーバレスポンスのキャッシュだけTanStack Queryに移行した
    • それ以外はReduxのまま

移行戦略

    1. 影響/依存小さい箇所
    2. 既存アーキテクチャとの共存
    1. コアロジック
    2. 複雑な要件に耐えうるか
    1. 残り
    2. 妥当性は確認済みなので後はやるだけ

デザインコンポーネント vue3マイグレーション体験記

Vue2系EOL

vupの壁

  • vee-validateをv3からv4へ
  • viteとWebpackを共存しないといけない
    • スケジュールの都合で
    • 当初はvue2/webpackをvue2/viteにしてvue3/viteにしようとしていた

viteとwebpackの共存

  • npmのworkspaceを使った
    • モノレポ構成でviteとwebpackを分離した
  • workspaceを使うことによる課題
    • Swiperのscssのビルドが通らない
      • 最新版にしてnode_module配下に対して独自にaliasでかいけつ
    • viteだと変数含んだimportだと~などのエイリアスが使えない
      • Vue.prototypeで双方の書き方の違いを吸収