■モダンフロントエンドなんか意味ない

※タイトルは釣りです

去年から稼働している現場で、以前からあったReact Nativeの面倒を見ているんだがまあこれがひどい出来なんだ。

• React Nativeなのに、あちこちでifとforの連発してES2015以前の書き方している。
• TypeScriptなのにany連発で全然型補完が効かない。
• 一つのコンポーネントに色々詰め込んで2000行とかになっている。
• 一つ100行超えの巨大な関数がやたらある。
• ifのネストとかSwitchとかでやたら複雑な条件分岐している。
• クラスコンポーネントと関数コンポーネントが混在している。
• useContextとか使っていなくてpropsバケツリレーしている。逆によくわからないところでuseContext使っている。
• APIを叩いているところがコンポーネント内だったりservice(っぽいとところ)だったりRepository(らしきところだったり)バラバラ。
• 命名が「const kensakuItem」とか「const updateItemList (アップデートしていない)」だったり。
• コメントがないマジックナンバーがあちこちに書かれている。
• 当然のことながらテストなど書かれていない。

jQuery時代に見かけたようなコードをやたら見かけたので思わず懐かしくなってしまった。

リファクタリングしようとしたけど直す範囲が広すぎてアプリを壊しかねなかったので、早々に諦めてだましだまし保守をしていた。

そんな中今年に入ってアプリのリニューアルの話が出てきた。React Native捨ててSwift/KotlinやらFlutterに書き換えるとかそういうのではなく、デザインの刷新といくつかの機能改修。

このままだとアプリが更に魔窟化するので、マネージャーに色々相談したところいくつかの事実がわかった。

• 社内にネイティブアプリエンジニアがいなかったのでReact Nativeを採用した。
• 当時いたフロントエンドエンジニアがいわゆる「意識高い系」でReact Native使いたいという理由で技術選定された。
• 「意識高い系」なので、一応動くレベルで品質がよろしくないものが出来上がる。
• 「意識高い系」の化けの皮が剥がれた頃に退職。
• その後何人かに引き継がれ今に至る。引き継いだ俺もWEBフロントでネイティブアプリは専門外。

ということだった。

結局現状のまま進めるわけにはいかず、要件定義の傍らリファクタリング作業をしている。

そういう経緯もあったので、リファクタリングとテストの工数も積んだ上で見積もりだしてもらってる。

「レガシーアーキテクチャをモダンアーキテクチャに刷新」なんてよく聞く話しだけど、

実態は「長年の増改築とだましだましのリフォームが限界になってきたので新築で建て替えます」何だと思う。

最近は「Vue.jsからRemixにマイグレーション」なんて見かけるけど、悪いのはVue.jsじゃなくて禄に設計しないでコード書いてるエンジニアと、

リファクタリングには予算でないけどマイグレーションなら予算取れるという悪しき風習。

年がら年中フロントエンド刷新しているような会社は地雷なので行かないほうがいい。

いくらRemixやらNext.jsやら最新鋭のフレームワーク使ってても、クソコードで書いたらクソが出来上がるだけだ。

新しいフレームワークを試す暇があったらリーダブルコードを最初から読み直せ。

Permalink | 記事への反応(2) | 10:06

ツイートシェア