Tech Blog

グローバルな家族アプリFammを運営するTimers inc (タイマーズ) の公式Tech Blogです。弊社のエンジニアリングを支える記事を随時公開。エンジニア絶賛採用中!→ https://timers-inc.com/engineering

プロジェクトを始める前にリファクタリングをしたら捗りました

カレンダーのデザインリニューアルプロジェクト
f:id:timers-tech:20200703183944p:plain:w600

はじめに

サーバーサイドエンジニアの鈴木です。弊社が提供しているサービスの 1 つに定期配送のカレンダーとフォトアルバムがあります。今回、プロジェクトとしてカレンダーの一部のデザインを変更する機会がありました。その際にプロジェクトを進める前に部分的なリファクタリングも一緒に行えて結果的に良い状態に繋がったと思ったので共有させて頂きます。

課題の発見

まず、プロジェクトを進めるにあたりカレンダーの合成がどこでどのように行われているのかの調査を行いました。そこで、下記の 2 つの課題が明らかになりました。

1. 同じカレンダーの画像生成を行う処理が 2 ヶ所に書かれている

同じ目的を達成するための同じ処理が 2 ヶ所にかかれていたため、今後カレンダーのデザインの仕様が変更されたときに片方の更新を忘れてしまう可能性がありました。また、そもそも修正のたびに 2 ヶ所に同じ修正を入れなければならない作業コストもかかってくることになります。もし今後同じ処理がコピー & ペーストで増えてしまった場合はそのコストとリスクが増え続けることになります。

2. 大きなバッチ処理と一体化しており、手元で気軽に合成結果を確認する方法がない

今回はカレンダーのデザインの変更にあたり、ピクセル単位での合成する画像や文字列の位置の微調整の繰り返しが必要となりそうでした。(さらに生成されるカレンダーのパターンは年月、言語により変動します) 修正のたびに大きなバッチ処理を起動してそれが終わるのを待つことを繰り返していると、それだけでもかなりの時間のコストがかかることになってしまいます。

解決に向けて

ここでは定石である DRY となるようにリファクタリングを行うのが良いと考えました。カレンダーの画像合成を行う責務だけを負う、フレームワークからも独立したプレーンなクラスを作成することで、今後その処理が必要になった場合はそのクラスを呼び出すだけで済みます。また、そのクラスだけを読み込んだテスト用のコードを作ることも容易になります。

クラスの抽出のイメージ(画像中に書かれているコードは架空のものです)
f:id:timers-tech:20200703180541p:plain:w500

ただし、リファクタリングを行うにしてもリファクタリング自体に追加の作業の工数がかかりますし、会社の事業としても重要な役割を負うバッチ処理であったためプロジェクトのスコープよりも広く手を加えることでバグを生むリスクもありました。なのでチームに相談をしてから実施することにしました。リファクタリングの意図が伝わりやすいようにチームとプロジェクトオーナーには 現状の課題 解決方法 メリットとデメリット を整理して相談を行いました。その結果、快く受け入れてもらうことができました。( もちろん、会社のカルチャーとして価値のあるリファクタリングであれば、どんどんやっていこうという雰囲気があったことがとても助けになっています )

結果

結果として下記の 3 つの良かったことがありました。

プロジェクトが進めやすくなった

リファクタリングを行ってからプロジェクトに着手ができたため、コードの重複 & 成果物の確認が効率化した状態でプロジェクトを進められるようになりました。

テストがしやすくなった

カレンダーの画像合成を行うクラスを独立させたことで、単独でのテストが行いやすくなりました。ローカル環境での実行はもちろん、CI で自動実行されるようにできたので、気軽に合成結果を確認できるようになりました。CI では、画像の合成結果の自動テストはコードだけの自動テストに比べて手間がかかるため、生成された画像を Atifact に配置してブラウザから目視確認できるようにしました。

Artifact に置かれたファイル
f:id:timers-tech:20200702182547p:plain:w400


前述でも少し触れましたが、生成されるカレンダーの種類は年月、言語によって複数のパターンが存在します。それらを 1 枚ずつ確認するのは手間がかかるため一覧できる画面を作りました。具体的には Artifact に calendar_debugger.html という画像を読み出すだけの HTML を CI のビルドごとに動的に作成し、それをブラウザで開くと一覧画面として機能させることができました。テストで自動生成された画像も Artifact に置かれているため、HTML からは img タグを使用するだけで参照することができます。

Artifact に置かれた画像を一覧で確認できる画面(写真の部分はブログ用にモザイクがかかっています)
f:id:timers-tech:20200702191515p:plain:w400

将来の修正時のコストが減った

これは結果論となってしまうのですが、実はプロジェクト完了後にもう 1 ヶ所に同じカレンダーの合成処理があることが発覚したのですが、独立させたクラスを呼び出すだけで差し替えが行えたため、迅速な修正が行えました。

まとめ

目的を明確化したリファクタリングであれば、プロジェクトの進め方に良い影響を及ぼすことが実感できました。今後も積極的にこのようなメンテナンスを行って開発の速度、プロダクトの品質を高めながらプロジェクトに臨みたいと思いました。

積極採用中!!

子育て家族アプリFammを運営するTimers inc.では、現在エンジニアを積極採用中!
急成長中のサービスの技術の話を少しでも聞いてみたい方、スタートアップで働きたい方など、是非お気軽にご連絡ください!
採用HP: http://timers-inc.com/engineerings

Timersでは各職種を積極採用中!

急成長スタートアップで、最高のものづくりをしよう。

募集の詳細をみる