$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
レガシーなフロントエンドに立ち向かう
Search
Hajime Mugishima
December 08, 2018
Technology
1
540
レガシーなフロントエンドに立ち向かう
2018/12/08 Toyama.rb #35 年末LT大会
Hajime Mugishima
December 08, 2018
Tweet
Share
More Decks by Hajime Mugishima
See All by Hajime Mugishima
New Order in Cascade Sorting Order
mugi_uno
3
3.1k
Deep Dive into React Stream/Serialize
mugi_uno
6
1.6k
Next.js App Router での MPA フロントエンド刷新
mugi_uno
41
21k
コロナ禍 Frontend おさらい
mugi_uno
1
410
Toyama.rb
mugi_uno
1
96
kintoneフロントエンド刷新 〜新規参加5ヶ月から見るリアル〜
mugi_uno
3
1.7k
Javaを富山でやってたはずがSwiftのためにMacBook買ったらRubyでリモートワーカーになってJSの本を出版するまでを思い返す
mugi_uno
7
2.5k
脱レガシーフロントエンドのために知っておいたほうがいいこと
mugi_uno
20
7.4k
マルチカーソルのLT
mugi_uno
0
240
Other Decks in Technology
See All in Technology
ミスが許されない領域にAIを溶け込ませる プロダクトマネジメントの裏側
t01062sy
8
7.3k
sre本読んだ感想
pisakun
0
210
ポストモーテムレビューをブレームレスに運営し有効な改善アクションを引き出すために必要だったこと / What is needed to operate postmortem blamelessly and elicit improvement actions
yamaguchitk333
0
180
ドメインロジックで考えるテスタビリティ
leveragestech
1
270
突き破って学ぶコンテナセキュリティ/container-breakout-cncj-lt
mochizuki875
6
1k
[DevFestTokyo]Accelerating Flutter App Development Using Generative AI
korodroid
1
280
Explain EXPLAIN
keiko713
9
2.5k
Ruby on Browser - RubyWorld Conference 2024
tmtms
1
110
GeminiとUnityで実現するインタラクティブアート
hokkey621
0
560
まだチケットを手動で書いてるの?!GitHub Actionsと生成AIでチケットの作成を自動化してみた話 / 20241207 Yoshinori Katayama
shift_evolve
1
450
コーポレートデータマスター構築への道
kworkdev
PRO
0
120
品質管理チームのEMとして大事にしていること / QA EM
nihonbuson
0
570
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Designing for humans not robots
tammielis
250
25k
Making Projects Easy
brettharned
116
5.9k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Faster Mobile Websites
deanohume
305
30k
Code Review Best Practice
trishagee
64
17k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Embracing the Ebb and Flow
colly
84
4.5k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
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になることもある
見る側もあんまり楽しくない
ちゃんと説明する レビュアーの負担軽減のために ・ なんのためにやるのか? ・ 影響範囲は? ・ 何を確認したのか? ・ 何を見てほしいのか?
テキストに頼りすぎない レビュアーの負担軽減のために ・ 時間をとって口頭で説明する ・ ペアプロ・モブプロで対応する
レビュアーの負担軽減のために 説明できないのであれば、 それはただの丸投げ
勢い・勇気が必要なこともある
粒度を小さくするコスト > 力技で対応するコスト というケースは確実に存在する 小さいほうがいいけど…
時には一気にやることも必要
時には一気にやることも必要 でも怖い…
最悪の事態を想定する
ユーザ影響を小さくする
たとえば、リリースでの工夫はできる ・ ピークタイムを避ける ・ ロールバック手順を事前に整理する
リファクタリング単体では ユーザに価値は与えられない
だからこそ「壊さない」ことが大事
まとめ ・ まずは小さく進めるのが大事 ・ 泥臭い準備はつらいけど効果がある ・ 時には力技も必要になる ・ 壊さない、あるいは 壊してもすぐ直せるようにする
やっていこう!