こんにちは！menu株式会社フロントエンドエンジニアの藤崎です。
本記事では、2021年秋から2025夏にかけて、menuフロントエンドチームの技術スタックがどのように変化し、進化してきたのかを振り返ります。
技術選定の背景や、各技術がもたらした効果、今後の展望についてご紹介することで、私たちの開発の軌跡と2025夏時点での現在地を少しでもご理解いただければ幸いです。
2021年秋に公開された「menuフロントエンドの開発環境（2021秋）」から約3年半の月日が流れました。
この間、私たちのチームを取り巻く環境や技術トレンドは大きく変化してきました。
本記事では、当時の技術スタックを振り返りつつ、2025夏時点で採用している主要な技術とその変遷、そしてその背景にある意思決定について解説します。
当時のmenuフロントエンドの主な技術スタックは以下の通りでした。
- 言語・フレームワーク: React Native、TypeScript
- エコシステム: Expo (Bare workflow)
- 状態管理: Redux、Context API、Redux-saga
- ルーティング: react-navigation
- Lint・フォーマット: ESLint、Prettier、Git hooks
- テスト自動化: jest (導入中)
- CI/CD: CircleCI、GitHub Actions
- 監視・データ集計: Sentry、Firebase Analytics
この頃は、React Nativeを軸に、TypeScriptによる堅牢な開発、Reduxを中心とした状態管理、Expoによる開発効率化を図っていました。
自動テストの導入も始まったばかりで、より安定した開発体制を目指していました。
そして2025夏、私たちの技術スタックは以下のように進化しています。
- 言語・フレームワーク: React Native、TypeScript
- エコシステム: Expo (Continuous Native Generation)
- 状態管理: Redux、Context API、Redux-saga
- ルーティング: react-navigation
- Lint・フォーマット・バンドル: ESLint、Prettier、Biome(試験運用)
- テスト自動化: Maestro (E2E)、Jest + Testing Library (Unit/Integration)
- API Mocking: MSW (Mock Service Worker)
- AIコーディング支援: GitHub Copilot, Gemini Advanced, Cursor (試用環境)
- CI/CD: Jenkins、GitHub Actions、Expo EAS Update
- 監視・データ集計: Sentry、Firebase Analytics (継続)
- デザインシステム: Figma
2021年と比較すると、新たな技術の導入や、既存技術の進化が見られます。
次項では、これらの変化について詳しく見ていきましょう。
この3年半の間で、私たちの技術スタックは様々な変化を遂げました。
主な変化と進化について解説します。
4.1. Expo関連技術の進化
まず、Expo CNG (Continuous Native Generation) を導入しました。
これは、Bare WorkflowでのSDKアップデートの煩雑さ解消や、EAS Buildの登場といった背景から採用に至りました。
従来、ネイティブコードを扱う必要がある場合はBare Workflowが主な選択肢でしたが、EAS Buildの進化によりManaged Workflowに近い形でもネイティブ機能の利用が可能になりました。
このような状況下で、EAS UpdateやEAS BuildといったEASの機能を最大限に活用するには、よりManaged Workflowに寄せた方が恩恵を受けやすいというチームの考えがありました。
Expo CNGは、そうした過渡期において、柔軟なネイティブコード制御とManaged Workflowの利便性を両立させるための選択肢であり、リリース効率化と開発効率化に貢献しています。
次に、Expo EAS Update も導入しました。
これは、従来のClassic Updateのサービス終了に伴う移行です。
Expo EAS Updateの記事でも詳しく解説されている通り、リリース前にバンドルをアップロードし、リリース当日はchannelとbranchの紐付けを変更するだけでリリースが完了するため、大幅な時間短縮と作業効率化が実現できています。
これは主にリリース効率化に貢献しています。
4.2. UIテストとAPI Mocking
UIテスト自動化への取り組みとして、新たにMaestroを導入しました。
従来のテスト実装における開発者の負担軽減と、テストへの心理的ハードルを下げることが主な目的です。導入の経緯や具体的な内容については、こちらの記事「モバイルE2EテストをMaestroで導入した話」に詳しくまとめています。
Maestroの導入は、UIレベルでのテスト自動化を推進し、開発チーム内での品質保証意識の向上とQAチームの負担軽減に貢献しています。
特に大きなメリットとして、実機やシミュレータ上で、DOMツリーや内部ロジックに依存せず、ユーザーが実際に画面を操作するのと同じように物理的なタップを通じてテストを実行できる点が挙げられます。
一方で、テストが時折不安定（フレーキー）になることもあり、この点の継続的なチューニングが課題として残っています。
また、Maestroを用いたUIテストの安定性向上とバックエンドAPIへの依存度低減のため、API MockingツールとしてMSW (Mock Service Worker) を採用しています。
これにより、テストの実行速度と信頼性の向上を図っています。
4.3. Lint・フォーマット・バンドルの刷新 – Biome
ESLint v8のEOLに伴い、v9への移行を検討する中で、次世代ツールであるBiomeを試験的に導入しました。
コミット前のリンティングチェックが高速化され、開発体験の向上に貢献しています。
現時点では柔軟性や枯れ度でESLintに軍配が上がる部分もありますが、今後の進化に期待しています。
4.4. CI/CD環境の変更 – Jenkins + GitHub Actions
CI/CD環境をCircleCIからJenkinsとGitHub Actionsの組み合わせに変更しました。
各ツールの特性を活かし、より柔軟で効率的なCI/CDパイプラインを構築しています。
具体的な役割分担や移行の背景については、今後の記事で詳しくご紹介できればと思います。
4.5. デザインシステムの本格運用開始
以前のmenuフロントエンド開発においても、デザインツールとしてFigmaは利用されていました。
2021年秋頃は、主にデザイナーがUIデザインを作成するためのツールという位置づけでしたが、2025夏に向けて、デザイナーとエンジニア双方の継続的な努力により、その活用方法は大きく進化しています。
具体的には、デザイントークンの導入によるデザインと実装の一貫性の向上、コンポーネントの再利用性を高めるための整備、そして一般的なデザインシステムのフレームワークに可能な限り準拠する形での体系化が進められました。
これにより、Figmaは単なるデザインツールとしての役割を超え、menuプロダクト全体で活用できる本格的な『デザインシステム』へと昇華しつつあります。
このデザインシステムの本格運用を通じて、より一貫性のあるUI/UXの実現、開発効率の向上、そしてデザイナーとエンジニア間の連携強化を一層推し進めています。
4.6. AIコーディングツールの活用
近年のAI技術の進化は目覚ましく、menuフロントエンドチームでもAIコーディングツールの活用を積極的に試みています。
GitHub CopilotやGemini Advancedといった主要なコード補完・生成ツールはもちろんのこと、GitHub Copilot AgentやCursorのようなより高度なAIエージェント機能についても、メンバーが試せる環境を整えています。
これらのツールがコーディングの効率化、定型作業の削減、コード品質の向上、あるいは新しい技術や知識のキャッチアップなどにどのように貢献できるか、現在進行形で検証を進めている段階です。
（WebStorm使いなのでJetBrains AI / Junieも使ってみたいなあ。。）
menuフロントエンドチームとしては、日々の開発速度を維持しつつ、エンジニアの開発体験向上や技術スタックのモダン化のために、新しいツール・ライブラリへのリプレイスなども積極的に進めていきたいと考えています！
しかし、その思いとは裏腹に、現状のテストカバレッジでは大胆なリファクタリングや技術刷新に踏み出すリスクが高いというジレンマを抱えています。
この状況を打破し、品質を担保しながら開発速度と技術進化を両立させるためには、テスト戦略のさらなる拡充が不可欠です！
これが現在私たちが直面している最も重要な課題の一つであると、私自身、強く認識しています！
技術を選定する際には、開発の効率やプロダクトの品質、そして私たちエンジニア自身の開発体験といった様々な観点を考慮に入れるように努めています。
新しい技術への挑戦には学習コストやリスクも伴いますが、可能な範囲で積極的にトライしていきたいと考えています。
今後も、技術トレンドの変化を捉えながら、より良い開発体制を構築していくために、以下の点に注力していきたいと考えています。
以下の展望は、現時点での技術的関心や検討中のアイデアであり、チームとしての確定した計画ではない点にご留意ください！
-
EASをはじめとするExpoエコシステムの活用:
Expo CNGとEASの強力な連携により、開発からリリースまでの効率を一層向上させることを目指す -
ルーティング戦略の見直し:
2025夏時点でReact Nativeのルーティングにはreact-navigationを長らく使用しており、その豊富な運用経験を踏まえつつ、Expo Routerのようなファイルシステムベースのルーティングを含む、より柔軟性や機能性に優れた新しいライブラリの動向も注視し、継続的に最適な選択肢を検討していく -
テスト戦略の進化:
MaestroによるUIテスト導入を皮切りに、より網羅的で効率的なテスト戦略を構築 -
API連携の強化とスキーマ駆動開発の推進:
React Nativeだけでなく、WebアプリケーションやFlutterでのアプリ開発においても、OpenAPI (Swagger) を用いたスキーマ駆動開発の導入と運用を検討 -
Webフロントエンド技術の導入とReact Nativeへの展開:
特にWebフロントエンドにおいて、TanStack系フレームワーク (React Query、React Tableなど) を用いた効率的なデータフェッチとキャッシュ戦略、Zustandによるシンプルでスケーラブルなグローバル状態管理、Tailwind CSSによる迅速なUI構築、Playwrightによる安定したE2Eテストの導入と学習を進め、よりモダンな開発体制への移行を目指す
これらのWebフロントエンドで検討・学習している技術は、React Nativeにおいても適用できるものがあれば積極的に導入を検討 -
非同期処理管理の見直しとRedux Sagaからの脱却:
現在、多くの非同期処理（特にAPI連携）の管理にRedux Sagaを全面的に採用しているが、コードの複雑化や肥大化、学習コストの高さといった課題を抱えている
よりシンプルで宣言的な非同期処理の実現を目指し、TanStack Query (React Query) のようなモダンなデータフェッチライブラリへの移行を検討することで、Redux Sagaへの依存度を低減し、開発体験とコードの見通し改善を目指す -
モダンな開発ツールの探求:
Biomeのような新しいツールの動向を注視し、必要に応じて積極的に採用することで、開発体験の向上を目指す
本記事では、menuフロントエンドチームの技術スタックの変遷と進化についてご紹介しました。
3年半という期間の中で、様々な技術を取り入れ、変化に対応してきた私たちの歩みが、少しでも伝わっていれば嬉しく思います。
menuでは、これからもより良いサービスを開発していくために、積極的に新しい技術を取り入れ、チームと共に成長していきたいと考えています！
最後までお読みいただきありがとうございました！
▼採用情報
レアゾン・ホールディングスは、「世界一の企業へ」というビジョンを掲げ、「新しい”当たり前”を作り続ける」というミッションを推進しています。
現在、エンジニア採用を積極的に行っておりますので、ご興味をお持ちいただけましたら、ぜひ下記リンクからご応募ください。
Views: 0
