Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
負債が溜まったレガシーフロントエンド画面を Vue.js でリプレイスした話
Search
t0yohei
October 16, 2022
Programming
0
1.7k
負債が溜まったレガシーフロントエンド画面を Vue.js でリプレイスした話
Vue Fes Japan Online 2022 での発表資料です。
https://vuefes.jp/2022/sessions/t0yohei
t0yohei
October 16, 2022
Tweet
Share
More Decks by t0yohei
See All by t0yohei
Vue.js を使って Grid System を実装した話
t0yohei
2
5.7k
プログラミング入門に失敗した話
t0yohei
0
140
【ITエンジニアが怪我で労災!?】 仕事中に足の小指が骨折したら起きること
t0yohei
0
290
Protocol Buffers で Web APIのスキーマ駆動開発がしたい
t0yohei
0
130
Ruby と JavaScript の違い( Function 編)
t0yohei
1
230
副業のノウハウ
t0yohei
0
150
ちょっとしたRubyの話
t0yohei
1
370
自作キーボード入門してみた
t0yohei
0
110
Other Decks in Programming
See All in Programming
Product Management LT会_クアンド新家
shinshin
0
260
AWS初心者ってどうやってAWSを学ぶ?〜アプリエンジニアがやってよかったアーキテクチャ学習方法〜
yamanashi_ren01
0
190
最近追加した型の紹介とその振り返り
aki19035vc
0
180
開発部に不満を持っていたCSがエンジニアにジョブチェンしてわかった「勝手に諦めない」ことの大切さ
sakuraikotone
28
16k
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
1
620
Rubyのパフォーマンスプロファイリングの改善 / Enhancing performance profiling for Ruby
osyoyu
1
410
Prompt FlowによるLLMアプリケーション開発
yuto2000
1
1k
DynamoDB コスト最適化っぽいことの基本 with Terraform
kuro_kurorrr
2
250
初心者がおさえておきたいAWS CDKのベストプラクティス 2024
konokenj
15
7.3k
継続的な活動で築く地方エンジニアの道
myamashii
2
360
Javaの現状2024夏 / Java current status 2024 summer
kishida
4
1.4k
Featured
See All Featured
The Mythical Team-Month
searls
217
43k
The Cult of Friendly URLs
andyhume
75
5.9k
Infographics Made Easy
chrislema
238
18k
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
Into the Great Unknown - MozCon
thekraken
20
1.3k
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
Bash Introduction
62gerente
607
210k
Agile that works and the tools we love
rasmusluckow
325
20k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
Building an army of robots
kneath
301
42k
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
Transcript
負債が溜まった レガシーフロントエンド画面を Vue.js でリプレイスした話 Vue Fes Japan Online 2022 -
2022/10/16
自己紹介 • とよへい ( @t0yohei ) • 株式会社クラウドワークス ◦ Web
エンジニア • アニメとコーヒーが好き • Vue.js / Ruby / PHP
想定する聞き手 • レガシーなフロントエンドに向き合っている方 • Vue.js での開発ノウハウに興味がある方 • 不思議なものがみたい方
Midjourney
アジェンダ • なぜ Vue.js 化を実施したのか • どういう作戦で進めていったか • 品質管理について •
難しかったこと • まとめ
なぜ Vue.js 化を実施したのか
None
クラウドワークスのフロントエンドについて • クラウドワークスは、10年ほど前に Rails + jQuery の構成で生まれた • 新規画面は Vue.js
で作成されているが、jQuery を使った古い画面がかなり残って いる
クラウドワークスのフロントエンドが抱えている課題 • 見た目を変えたいだけなのにバックエンドの Rails をいじる必要がある • フロントエンド、バックエンドの分業がしにくい • jQuery を書きたくない
これらの課題を Vue.js 化で解決しよう
Vue.js 化して既存画面を もっと改善しやすくしよう
どういう作戦で進めていったか
Vue.js 化の大まかな方針 • 最終的には全画面を Vue.js 化したい • 時間的な制約もあるので、優先順位が高いものから対応していく
優先順位はどうやってつけよう
「Vue.js 化して既存画面を もっと改善しやすくしよう」
将来的に改善したくなる可能性が 高い画面を優先する
ユーザーのアクセスが多い 一般ユーザー向け画面
優先順位の考慮から外した観点 • UIの変更が頻繁に行われている画面 ◦ 特定の理由で更新されているだけ (バナー更新とか) ◦ 単に手を入れるのが簡単
両方大事にした観点 • 対応が簡単な画面をたくさん改善 ◦ ユーザーに対するインパクト • 対応が難しい画面にじっくり挑む ◦ 長期的な改善に対するインパクト
ひとまずの Vue.js 化を行う画面 • 練習用の管理画面 × 1 • 一般ユーザー向けの簡単な画面 ×
2 • 一般ユーザー向けの難しい画面 × 1 • (これらの画面の対応が終わったら、体制を整えて Vue.js 化を継続する)
実装のスコープ
「Vue.js 化して既存画面を もっと改善しやすくしよう」 という目的に注力して、色々やりすぎない
何をやらないか(スコープ外) • CSSフレームワークを外す • バックエンドに API を生やして、API 経由でデータのやりとりをする • その他コストがたくさんかかりそうなことは無理にやらない
品質管理について
各種ツールと人力で品質を担保 • Storybook ◦ コンポーネント毎の動作を担保 • VRT(Visual Regression Testing) ◦
見た目の確認と、置き換え途中でデグレしていないことを担保 • vue-test-utils ◦ API 通信などの動作を担保 • 手動テスト ◦ 統合的な動きを担保
None
Storybook
None
None
VRT (Visual Regression Testing)
None
None
• フロントエンド開発体験向上のために VRT を導入してみた • crowdworks.jp のフロントエンド活動を振り返る 2021 詳細はテックブログに
E2E テストは不採用 • 負債が溜まった画面の E2E テスト、とても辛さそう • 一括のリプレイスを考えていたので、メリットがそこまで多くなさそう • (リプレイス全体を通して大きな問題は発生しなかったのでヨシ)
難しかったこと
Rails, jQuery のコードを Vue.js っぽいコードに書き換える
具体的には • 命令的 UI を宣言的 UI にする • Rails, jQuery
のコードを Vue.js, TypeScript のコードに書き換える • バックエンド(Rails)からフロントエンド(Vue)に適切な値を引き渡す
例: 仕事の予算を表示する部分
置き換え前のコード
何らかの html を生成して挿入する ここで生成された html を挿入する
置き換え後のコード
None
宣言的に書く
script setup を使って Vue.js と TypeScript で実装
これいるの...?ってコードが 埋まってる
具体的には • A/B テストの残骸 • どこからも参照されてなさそうなコード • 新しく作成されるデータでは付与されることがないラベル
実は前から壊れていた🙄
None
本体リリースに先駆けてお掃除
とにかく機能が多い
中ボスが 50 人くらいいるイメージ
機能ごとにコンポーネントを分けてひたすら作成
工夫: Containar Component で統制を取りやすく • style を持たない Vue コンポーネント •
自身が含むプレゼンテーションコンポーネントにデータを受け渡す • バックエンド API とやりとりするためのインターフェースを持つ
style を持たない バックエンド API とやりとりする ためのインターフェース プレゼンテーション コンポーネントにデータを受け渡す
工夫: Layout Component でスタイル定義を分離 • script を持たない Vue コンポーネント •
slot を使ってコンポーネントを入れ込む
slot を使って コンポーネントを入れ込む script を持たない Layout Component
共通のスタイル定義を切り出すとかもできる 共通のスタイル定義を切り出す
どうして...ってコードがある
気になるボタン(Watchlist Button)
None
修正前の実装
watchlist のデータ(json)を非同期で一 括で取ってくる 取得したデータ(json)に html が含まれ ているので、id が一致した仕事に対して その html
を埋め込む watchlist button を埋め込む div が仕 事ごとに用意されている
取得したデータ(json)に html が 含まれているので?
None
json に埋め込まれる html (※ 見やすさのために本来存在しない改行追加しています)
None
json として html を受け取って、 その html を dom にぶち込んでる
「気になる」ボタンが押された時はもちろん DOM の埋め込み直し
JSON 色つけですらなく、 DOM をそのまま埋め込み職人
(余談) Q. watchlist の追加に失敗したら どうなるでしょう?
A. Status Code: 200
status コードは甘え。 やる気があるなら payload の文字列で 結果を判定しろ
どうしようこれ
そもそもどういう感じに なっていたら嬉しいか
期待する動作 1. 画面初期化時は ajax でボタンの html(json) を取ってくるんじゃなくて、 watchlist の状態だけもらっておいて Vue.js
側でボタンの出し分けをする 2. 気になるボタンが押されたら、追加リクエストを送る 3. 追加された watchlist の id をレスポンスで受け取り、取り消しボタンを表示する 4. 取り消しボタンが押されたら、2で取得した id をつけて取り消しリクエストを送 る
課題は何か • 取り消しリクエストには watchlist の id が必要 • 現状の watchlist
追加 API だと、レスポンス json の html の中に watchlist の id が埋まって いて取り出しにくい
どうやって解決したか
現状の watchlist 追加 API のレスポンスに、 追加された watchlist の id 加えてあげたら、
影響少なそうだし実装の手間少ないし、 やりたいこと実現できるし良いじゃん!!😈
つまり レスポンスに新しく追加した watchlist_id を足して • html • message • watchlist_id
(NEW!) の 3 本立てで返してあげるようにする
json に html が含まれている状態を 放置することになるけどいいの...?
None
という訳で ついでに成功したかど うかも返すことに
めでたし!!!!
まとめ
振り返り • Vue3 + TypeScript は開発体験が良くて、書いていて楽しい • レガシーフロントエンドの Vue.js への置き換えは、単純にはできなくて骨が折れる
• 削れる機能は削って、もっと楽したかった • どうして...ってコードは、一周回って変な笑いが出る
大事なこと • 目的を明確にして、やらないことを決める
やめないこと
Special Thanks • OD さん • yamanoku さん
Thank you for listening !!