はじめに
今回の記事は、「MOSH Tech Radio」第1回エピソードをもとに執筆しました。MOSHのエンジニア陣が、AngularからReactへのフロントエンドリプレイスについて深掘りしています。AngularとReact両方の技術的側面や、実際にプロジェクトを進める上での課題、組織としての判断基準まで、非常に興味深い内容が具体的に語られました。今回はその一部始終を詳しく紹介していきます。
参加メンバー
- Ryo Adachi (X)
SIerとしてエンジニアのキャリアをスタート後、コネヒト株式会社に入社。バックエンド/フロントエンド開発に従事しながら、リードエンジニアとして組織の効率改善やプロセスの見直しにも尽力。2021年MOSHにJOIN。 - Shodai Suzuki (X)
IdaaSプラットフォーム、IoT農園サービスなど様々な組織で技術マネジメントを経験。MOSHではプロダクティビティーチームで主に技術基盤の改善や開発チームへのイネーブリングを行う。個人ではorvalのmaintainerとしての開発やrailsなど複数のOSSへのコントリビュート活動も積極的に行っている。 - Ryo Naruse (github)
学生時代にCGIゲームをきっかけに自身で開発をする。そこからプログラミングの楽しさを知り、エンジニアとしての道を歩み始める。個人開発を趣味とし、アプリやツールの開発を通じて技術的な挑戦を続けている。幅広い分野での経験とスキルを活かし、効率的な開発と価値あるソリューションの提供に力を注いでいる。 - Ryohei Nakamura (github)
大学時代からソフトウェアエンジニアとして複数の会社でプロジェクトに従事。また、在学中に建設業界向けのアプリケーション開発会社を業界経験者と共同創業（2024.6に辞任）。卒業研究テーマとして2022年度の未踏IT人材育成事業に採択され修了。現在はフリーランスエンジニアとして活動中。
音源紹介
今回の音源は以下になります。ぜひMOSH Tech Radioも聞いていただけると嬉しいです。 MOSH Tech RadioはMOSHの開発に携わるメンバーがプロダクト開発について自由にトークするラジオです。毎回テーマを1つ決めてMOSHのプロダクト開発の中身や業務での取り組み、技術的観点について発信していきます📻
リプレイスの背景
今回、MOSHのプロダクト開発チームでは、フロントエンド技術スタックの一部であるAngularからReactへのリプレイスを進めています。
リプレイスの理由は、単に「Angularが使いづらくなった」というわけではなく、長期的なプロダクト成長を見据えて総合的に判断した結果です。
このリプレイスの経緯や具体的な作業、技術的な課題、そしてリリースまでの歩みを、プロジェクトに関わったメンバーの視点で紹介します。
これまでの課題
私たちのプロダクトでは、これまでAngularを使い続けてきましたが、いくつかの課題が浮上していました。
-
メンテナンス性の課題
テストコードがほとんどなく、新機能追加や既存コードの改修に手間がかかる状態でした。また、内製のUIコンポーネントライブラリは成長途中で、開発スピードと品質を向上するまでには至っておらずまだまだコストがかかると判断しました。 -
アーキテクチャの限界
ディレクトリ設計やコンポーネント設計などのプロダクト全体のアーキテクチャも長期的な観点では拡張性に限界を感じる部分がありました。
これらの点を踏まえ、Angularを使い続けることも一つの選択肢でしたが改善して維持するコストが大きいため、ゼロベースで技術選定を行うことを決断しました。
リプレイスの過程
Reactへリプレイスを決定する際、プロダクトチームは以下のポイントを考慮しました。
-
メンバースキルセット
Reactは現在最も広く使われているフロントエンドフレームワークの一つであり、社内外の技術習得状況や採用市場でも、Reactの使用は合理的でした。 -
オープンソースのエコシステム
オープンソースとしてのエコシステムの豊富さや、情報発信の多さもReact採用の大きな要素です。関連ライブラリの活発な更新や、他の技術スタックとの親和性も重要視しました。
Angularは今後数年間は問題なく運用可能ではありましたが、5年先を見据えると、Reactにリプレイスすることでプロジェクトがよりスムーズに拡張できるとの判断に至りました。
本格的なリプレイス作業 〜 リリース
認証の共通化
AngularとReactを並行して動かすためには、ユーザーの認証情報を共有する必要がありました。このため、まず最大の課題となったのは、認証の共通化です。
現行システムでは、AWSのAmplifyを利用した認証フローを採用しており、Reactでも同じ設定を共有することで、認証を統一化しました。Angularでログインした後もReactのページで認証状態を維持することが不可欠であり、この対応のための調査と共通化が最初の技術的課題でした。
Nginxによるリクエストの振り分け
ページ間でフロントエンドの振り分けをどのように実現するかも大きな課題でした。現行のAngularアプリがS3でホスティングされている中、Reactアプリはcloudflare pagesでホスティングされています。これらのリクエストを特定のルートやパスに応じて振り分ける必要があり、AngularとReactは並行して稼働するため、その対応が必要でした。フロントエンドの構成として、Nginxを利用したリバースプロキシを導入し、リクエストによってAngularかReactかに分岐させる仕組みを採用しました。
問い合わせ画面のページリクエストをReactへ振り分けるなど、機能・ページ単位で段階的に作業を進めています。これにより、ユーザー側はドメインが変わることなく、シームレスにAngularとReactが切り替わり動作します。
リプレイスのこれから
現在は、問い合わせ画面のリプレイスが完了し、今後は他の機能のリプレイスが進められます。まだ新しい技術スタックにおける課題も残っています。リプレイス後の開発チームが共通基盤でいかにスムーズに開発を進められるかも、今後の大きな焦点です。新しい開発体制や技術を使いこなすため、エンジニア同士の共有を積極的に行い、リプレイス移行後の健全な運用体制を築くことが必要です。
最初のリリースを終えて
中村さんが担当した領収書発行機能
完全リプレイスを進める前に、まずは領収書発行機能のリプレイスが完了しました。この機能では、リリース直後の約3週間で大量の領収書が発行され、サポートチームの負担軽減に大きく貢献しています。
開発過程においては、APIの自動生成が非常に効果的に機能し、クライアントサイドのAPI呼び出しはcustom hookで簡単に実現できました。エンジニアとして本質的なロジックの実装に集中できたおかげで、スムーズにリリースを進めることができました。
鳴瀬さんが担当した問い合わせ画面
問い合わせ画面のリプレイスも無事に完了しました。画面自体は比較的シンプルなものでしたが、共通要素であるヘッダーやフッターの実装、認証が最も手こずった箇所です。これらを乗り越え、今後のリプレイスのファーストステップとして、開発の基盤が整いました。
まとめ
今回のAngularからReactへのリプレイスは、技術選定の段階から慎重なプロセスを経て進行してきました。既存画面や新機能画面のリリース、問い合わせ画面や領収書発行機能は、現状問題なく動作しています。
もちろん道半ばではありますが、今後も多くのページがReactへ移行していく予定です。リプレイスが完了する頃には、開発速度や保守性、そして開発者体験の向上が期待できるでしょう。
次のフェーズで発生する新たな課題に対しても、柔軟に対応していくことで、より堅牢でスムーズなプロダクト開発を実現するつもりです。
MOSHのエンジニアチームは、より良いプロダクト開発に取り組み、よりスケーラブルで柔軟なシステム開発を目指します。これからもMOSHの進化にご期待ください！
Discussion