デブサミ2018 1日目 D-2 「属人化したフロントエンドの〜」まとめ

属人化したフロントエンドのJavaScriptを、‘新規機能開発を止めずに’改善するために行った取り組みについて。及びその経過報告。(鈴木 潤 [パーソルキャリア]) http://event.shoeisha.jp/devsumi/20180215/session/1635/
0
ユーン @euxn23

属人化したフロントエンドの JavaScript、他の人が触れないという点でレガシー JS っぽそう #devsumiD

2018-02-15 11:10:05
ユーン @euxn23

モダンな JS にすることで属人化を排除できているのか、という点は気になる #devsumiD

2018-02-15 11:12:48
ユーン @euxn23

というか最新のフロントエンド事情をキャッチアップしている人にしかメンテできないコードになるとそれもそれで属人化なのではないだろうか感もある

2018-02-15 11:13:14
ユーン @euxn23

DOM の class 名が GA のタグに使われているか分からない問題、やばそう #devsumiD

2018-02-15 11:16:50
ユーン @euxn23

GA に使うタグは prefix つけましょうというルール付けによる解消 #devsumiD

2018-02-15 11:17:10
ユーン @euxn23

GA 詳しくないんですが、 GA ってカスタムデータ属性使えないんですっけ #devsumiD

2018-02-15 11:17:31
ユーン @euxn23

React 化することでイベントハンドラと発火がわかりやすくなるというのはあると感じる、というか現状そういう方向でやろうと思ってた #devsumiD

2018-02-15 11:18:55
ユーン @euxn23

GA で class じゃなくてカスタムデータ属性、できそうっぽい digitalbalance.com.au/our-blog/event… #devsumiD

2018-02-15 11:19:38
ユーン @euxn23

JS のスクリプトタグは依存が非常に不明瞭になるのでかなりつらい、関数名だけなら IDE のジャンプでどうにかなるけどイベント発火とかはかなりつらい #devsumiD

2018-02-15 11:20:31
ユーン @euxn23

DOM(HTML) とイベントハンドラ(JS) が別なのが悪いので React で解決しよう問題はわかるんだけど、そのためだけに React 入れるのは環境の敷居が高く、環境自体がわかる人への属人化になりがちなのがなあー #devsumiD

2018-02-15 11:25:16
ユーン @euxn23

webpack とかの config が config 職人への属人化であるので、そういう意味で属人化排除のみの観点では両手を上げて賛同とは言えない感じがする…… ドキュメンテーションをしても、それを随時更新していかないといけないからなあ #devsumiD

2018-02-15 11:26:20
ユーン @euxn23

結局、どの辺を覚えておいてくださいというのを定期的にメンバにアップデートしていく覚悟がないと webpack 導入とかって将来的につらくなる気がする #devsumiD

2018-02-15 11:27:11
ユーン @euxn23

eslint 導入、そもそも既存のコードに引っかかる箇所が多すぎて非常につらい問題があるんですがそこはどうなんでしょう #devsumiD

2018-02-15 11:27:49
ユーン @euxn23

SPA を目指したい気持ちになるのはわかるけど、Web の toC だと SEO 的な問題があって、直接そこをめざした改善ができないのが難しいところなんだよなあー、そういう点で toB は負債の回収はめちゃくちゃやりやすかった #devsumiD

2018-02-15 11:30:50
ユーン @euxn23

API 共通化のために SPA 、実際にあまたある Web 系では難しい話なので、現実的な落とし所としては SSR するための BFF とかそんなところになるんですかね…… それこそ BFF できる人材少なすぎる問題による属人化が #devsumiD

2018-02-15 11:33:17
ユーン @euxn23

というかメンバの練度が高いからうまくいった話っぽい感じがする #devsumiD

2018-02-15 11:33:42
ユーン @euxn23

こういううまく立つレガシーしました系の話、数年後にその後の話を聞きたいよな、特に近年の JS #devsumiD

2018-02-15 11:34:29
ユーン @euxn23

新規開発部分に新しい技術を入れていくのはやりやすいけど、既存部分はデグレの問題とかテストがそもそも足りてない問題とか、じゃあテスト書くかというと優先度が〜という話になるので結局放置されちゃう気がするんだよなあー #devsumiD

2018-02-15 11:36:38
ユーン @euxn23

結局レガシー箇所を修正した話を聞けていない気がする…… #devsumiD

2018-02-15 11:36:55
ユーン @euxn23

逆に弊社、というか僕結構がんばっているのでは?という気持ちになってきた

2018-02-15 11:37:09
ユーン @euxn23

レガシーコードへの eslint 、少なくとも no-undef だけ入れて実行するのは最低限やらないとダメだと思う #devsumiD

2018-02-15 11:37:53
ユーン @euxn23

逆に no-undef 以外の文法的な箇所はほっといてもどうにかなるので、とにかく no-undef だけは最優先してやっていかなければならない #devsumiD

2018-02-15 11:38:26
ユーン @euxn23

no-undef でチェックするだけで 他の script タグから window に囃されている変数への依存とかが発見されるので、安全になるが、それをちゃんと直そうとするとコストがやばいのでそこは程度の問題っぽい #devsumiD

2018-02-15 11:39:11