はじめに
本記事では、弊社の不動産査定フォームを支えるフロントエンドのリファクタリング事例を紹介します。
長年の機能追加により、1つの JavaScript ファイル（form.js）に多くの機能が詰め込まれ、肥大化・複雑化し、可読性や保守性が低下していました。
今後の機能拡張やバグ修正を円滑に進めるため、Martin Fowler著『リファクタリング』の原則を参考に、コードの整理・改善を行いました。
リファクタリング前の課題
- 変数名・関数名が抽象的で意図が伝わりにくい
- UI制御・バリデーション・データ処理が混在し、責務が不明瞭
- 巨大な関数や複雑な分岐、重複・未使用コードの散在
- DOM操作が分散し、影響範囲やテストが困難
『リファクタリング』の原則を参考にした手法
Martin Fowler著『リファクタリング』の原則を参考に、以下の手法を中心に進めました。
- Remove Dead Code：未使用コードや重複処理の削除
- Single Responsibility Principle：1つの関数・モジュールが1つの責務を持つよう整理
- DRY（Don't Repeat Yourself）：重複処理の共通化
- Rename Variable／Function：意図が明確な名前へ変更
- Extract Function：長い関数や複数の責務を持つ処理を分割
『リファクタリング』の要点と現場での引用
『リファクタリング』では、リファクタリングを「外部から見た振る舞いを変えずに、内部構造を改善すること」と定義しています。
本書で紹介されている代表的なリファクタリング手法を、実際の現場で以下のように活用しました。
未使用変数・関数の削除
使われていない変数や関数を削除し、ノイズを減らしました。
巨大ファイルの分割
「Extract Function」や「単一責任原則」に基づき、数千行コード超の form.js を、機能ごとに mainForm.js、api.js、common.js、validation.js などに分割。
UI制御・API通信・共通処理・バリデーションなど各処理の役割が明確になり、テストや再利用が容易になりました。
グローバル変数の整理
以前は多くのグローバル変数が宣言されていましたが、formStates などのオブジェクトに集約し、プロパティとして管理することで、スコープを限定し可読性・保守性を向上させました。
Before:
After:
重複処理の関数化
複数箇所で使われていた処理を関数として抽出し、再利用性とテスト容易性を高めました。
Before:
After:
同じ処理を関数化し、複数箇所で利用することで、コード量が減り、メンテナンス性が向上。
関数の抽出
UI処理を小さな関数に抽出し、可読性・保守性・テスト容易性が大幅に向上
Before:
After:
DOM操作の整理
jQueryセレクタを formStates.elements でキャッシュ化することで、DOM要素の再検索を防ぎ、パフォーマンスと可読性・保守性が向上しました。
Before:
After:
苦労した点と解決策
- 複雑なロジックは小さな関数に分割し、段階的に整理・テスト
- UI変更ごとに手動テストで動作・バリデーションを細かく確認
- 命名規則を統一し、レビュー・テストを徹底
効果と学び
- コードの可読性・保守性が大幅に向上
- バグ修正や機能追加の工数削減
- 新メンバーでも理解しやすい構造に
- 『リファクタリング』の原則を実践することで、日々の開発でも継続的な改善が可能に
まとめ
- 今回のリファクタリングでは、命名規則の徹底、未使用コードの削除、責務の分離、データ整合性の確保を中心に改善を行いました。
- これにより、可読性・保守性・拡張性が大きく向上しました。
- リファクタリングの詳細な手法や考え方は、Martin Fowler著『リファクタリング』が非常に参考になります。
- 今後も継続的なリファクタリングを通じて、より良いコードベースを目指していきます。
今後日々の開発で意識すること
- リファクタリングの効果を最大化するためには、チーム全体でコーディング規約や命名ルールを明確にし、全員が一貫して遵守することが重要です。
- また、新機能の実装時にも「リファクタリング思考」を持ち、既存コードに改善点を見つけた際は、無理のない範囲で随時リファクタリングを行うよう心がけています。
- これにより、継続的にコードベースの可読性・品質を高めることができます。