Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

負債が溜まったレガシーフロントエンド画面を Vue.js でリプレイスした話

t0yohei
October 16, 2022

負債が溜まったレガシーフロントエンド画面を Vue.js でリプレイスした話

Vue Fes Japan Online 2022 での発表資料です。
https://vuefes.jp/2022/sessions/t0yohei

t0yohei

October 16, 2022
Tweet

More Decks by t0yohei

Other Decks in Programming

Transcript

  1. 自己紹介 • とよへい ( @t0yohei ) • 株式会社クラウドワークス ◦ Web

    エンジニア • アニメとコーヒーが好き • Vue.js / Ruby / PHP
  2. ひとまずの Vue.js 化を行う画面 • 練習用の管理画面 × 1 • 一般ユーザー向けの簡単な画面 ×

    2 • 一般ユーザー向けの難しい画面 × 1 • (これらの画面の対応が終わったら、体制を整えて Vue.js 化を継続する)
  3. 各種ツールと人力で品質を担保 • Storybook ◦ コンポーネント毎の動作を担保 • VRT(Visual Regression Testing) ◦

    見た目の確認と、置き換え途中でデグレしていないことを担保 • vue-test-utils ◦ API 通信などの動作を担保 • 手動テスト ◦ 統合的な動きを担保
  4. 具体的には • 命令的 UI を宣言的 UI にする • Rails, jQuery

    のコードを Vue.js, TypeScript のコードに書き換える • バックエンド(Rails)からフロントエンド(Vue)に適切な値を引き渡す
  5. 工夫: Containar Component で統制を取りやすく • style を持たない Vue コンポーネント •

    自身が含むプレゼンテーションコンポーネントにデータを受け渡す • バックエンド API とやりとりするためのインターフェースを持つ
  6. 期待する動作 1. 画面初期化時は ajax でボタンの html(json) を取ってくるんじゃなくて、 watchlist の状態だけもらっておいて Vue.js

    側でボタンの出し分けをする 2. 気になるボタンが押されたら、追加リクエストを送る 3. 追加された watchlist の id をレスポンスで受け取り、取り消しボタンを表示する 4. 取り消しボタンが押されたら、2で取得した id をつけて取り消しリクエストを送 る
  7. 課題は何か • 取り消しリクエストには watchlist の id が必要 • 現状の watchlist

    追加 API だと、レスポンス json の html の中に watchlist の id が埋まって いて取り出しにくい
  8. 現状の watchlist 追加 API のレスポンスに、 追加された watchlist の id 加えてあげたら、

    影響少なそうだし実装の手間少ないし、 やりたいこと実現できるし良いじゃん!!😈
  9. 振り返り • Vue3 + TypeScript は開発体験が良くて、書いていて楽しい • レガシーフロントエンドの Vue.js への置き換えは、単純にはできなくて骨が折れる

    • 削れる機能は削って、もっと楽したかった • どうして...ってコードは、一周回って変な笑いが出る