1. 導入（はじめに）
こんにちは、外資就活ドットコムの新規開発チームです。
以前のブログで紹介した「開発Days」。その取り組みの中で、私たちのチームは技術負債の解消をテーマに、アプリの状態管理をReduxから脱却するチャレンジを行いました。
今年でローンチから13年がたった外資就活ドットコムのアプリはReactNativeで開発されており、状態管理にReduxを利用していました。しかし、プロダクトが成長するにつれて複雑さや保守コストが目立つようになり、開発スピードや品質に影響を与えるようになっていました。
本記事では私たちのチームが開発Daysで取り組んだRedux脱却のプロセスについてまとめていきます。
2. 現状の課題や背景
外資就活アプリの初期開発では、状態管理にReduxが導入されていました。
現在は当時の設計者がチームを離れており、限られたドキュメントをもとに、チーム全体で設計意図を理解しながら運用を進めていました。
結果として、Reduxは長年にわたりプロダクトを支えてきた実績がありましたが、サービスの成長に伴い、より最適な状態管理の形を模索する段階に来ていました。
当初の設計者の知見を次世代へ継承するタイミング
プロダクトの成長とともにメンバーの入れ替わりがあり、設計意図や運用ノウハウをチーム全体で共有・継承していく必要性が増してきていた。
実質スパゲッティ状態
機能の拡充に伴い状態の流れが複雑化してきたため、よりシンプルで追跡しやすい構造へとアップデートの必要性が増していた。
ボイラープレートの多さによる開発効率の低下
Action・Saga・Reducer・Storeを都度作成する必要があり、スピードが求められる新規機能開発において改善が必要だった。
新メンバーのオンボーディング効率化
Redux特有のコードパターンに加え、既存実装が複雑化しており、新メンバーのキャッチアップに時間を要していた。
こうした背景から、「このままReduxを使い続けるのは難しいのでは？」という課題感が高まり、開発部の取り組みである「開発Days」において、Redux脱却をテーマに据えることにしました。
3. 選択肢・検討プロセス
Redux脱却に向けて、チームでは次の方針で置き換えを進めました。
状態管理の置き換え
- TanStack Query
- 理由: API通信やキャッシュ管理がシンプルにできることに加えて、Web実装で触ったことのあるメンバーが多く、学習コストも低かったです。Reduxで複雑になっていた非同期処理を整理できる点も魅力でした。
- 方法: Redux thunkやsagaで行っていた非同期処理をTanStack Queryに置き換えて、キャッシュや自動リフェッチなどの機能も活用しました。
- React Context
- 理由: Reduxが担っていたローカル状態を簡単に置き換えられること、ボイラープレートを減らせることが決め手でした。Contextで状態を局所化できるので、コードの見通しも良くなります。
- 方法: 各機能ごとにContextを作り、必要な状態と更新関数だけを提供しました。これで依存関係を減らしつつ、シンプルな設計にしています。
型安全性の担保
- 理由: リファクタリング中の安全性を高め、将来的な開発効率も上げたかったためです。
- 方法:
.jsファイルを.ts/.tsxに変換し、型推論やインターフェースを使って不整合を検知しながら置き換えを進めました。型を導入することでレビュー時の負担も減らすことができました。
開発Daysでの進め方
第1回（2日間）
優先度の高い5機能を対象に作業しました。Claude Codeで依存関係を整理しつつ、作業パターンやノウハウをチームで共有できたのは助かりました。
第2回（2日間）
第1回の知見を活かしてさらに10機能を置き換えました。膨大なコードを整理しながらリファクタリングでき、効率も少しずつ上がってきた感じです。
作業の感触: 実際に作業を進めてみると、コードの複雑さに戸惑う場面もありましたが、その分「ここは共通化できる」「この状態はContextで局所化できる」といった改善の方向性が見えてきました。特に助かったのはClaude Codeで、私が読むのに時間のかかるコードもすぐに解釈してくれて、どこをどう直していけばいいのかが分かったのは非常にありがたかったです。少しずつ作業が進むにつれて、チーム全体でリファクタリングの感覚やノウハウを自然に共有できるようになったのも良かったです。
5. 今後の課題や展望
今回の開発Daysで、Redux脱却に向けた置き換えはおおむね順調に進められましたが、まだいくつか課題や次のステップがあります。
全機能への対応
今回は優先度の高い15機能を中心に置き換えましたが、アプリ全体にはまだ未対応の部分があります。残りの機能も徐々にContextやTanStack Queryに置き換え、状態管理の統一感をさらに高めたいですね。
テストの整備
リファクタリングを進める中で、今後さらにテストカバレッジを拡充できる部分も見えてきました。今後はユニットテストやE2Eテストを整備し、リファクタリング後の品質と安全性をより高めていきたいです。
チームでのナレッジ共有
今回の作業で得られたノウハウは部分的に共有できましたが、より体系的にドキュメント化して、今後の開発や新メンバーのオンボーディングに活かせるようにしたいです。
パフォーマンス・最適化
状態管理を置き換えたことでコードはシンプルになりましたが、アプリの動作やレンダリングのパフォーマンスについても確認し、必要に応じて最適化していく予定です。
継続的な改善
状態管理の改善は一度きりでは終わりません。今後もコードの見直しや改善ポイントをチームで定期的にチェックし、より保守しやすく、開発しやすい状態を維持していきたいです。
6. まとめ
今回の開発Daysでは、Redux脱却をテーマに、TanStack QueryやReact Contextへの置き換え、TypeScript化などに取り組みました。膨大な既存コードもClaude Codeを活用して整理しながらリファクタリングでき、チーム全体で作業の感覚やノウハウを共有できたのは大きな収穫でした。
まだ全ての機能への対応やテスト整備、パフォーマンスの最適化など課題は残っていますが、今回の取り組みを通じて、技術負債の解消に向けた第一歩を踏み出せたと感じています。
開発Daysという短期間の集中した取り組みだからこそ、普段の業務ではなかなか手をつけられない改善を試せたのは本当に良かったですね。今後もこのような機会を活かして、より保守しやすく、開発しやすいプロダクトを目指していきたいです。
