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
320
レガシーなフロントエンドに立ち向かう
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
300
Toyama.rb
mugi_uno
1
54
kintoneフロントエンド刷新 〜新規参加5ヶ月から見るリアル〜
mugi_uno
3
1.4k
Javaを富山でやってたはずがSwiftのためにMacBook買ったらRubyでリモートワーカーになってJSの本を出版するまでを思い返す
mugi_uno
7
2.4k
脱レガシーフロントエンドのために知っておいたほうがいいこと
mugi_uno
20
7.1k
マルチカーソルのLT
mugi_uno
0
120
消費税軽減税率制度
mugi_uno
7
6.6k
15分で知(った気にな)る最近のフロントエンド事情
mugi_uno
2
170
Webpacker is installed 🎉🍰
mugi_uno
1
1.7k
Other Decks in Technology
See All in Technology
SmartHRからOktaへのSCIM連携で作り出すHRドリブンのアカウント管理
jousysmiler
1
120
データ分析基盤の要件分析の話(202201_JEDAI)
yabooun
0
400
KyvernoとRed Hat ACMを用いたマルチクラスターの一元的なポリシー制御
ry
0
240
DNS権威サーバのクラウドサービス向けに行われた攻撃および対策 / DNS Pseudo-Random Subdomain Attack and mitigations
kazeburo
5
1.3k
岐路に立つ若手がAmazonianの仕事術を学んできました / learning amazonian productivity hacks as a junior engineer
yayoi_dd
0
160
MarvelClient Upgrade 64bit クライアントへの自動アップグレード設定
mitsuru_katoh
0
190
ECSコスト削減のブレイクアウトセッションを聴いてきた話 / joining a breakout session on reducing costs with ECS
yayoi_dd
0
140
MLOps Workshopでの学びと弥生の研究開発基盤 / takeaways from MLOps workshop and YAYOI's research and development infrastructure
yayoi_dd
0
160
立ち止まっても、寄り道しても / even if I stop, even if I take a detour
katoaz
0
1k
SPA・SSGでSSRのようなOGP対応!
simo123
2
160
OCI DevOps 概要 / OCI DevOps overview
oracle4engineer
PRO
0
510
CUEとKubernetesカスタムオペレータを用いた新しいネットワークコントローラをつくってみた
hrk091
1
300
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
PRO
13
5.4k
Navigating Team Friction
lara
177
12k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
182
15k
Docker and Python
trallard
30
1.9k
GitHub's CSS Performance
jonrohan
1020
430k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
How to name files
jennybc
47
73k
Rails Girls Zürich Keynote
gr2m
87
12k
Designing with Data
zakiwarfel
91
4.2k
Building Better People: How to give real-time feedback that sticks.
wjessup
346
17k
The Illustrated Children's Guide to Kubernetes
chrisshort
22
43k
For a Future-Friendly Web
brad_frost
166
7.8k
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になることもある
見る側もあんまり楽しくない
ちゃんと説明する レビュアーの負担軽減のために ・ なんのためにやるのか? ・ 影響範囲は? ・ 何を確認したのか? ・ 何を見てほしいのか?
テキストに頼りすぎない レビュアーの負担軽減のために ・ 時間をとって口頭で説明する ・ ペアプロ・モブプロで対応する
レビュアーの負担軽減のために 説明できないのであれば、 それはただの丸投げ
勢い・勇気が必要なこともある
粒度を小さくするコスト > 力技で対応するコスト というケースは確実に存在する 小さいほうがいいけど…
時には一気にやることも必要
時には一気にやることも必要 でも怖い…
最悪の事態を想定する
ユーザ影響を小さくする
たとえば、リリースでの工夫はできる ・ ピークタイムを避ける ・ ロールバック手順を事前に整理する
リファクタリング単体では ユーザに価値は与えられない
だからこそ「壊さない」ことが大事
まとめ ・ まずは小さく進めるのが大事 ・ 泥臭い準備はつらいけど効果がある ・ 時には力技も必要になる ・ 壊さない、あるいは 壊してもすぐ直せるようにする
やっていこう!