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

• 2024/4/18
• https://cyberagent.connpass.com/event/314102/

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

• Kurisaki.Kazumaさん

作っているもの

• 3つのプロダクトが同一リポジトリ
• 3000行のコンポーネントとか
• propsバケツリレー
• useEffect chain

リファクタリング

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

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

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

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

• Koki Tsumuraさん
• https://speakerdeck.com/lycorptech_jp/yahoo-zhi-hui-dai-hurontoendoworiakitekutositeiruhua

知恵袋

• 1つのページでAPIをたくさん呼んでいる
• React/Express
• フレームワーク無しでSSR/CSRしてる

問題点

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

リファクタリング

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

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

• 鍛冶 維吹さん
• https://speakerdeck.com/kj455/da-gui-mo-reactapurinoriakitekutiya-8mo-xing-notanstack-queryyi-xing-nogui-ji

TanStack Queryへの移行

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

移行戦略

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

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

• Yusuke Tamemotoさん
• https://speakerdeck.com/lycorptech_jp/dezainkonponento-vue3maiguresiyonti-yan-ji

Vue2系EOL

• 2023/12にVue2系がEOL
• 共通UIコンポーネントも2系から3系にあげた

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で双方の書き方の違いを吸収