【フロントエンド】突然やってくる移行に備えましょうの話

こんにちは！
アルセウスexのイマーシブをついに引けてハッピーなwharaguchiです。

今回は、自分が去年一年行っていたコンポーネント移行の準備についてのお話です。

TL;DR

いやー去年地道にコンポーネントの移行準備してたら、早速移行する機会があったんですよ〜
コツコツやっておいてよかった〜

はじめに

スペースマーケットでは、複数のリポジトリでサービスを運用しており、フロントエンドは主に旧環境（以下V1）と新環境（以下V2）の2環境があります。

ここ最近はV2で実装を進めることがほとんどで、V2の特徴としては99.4%のコードがTypeScriptで書かれており、ユニットテストのカバレッジは、89.5%と高い水準をキープしています✌️

一方V1は、以下のような理由からV2と比べると開発環境がよいとは言えない状態になっています。

• JavaScriptとTypeScriptが混在している
• 様々な設計思想が混在している（例: Atomic Design、co-locationなど）
• コーディングルールが統一されていない（例: コンポーネントによって、default exportとnamed exportがあるなど）
• ファイルによっては、1000行を超えるファイルがある

なぜなら、V1のコードは、初期からスペースマーケットのサービスを支えてくれているコードであり、多くのエンジニアが改修を重ねてきたためです。

なので仕方ないことではありますし、感謝もしているのですが、「この施策はV1で開発するのか...」と少し気が重くなることも正直ありました😇（ゆーてそこまででもないんですが、V2と比べてしまうと...という意味で）

コンポーネント移行をやろうと思ったきっかけ

そのため、V1にあるコードを、開発効率も開発体験も良いV2に移行としたと考えていました。

本来であればえいや！でページをまるごとを移行してしまうのが早いのですが、メインの開発もありますし、片手間でページ自体の移行を行うのは少し作業が重たいです。

そこで、まずはV1のコードを整備することで、いずれ移行を行う際のハードルが下がるのではないかと考えました。

移行準備をしていく

まずは対象のコンポーネントを洗い出しました。
対象ページは決まっていたので、そのページに関連のあるコンポーネントを洗い出し、計画を立てました。

またマネージャーと話をして、以下を決めました。

• 個人目標に含める
  • 目標に含めることで、「やりたいなー」を「やらなくちゃ」にするため💪
• 1週間に必ず1PRは出す
• 規模が大きくなりそうな場合は、できたところまでで一旦PRを作るでもOK
  • とはいえ、1行だけ直してPR作成などはもちろんNG🙅‍♀️

どう進めた？どんな作業をした？

大まかな流れとして以下のように進めました。

1. まず対象のコンポーネントのUTを書きPRを作成する。（これで1PR）
2. 1のPRが完了次第、リファクタリングを行う。（これで1PR）

UTやリファクタリングの内容が軽微な場合にはまとめて1PRとしたこともありましたが、基本的には上記の通りに進めていきました。

また自分が行ったリファクタリングの内容としては、

• JSで書かれたコードをTypeScript化
• 古いデザインシステムのスタイルを新しいデザインシステムに置き換え
• コーディングルールの統一
• JSDocやコメントアウトでコードの補足を追加
• ページ毎に仕様が書かれたドキュメントをREADMEファイルとして作成する
• 以前対応していた多言語対応を廃止（i18n）
  • 現在は対応していないものの、言語ファイルと実装が別ファイルで管理されているため辛かった

などを行いました。

正直施策が忙しく個人タスクに取り掛かる時間が惜しいときもありましたが、作業内容がそこまで重たくないので、なんとか1年間続けられることができました。（トータルで約50件のPRを作成しました。）

早速コツコツ続けた効果が

こんなことを2024年はコツコツ続けていきました。
年末に作業が、年始にリリースが完了し、無事すべての作業が完了！やったね！となっていたところ、とあるPJが始まることとなりました。

そしてその施策では、まさに自分が一年間地道に準備をしてきたページが移行されることになりました。（正直そんなにすぐに移行されるとは思っていなかったので驚きました。）

実際に自分も移行作業を行ったのですが、やはりUTがあるかないか、コードがTypeScriptで書かれているかの差は大きく、自分でいうのもあれですが「去年の自分GJ!!!」と思いながら作業を進めることができました。

感想

いかがでしたでしょうか？

よかった点ばかり書いたので、一応反省点も書いておくと、UT追加やリファクタリングは順調に進みましたが、「ページ毎に仕様が書かれたドキュメントをREADMEファイルとして作成する」についてはそこまで手が回らず、当初想定していた数は作成することができませんでした。

とはいえ、2024年にコツコツ続けてきた個人タスクが早速実を結ぶ結果となり、やっておいてよかったと心から思えました。
あとシンプルにリファクタリングするのは気持ちよかったですね〜

今回は以上になります！
突然やってくる（かもしれない）移行作業に向けてみなさんも無理なくコツコツ移行を進めてみてはいかがでしょうか？

最後までお読みいただきありがとうございました！

さいごに

最後に宣伝です！
スペースマーケットでは現在エンジニアを募集しております！
ちょっと話を聞いてみたいといったようなカジュアルな面談でも構いませんので、ご興味のある方は是非ご応募お待ちしております！