Upgrade to Pro — share decks privately, control downloads, hide ads and more …

レガシーなフロントエンドに立ち向かう

0f162107f1b716c9fa62d6071eb8b995?s=47 Hajime Mugishima
December 08, 2018
Technology
1
290

 レガシーなフロントエンドに立ち向かう

2018/12/08 Toyama.rb #35 年末LT大会

0f162107f1b716c9fa62d6071eb8b995?s=128

Hajime Mugishima

December 08, 2018
Tweet

More Decks by Hajime Mugishima

See All by Hajime Mugishima
コロナ禍 Frontend おさらい
0f162107f1b716c9fa62d6071eb8b995?s=48 mugi_uno
1
280
Toyama.rb
0f162107f1b716c9fa62d6071eb8b995?s=48 mugi_uno
1
45
kintoneフロントエンド刷新 〜新規参加5ヶ月から見るリアル〜
0f162107f1b716c9fa62d6071eb8b995?s=48 mugi_uno
3
1.2k
Javaを富山でやってたはずがSwiftのためにMacBook買ったらRubyでリモートワーカーになってJSの本を出版するまでを思い返す
0f162107f1b716c9fa62d6071eb8b995?s=48 mugi_uno
7
2.4k
脱レガシーフロントエンドのために知っておいたほうがいいこと
0f162107f1b716c9fa62d6071eb8b995?s=48 mugi_uno
20
6.9k
マルチカーソルのLT
0f162107f1b716c9fa62d6071eb8b995?s=48 mugi_uno
0
120
消費税軽減税率制度
0f162107f1b716c9fa62d6071eb8b995?s=48 mugi_uno
7
6.5k
15分で知(った気にな)る最近のフロントエンド事情
0f162107f1b716c9fa62d6071eb8b995?s=48 mugi_uno
2
160
Webpacker is installed 🎉🍰
0f162107f1b716c9fa62d6071eb8b995?s=48 mugi_uno
1
1.6k

Other Decks in Technology

See All in Technology
大声で伝えたい！定時に帰る方法
61c616e83bef28a1cd2666439ebf334b?s=48 sbtechnight
0
220
脆弱性スキャナのOWASP ZAPを コードベースで扱ってみる / OWASP ZAP on a code base
195f71c8183f8d27da66aa0618f293b6?s=48 task4233
1
220
ECS Fargate+Mackerelにおける監視費用を削減するまでの話
3e77f9dbec6a87756d1dbdddab283aee?s=48 nulabinc
PRO
1
310
eBPF-based Container Networking
98b5759510e487ade4145247bc856366?s=48 johnlin
2
1.1k
サイバー攻撃を想定したクラウドネイティブセキュリティガイドラインとCNAPP及びSecurity Observabilityの未来
E7f82c6db76f340b8ccc175d4330405b?s=48 sakon310
4
440
EKS AnywhereとIAM Anywhereを組み合わせてみた
28dd434482959f605e535fb81f691326?s=48 regmarmcem
0
210
Settlement simulation testing to ensure correct settlement processing
23e9a5be8e46efd1cf6a07694a047237?s=48 applepine1125
2
980
Red Hat Partner Training Portal のご紹介 / Red Hat Partner Training Portal Introduction
C5599f44875a3b21753361e9416385b9?s=48 rhpej
0
110
#awsbasics [LT] サーバレスECにおける Step Functions の使い方
74cec195bfb6cb5165256d88cb7fcf0f?s=48 miu_crescent
0
830
psql, my favorite tool!
18749909c147a9ee98f6b112911943cc?s=48 nuko_yokohama
1
180
COSCUP x KCD Taiwan 2020 - 那些年我們在開源社群的日子 - Cloud Native Taiwan
E2dd1857f6fc1ff69adb2af80b56e9fc?s=48 pohsien
0
120
DBRE 活動と information_schema
9513a9cc8ee9b5f2a8b4a5a914da8411?s=48 _awache
0
250

Featured

See All Featured
VelocityConf: Rendering Performance Case Studies
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
316
22k
Debugging Ruby Performance
D47656e20ff5e42f125fc5ea0fd636c6?s=48 tmm1
65
10k
Building Your Own Lightsaber
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
95
4.7k
The Straight Up "How To Draw Better" Workshop
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
225
120k
Pencils Down: Stop Designing & Start Developing
79acae287842acf29084005533a7fb3b?s=48 hursman
113
9.8k
Producing Creativity
Ae14cc4491ac334f9cd23f9f93b4305e?s=48 orderedlist
PRO
334
37k
How to name files
0a4f62e90c976eeb44d33add75cca5af?s=48 jennybc
40
63k
Building Flexible Design Systems
91cefdf141106fa10674aae74ce05890?s=48 yeseniaperezcruz
310
34k
Faster Mobile Websites
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
294
28k
The Language of Interfaces
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
148
21k
Designing on Purpose - Digital PM Summit 2013
7653c7c449918ff6542880a8c284f5e7?s=48 jponch
106
5.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
37
3.3k

Transcript

  1. レガシーなフロントエンドに立ち向かう 2018/12/08 Toyama.rb #35 年末LT大会

  2. おおよそ1年半 フロントエンドで色々やった

  3. 1年半前の姿 ・ ほぼすべてCoffeeScript ・ browserifyでビルド(激遅) ・ テストコードなし ・ Lint系のツールなし ・

    Vueのバージョンが0.12 ・ 重要な関数の中身が魔境 ・ jQueryどっぷりな箇所が多数

  4. 現在 ・ CoffeeScript廃止 → ESNext ・ webpackでのビルド ・ Mochaでテストを書けるように ・

    ESLint導入 ・ Vueバージョン2.5に更新（最新） ・ 魔境関数を大幅リファクタリング ・ コアな機能はVue化

  5. 結構大変だった

  6. さまざまな知見を得られた

  7. ツールで出来ることはツールに任せる

  8. 人間は絶対にミスする

  9. 可能なものは機械に任せる

  10. e.g. CoffeeScriptからの移行 decaffeinate
 https://github.com/decaffeinate/decaffeinate → ざっくりES6に変換できる

  11. e.g. Vue0.14→2.4の更新 vue-migration-helper
 https://github.com/vuejs/vue-migration-helper → 影響を受ける箇所をサジェスト

  12. 完璧ではない 注意！ decaffeinate → 理想のESコードにはならない vue-migration-helper → hamlは解析できない

  13. 負担を軽減するために使う

  14. 少しずつやる

  15. 一気にやりたくなるが、こらえる

  16. e.g. webpack導入時 コードの変更は基本的にしない (import/exportの書き換えのみ)

  17. e.g. ESLint導入時 何段階かに分けて導入 1. eslintのインストールのみ 2. auto x可能なものを有効化 3. さらに1つずつルールを有効化

  18. 段階を踏む

  19. 影響範囲を小さくする

  20. 広範囲に及ぶ変更は怖い

  21. であれば範囲を狭くする

  22. １画面ずつVue2.4にする e.g. Vue0.14→2.4の更新 1. Vue0.14でローカルパッケージを作る 2. 既存コードをローカルパッケージに向ける 3. Vue2.4を依存に追加 4.

    置き換えたい箇所のみ参照をVue2.4にする

  23. DOMのRead/Writeで集約 e.g. jQueryコードのリファクタリング 1. DOMのReadのみ行う部分を集約 2. DOMのWriteのみ行う部分を集約 3. DOMのRead/Write双方を行う部分を集約 4.

    DOM操作を伴わない処理に切り出し

  24. 少しずつ or 影響を小さく進める理由 ・ トラブル発生時を考慮して - 迅速に原因特定できる - ロールバックが容易になる ・

    レビュアーの負担を軽減できる

  25. 状況の可視化を怠らない

  26. まずはちゃんと現状を理解する

  27. データフローを可視化 e.g. jQueryコードのリファクタリング

  28. 必要な時間やリスクが見えてくる

  29. テストを整える

  30. e2eテストに命を救われる e.g. 全体的に.. ・ 「ユーザ体験」のデグレがないのを保証

  31. ビジュアルテスト最高 e.g. 全体的に.. ・ 表示崩れなどを機械的に検知できる安心感

  32. 足りなければ書く e.g. 全体的に.. ・ jQueryリファクタ時は
 事前に200exampleほどテストを追加

  33. リファクタリング着手前に テスト整備を行う価値はある

  34. レビュアーの負担を考慮する

  35. リファクタPRはレビューがつらい

  36. どうしても大きいPRになることもある

  37. 見る側もあんまり楽しくない

  38. ちゃんと説明する レビュアーの負担軽減のために ・ なんのためにやるのか？ ・ 影響範囲は？ ・ 何を確認したのか？ ・ 何を見てほしいのか？

  39. テキストに頼りすぎない レビュアーの負担軽減のために ・ 時間をとって口頭で説明する ・ ペアプロ・モブプロで対応する

  40. レビュアーの負担軽減のために 説明できないのであれば、 それはただの丸投げ

  41. 勢い・勇気が必要なこともある

  42. 粒度を小さくするコスト > 力技で対応するコスト というケースは確実に存在する 小さいほうがいいけど…

  43. 時には一気にやることも必要

  44. 時には一気にやることも必要 でも怖い…

  45. 最悪の事態を想定する

  46. ユーザ影響を小さくする

  47. たとえば、リリースでの工夫はできる ・ ピークタイムを避ける ・ ロールバック手順を事前に整理する

  48. リファクタリング単体では ユーザに価値は与えられない

  49. だからこそ「壊さない」ことが大事

  50. まとめ ・ まずは小さく進めるのが大事 ・ 泥臭い準備はつらいけど効果がある ・ 時には力技も必要になる ・ 壊さない、あるいは
 壊してもすぐ直せるようにする

  51. やっていこう！