ソフトウェアエンジニアの金子（@naoty_k）です。
10Xでは、これまでネットスーパー事業者向けの管理画面（以下、管理画面v1）をNuxt.jsを使って開発・運用をおこなってきましたが、現在はReact Routerを用いた新しいアプリケーション（以下、管理画面v2）への移行を進めています。本記事では、なぜ移行することになったのか、どのように進めているのか、そして技術的な工夫とこれからの展望についてご紹介します。
移行の背景
これまで開発してきた管理画面v1はNuxt.jsをベースとしており、当時は迅速な開発に大きく貢献してくれていました。
しかし、数年の運用を経て将来的な拡張性やメンテナンス性に技術的な課題が生じ、フルスクラッチを検討していました。一方、10Xの他のプロダクトではReact + React Routerの構成が導入され始めていたため、新しい管理画面v2もReact Routerベースでフルスクラッチする判断に至りました。
これまでの歩み
管理画面v1の全画面を一気にv2に移行するのは現実的に不可能なため、画面単位での段階的な移行を計画しました。
まず、v1からv2への移行の技術的な制約や課題を明らかにするため、プロトタイプを実装し、認証方式の検証やgRPCサーバーとの通信などの課題を明らかにしていきました。Design Docを書き、SREチームやセキュリティチームなどを巻き込みながら技術的な意思決定を重ね、管理画面v2のアーキテクチャを設計していきました。
現在は共通して必要となる認証やバックエンドとの通信部分、レイアウトなどの実装を終え、比較的影響が少ない一部のCRUDを含む機能群をv2に移行しました。
認証における工夫
管理画面v2ではv1から引き続き認証基盤としてFirebase Authenticationを使っているのですが、v1とv2の間でログイン状態をシームレスに共有するための工夫が必要になりました。具体的には、Firebase Authentication SDKがIndexedDBに永続化した認証情報をService Workerで読み取りIDトークンを取得してv2へのリクエストヘッダーに付与するようにしました。
バックエンドのgRPCサーバーは管理画面v1と同じものを引き続き利用しているため、フロントエンドでの工夫のみで認証状態を引き継げるようになりました。
モノレポ構成への移行
管理画面v2への移行にあたって、アプリケーション本体だけでなく共通で利用するコンポーネントライブラリやgRPCクライアントを含めたモノレポ構成に移行しました。
- 管理画面アプリケーション本体
- スキーマから自動生成されたgRPCクライアント用のパッケージ
- 新しいデザインシステムを反映したコンポーネント用のパッケージ
といった複数のパッケージをpnpm workspaceを使い、1つのリポジトリで管理しています。これによって、依存関係の明確化や変更の一括管理が行えるように開発効率が改善しました。
なお、新しいデザインシステムについてはこちらの記事で紹介されています。
今後の展望
管理画面v2への移行は現在進行形で進んでいますが、画面の数も多く、単純な作業だけでもかなりのボリュームがあります。
そこで現在は、DevinなどのAIエージェントを活用して、コード資産をもとに画面の実装を自動化できないかという検証も始まっています。これが成功すれば、手作業の工数を減らしつつ、移行スピードを大きく上げられる可能性があります。
また、社内では月次でフロントエンド勉強会を開催するようになり、Reactや周辺技術などをテーマに情報共有や議論を行っています。技術的にキャッチアップしやすく、仲間と成長できる環境づくりも進めています。
おわりに
10Xでは、モダンなWebフロントエンド技術を活用してプロダクトの価値や開発体験を高めていく仲間を募集しています。ご興味のある方は、ぜひお気軽にご連絡ください！
