Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
レガシーなフロントエンドに立ち向かう
Hajime Mugishima
December 08, 2018
Technology
1
290
レガシーなフロントエンドに立ち向かう
2018/12/08 Toyama.rb #35 年末LT大会
Hajime Mugishima
December 08, 2018
Tweet
Share
More Decks by Hajime Mugishima
See All by Hajime Mugishima
コロナ禍 Frontend おさらい
mugi_uno
1
280
Toyama.rb
mugi_uno
1
45
kintoneフロントエンド刷新 〜新規参加5ヶ月から見るリアル〜
mugi_uno
3
1.2k
Javaを富山でやってたはずがSwiftのためにMacBook買ったらRubyでリモートワーカーになってJSの本を出版するまでを思い返す
mugi_uno
7
2.4k
脱レガシーフロントエンドのために知っておいたほうがいいこと
mugi_uno
20
6.9k
マルチカーソルのLT
mugi_uno
0
120
消費税軽減税率制度
mugi_uno
7
6.5k
15分で知(った気にな)る最近のフロントエンド事情
mugi_uno
2
160
Webpacker is installed 🎉🍰
mugi_uno
1
1.6k
Other Decks in Technology
See All in Technology
大声で伝えたい!定時に帰る方法
sbtechnight
0
220
脆弱性スキャナのOWASP ZAPを コードベースで扱ってみる / OWASP ZAP on a code base
task4233
1
220
ECS Fargate+Mackerelにおける監視費用を削減するまでの話
nulabinc
PRO
1
310
eBPF-based Container Networking
johnlin
2
1.1k
サイバー攻撃を想定したクラウドネイティブセキュリティガイドラインとCNAPP及びSecurity Observabilityの未来
sakon310
4
440
EKS AnywhereとIAM Anywhereを組み合わせてみた
regmarmcem
0
210
Settlement simulation testing to ensure correct settlement processing
applepine1125
2
980
Red Hat Partner Training Portal のご紹介 / Red Hat Partner Training Portal Introduction
rhpej
0
110
#awsbasics [LT] サーバレスECにおける Step Functions の使い方
miu_crescent
0
830
psql, my favorite tool!
nuko_yokohama
1
180
COSCUP x KCD Taiwan 2020 - 那些年我們在開源社群的日子 - Cloud Native Taiwan
pohsien
0
120
DBRE 活動と information_schema
_awache
0
250
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
316
22k
Debugging Ruby Performance
tmm1
65
10k
Building Your Own Lightsaber
phodgson
95
4.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
225
120k
Pencils Down: Stop Designing & Start Developing
hursman
113
9.8k
Producing Creativity
orderedlist
PRO
334
37k
How to name files
jennybc
40
63k
Building Flexible Design Systems
yeseniaperezcruz
310
34k
Faster Mobile Websites
deanohume
294
28k
The Language of Interfaces
destraynor
148
21k
Designing on Purpose - Digital PM Summit 2013
jponch
106
5.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
37
3.3k
Transcript
レガシーなフロントエンドに立ち向かう 2018/12/08 Toyama.rb #35 年末LT大会
おおよそ1年半 フロントエンドで色々やった
1年半前の姿 ・ ほぼすべてCoffeeScript ・ browserifyでビルド(激遅) ・ テストコードなし ・ Lint系のツールなし ・
Vueのバージョンが0.12 ・ 重要な関数の中身が魔境 ・ jQueryどっぷりな箇所が多数
現在 ・ CoffeeScript廃止 → ESNext ・ webpackでのビルド ・ Mochaでテストを書けるように ・
ESLint導入 ・ Vueバージョン2.5に更新(最新) ・ 魔境関数を大幅リファクタリング ・ コアな機能はVue化
結構大変だった
さまざまな知見を得られた
ツールで出来ることはツールに任せる
人間は絶対にミスする
可能なものは機械に任せる
e.g. CoffeeScriptからの移行 decaffeinate https://github.com/decaffeinate/decaffeinate → ざっくりES6に変換できる
e.g. Vue0.14→2.4の更新 vue-migration-helper https://github.com/vuejs/vue-migration-helper → 影響を受ける箇所をサジェスト
完璧ではない 注意! decaffeinate → 理想のESコードにはならない vue-migration-helper → hamlは解析できない
負担を軽減するために使う
少しずつやる
一気にやりたくなるが、こらえる
e.g. webpack導入時 コードの変更は基本的にしない (import/exportの書き換えのみ)
e.g. ESLint導入時 何段階かに分けて導入 1. eslintのインストールのみ 2. auto x可能なものを有効化 3. さらに1つずつルールを有効化
段階を踏む
影響範囲を小さくする
広範囲に及ぶ変更は怖い
であれば範囲を狭くする
1画面ずつVue2.4にする e.g. Vue0.14→2.4の更新 1. Vue0.14でローカルパッケージを作る 2. 既存コードをローカルパッケージに向ける 3. Vue2.4を依存に追加 4.
置き換えたい箇所のみ参照をVue2.4にする
DOMのRead/Writeで集約 e.g. jQueryコードのリファクタリング 1. DOMのReadのみ行う部分を集約 2. DOMのWriteのみ行う部分を集約 3. DOMのRead/Write双方を行う部分を集約 4.
DOM操作を伴わない処理に切り出し
少しずつ or 影響を小さく進める理由 ・ トラブル発生時を考慮して - 迅速に原因特定できる - ロールバックが容易になる ・
レビュアーの負担を軽減できる
状況の可視化を怠らない
まずはちゃんと現状を理解する
データフローを可視化 e.g. jQueryコードのリファクタリング
必要な時間やリスクが見えてくる
テストを整える
e2eテストに命を救われる e.g. 全体的に.. ・ 「ユーザ体験」のデグレがないのを保証
ビジュアルテスト最高 e.g. 全体的に.. ・ 表示崩れなどを機械的に検知できる安心感
足りなければ書く e.g. 全体的に.. ・ jQueryリファクタ時は 事前に200exampleほどテストを追加
リファクタリング着手前に テスト整備を行う価値はある
レビュアーの負担を考慮する
リファクタPRはレビューがつらい
どうしても大きいPRになることもある
見る側もあんまり楽しくない
ちゃんと説明する レビュアーの負担軽減のために ・ なんのためにやるのか? ・ 影響範囲は? ・ 何を確認したのか? ・ 何を見てほしいのか?
テキストに頼りすぎない レビュアーの負担軽減のために ・ 時間をとって口頭で説明する ・ ペアプロ・モブプロで対応する
レビュアーの負担軽減のために 説明できないのであれば、 それはただの丸投げ
勢い・勇気が必要なこともある
粒度を小さくするコスト > 力技で対応するコスト というケースは確実に存在する 小さいほうがいいけど…
時には一気にやることも必要
時には一気にやることも必要 でも怖い…
最悪の事態を想定する
ユーザ影響を小さくする
たとえば、リリースでの工夫はできる ・ ピークタイムを避ける ・ ロールバック手順を事前に整理する
リファクタリング単体では ユーザに価値は与えられない
だからこそ「壊さない」ことが大事
まとめ ・ まずは小さく進めるのが大事 ・ 泥臭い準備はつらいけど効果がある ・ 時には力技も必要になる ・ 壊さない、あるいは 壊してもすぐ直せるようにする
やっていこう!